mirror of
https://github.com/wallabag/wallabag.git
synced 2024-12-27 01:50:29 +00:00
modif css
This commit is contained in:
nicosomb
parent
e46efced1b
commit
c594aedf8c
2 changed files with 183 additions and 113 deletions
232
css/style.css
232
css/style.css
|
|
@ -1,3 +1,4 @@
|
|||
/*** GENERAL ***/
|
||||
body {
|
||||
color: #222222;
|
||||
font: 20px/1.3em Palatino,Georgia,serif;
|
||||
|
|
@ -5,19 +6,168 @@ body {
|
|||
margin: 10px;
|
||||
}
|
||||
|
||||
body.article {
|
||||
color: #222222;
|
||||
font: 20px/1.3em Palatino,Georgia,serif;
|
||||
background-color: #F1F1F1;
|
||||
}
|
||||
|
||||
a, a:hover, a:visited {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main ul#links {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main ul#links li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#main ul#links li a.current {
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: #040707;
|
||||
color: #F1F1F1;
|
||||
}
|
||||
|
||||
#main, #article {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#links a, .backhome a{
|
||||
text-decoration: none;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#links a:hover, .backhome a:hover{
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: #040707;
|
||||
color: #F1F1F1;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*** ***/
|
||||
/*** GRID DISPLAY ***/
|
||||
|
||||
#content {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#entries {
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 20px;
|
||||
-webkit-column-count: 3;
|
||||
-webkit-column-gap: 20px;
|
||||
column-count: 3;
|
||||
column-gap: 20px;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
#entries span.content {
|
||||
display: inline-block;
|
||||
margin-bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width : 599px),
|
||||
only screen and (max-device-width : 599px){
|
||||
#entries {
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 10px;
|
||||
-webkit-column-count: 2;
|
||||
-webkit-column-gap: 10px;
|
||||
column-count: 2;
|
||||
column-gap: 10px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
/*** ***/
|
||||
/*** LINKS DISPLAY ***/
|
||||
|
||||
#main a.tool {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#main #entries {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#main #entries .entrie {
|
||||
color: rgb(46, 46, 46);
|
||||
position:relative;
|
||||
background-color: #ffffff;
|
||||
padding: 15px;
|
||||
min-height: 6em;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: 0px 0px 2px -1px #000;
|
||||
box-shadow: 0px 0px 2px -1px #000;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#main #entries .entrie h2 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#main #entries .entrie h2 a:hover {
|
||||
color: #F5BE00;
|
||||
}
|
||||
|
||||
#main #entries .entrie .tools {
|
||||
position:absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#main #entries .entrie .tools a.tool span {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
a.fav span {
|
||||
background: url('../img/fav-on.png') no-repeat;
|
||||
}
|
||||
|
||||
a.fav-off span {
|
||||
background: url('../img/fav-off.png') no-repeat;
|
||||
}
|
||||
|
||||
a.archive span {
|
||||
background: url('../img/archive-on.png') no-repeat;
|
||||
}
|
||||
|
||||
a.archive-off span {
|
||||
background: url('../img/archive-off.png') no-repeat;
|
||||
}
|
||||
|
||||
a.delete span {
|
||||
background: url('../img/delete.png') no-repeat;
|
||||
}
|
||||
|
||||
/*** ***/
|
||||
/*** ARTICLE PAGE ***/
|
||||
|
||||
body.article {
|
||||
color: #222222;
|
||||
font: 20px/1.3em Palatino,Georgia,serif;
|
||||
background-color: #F1F1F1;
|
||||
}
|
||||
|
||||
#article header {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #222222;
|
||||
|
|
@ -36,74 +186,4 @@ header {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
#main, #article {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#main ul#links {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main ul#links li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#main ul#links li a.current {
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: #040707;
|
||||
color: #F1F1F1;
|
||||
}
|
||||
|
||||
#links a, .backhome a{
|
||||
text-decoration: none;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#links a:hover, .backhome a:hover{
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: #040707;
|
||||
color: #F1F1F1;
|
||||
}
|
||||
|
||||
#main #entries {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#main #entries .entrie {
|
||||
color: rgb(46, 46, 46);
|
||||
position:relative;
|
||||
background-color: #ffffff;
|
||||
padding: 15px;
|
||||
min-height: 6em;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: 0px 0px 2px -1px #000;
|
||||
box-shadow: 0px 0px 2px -1px #000;
|
||||
}
|
||||
|
||||
#main #entries .entrie h2 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#main #entries .entrie h2 a:hover {
|
||||
color: #F5BE00;
|
||||
}
|
||||
|
||||
#main #entries .entrie .tools {
|
||||
position:absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#main a.tool {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: right;
|
||||
}
|
||||
/*** ***/
|
||||
64
index.php
64
index.php
|
|
@ -8,19 +8,8 @@
|
|||
* @license http://www.wtfpl.net/ see COPYING file
|
||||
*/
|
||||
|
||||
require_once dirname(__FILE__).'/inc/Readability.php';
|
||||
require_once dirname(__FILE__).'/inc/Encoding.php';
|
||||
include dirname(__FILE__).'/inc/functions.php';
|
||||
|
||||
try
|
||||
{
|
||||
$db_handle = new PDO('sqlite:db/poche.sqlite');
|
||||
$db_handle->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
}
|
||||
catch (Exception $e)
|
||||
{
|
||||
die('database error : '.$e->getMessage());
|
||||
}
|
||||
include dirname(__FILE__).'/inc/config.php';
|
||||
$db = new db(DB_PATH);
|
||||
|
||||
$action = (isset ($_GET['action'])) ? htmlspecialchars($_GET['action']) : '';
|
||||
$view = (isset ($_GET['view'])) ? htmlspecialchars($_GET['view']) : '';
|
||||
|
|
@ -55,17 +44,9 @@ switch ($action)
|
|||
}
|
||||
}
|
||||
|
||||
$query = $db_handle->prepare('INSERT INTO entries ( url, title ) VALUES (?, ?)');
|
||||
$query = $db->getHandle()->prepare('INSERT INTO entries ( url, title ) VALUES (?, ?)');
|
||||
$query->execute(array($url, $title));
|
||||
break;
|
||||
case 'toggle_fav' :
|
||||
$sql_action = "UPDATE entries SET is_fav=~is_fav WHERE id=?";
|
||||
$params_action = array($id);
|
||||
break;
|
||||
case 'toggle_archive' :
|
||||
$sql_action = "UPDATE entries SET is_read=~is_read WHERE id=?";
|
||||
$params_action = array($id);
|
||||
break;
|
||||
case 'delete':
|
||||
$sql_action = "DELETE FROM entries WHERE id=?";
|
||||
$params_action = array($id);
|
||||
|
|
@ -79,7 +60,7 @@ try
|
|||
# action query
|
||||
if (isset($sql_action))
|
||||
{
|
||||
$query = $db_handle->prepare($sql_action);
|
||||
$query = $db->getHandle()->prepare($sql_action);
|
||||
$query->execute($params_action);
|
||||
}
|
||||
}
|
||||
|
|
@ -108,7 +89,7 @@ switch ($view)
|
|||
# view query
|
||||
try
|
||||
{
|
||||
$query = $db_handle->prepare($sql);
|
||||
$query = $db->getHandle()->prepare($sql);
|
||||
$query->execute($params);
|
||||
$entries = $query->fetchAll();
|
||||
}
|
||||
|
|
@ -140,30 +121,37 @@ catch (Exception $e)
|
|||
<header>
|
||||
<h1><img src="img/logo.png" alt="logo poche" />poche</h1>
|
||||
</header>
|
||||
<div id="main" class="w960p">
|
||||
<div id="main">
|
||||
<ul id="links">
|
||||
<li><a href="index.php" <?php echo (($view == 'index') ? 'class="current"' : ''); ?>>home</a></li>
|
||||
<li><a href="?view=fav" <?php echo (($view == 'fav') ? 'class="current"' : ''); ?>>favorites</a></li>
|
||||
<li><a href="?view=archive" <?php echo (($view == 'archive') ? 'class="current"' : ''); ?>>archive</a></li>
|
||||
<li><a style="cursor: move" title="i am a bookmarklet, use me !" href="javascript:(function(){var%20url%20=%20location.href;var%20title%20=%20document.title%20||%20url;window.open('<?php echo url()?>?action=add&url='%20+%20encodeURIComponent(url),'_self');})();">poche it !</a></li>
|
||||
</ul>
|
||||
<div id="entries">
|
||||
<div id="content">
|
||||
<ul id="entries">
|
||||
<?php
|
||||
$i = 0;
|
||||
$i = 1;
|
||||
foreach ($entries as $entry)
|
||||
{
|
||||
if ($i == 0) {
|
||||
echo '<section class="line grid3">';
|
||||
}
|
||||
echo '<aside class="mod entrie mb2"><h2 class="h6-like"><a href="readityourself.php?url='.urlencode($entry['url']).'">' . $entry['title'] . '</h2><div class="tools"><a href="?action=toggle_archive&id='.$entry['id'].'" title="toggle mark as read" class="tool">✓</a> <a href="?action=toggle_fav&id='.$entry['id'].'" title="toggle favorite" class="tool">'.(($entry['is_fav'] == 0) ? '☆' : '★' ).'</a> <a href="?action=delete&id='.$entry['id'].'" title="toggle delete" onclick="return confirm(\'Are you sure?\')" class="tool">⨯</a></div></aside>';
|
||||
|
||||
$i++;
|
||||
if ($i == 3) {
|
||||
echo '</section>';
|
||||
$i = 0;
|
||||
}
|
||||
?>
|
||||
<li id="entry-<?php echo $entry['id']; ?>" class="entrie mb2">
|
||||
<span class="content">
|
||||
<h2 class="h6-like">
|
||||
<a href="readityourself.php?url=<?php echo urlencode($entry['url']); ?>"><?php echo $entry['title']; ?>
|
||||
</h2>
|
||||
<div class="tools">
|
||||
<a title="toggle mark as read" class="tool archive <?php echo ( ($entry['is_read'] == '0') ? 'archive-off' : '' ); ?>" onclick="toggle_archive(<?php echo $entry['id']; ?>)"><span></span></a>
|
||||
<a title="toggle favorite" class="tool fav <?php echo ( ($entry['is_fav'] == '0') ? 'fav-off' : '' ); ?>" onclick="toggle_favorite(this, <?php echo $entry['id']; ?>)"><span></span></a>
|
||||
<a href="?action=delete&id=<?php echo $entry['id']; ?>" title="toggle delete" onclick="return confirm('Are you sure?')" class="tool delete"><span></span></a>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<?php
|
||||
$i++;
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="mr2 mt3 smaller">
|
||||
|
|
@ -172,5 +160,7 @@ catch (Exception $e)
|
|||
Logo by <a href="http://www.iconfinder.com/icondetails/43256/128/jeans_monotone_pocket_icon">Brightmix</a>.<br />
|
||||
poche is developed by <a href="http://nicolas.loeuillet.org">Nicolas Lœuillet</a> under the <a href="http://www.wtfpl.net/">WTFPL</a>.</p>
|
||||
</footer>
|
||||
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
|
||||
<script type="text/javascript" src="js/poche.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue