modif css

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;
-}

index.php

@@ -8,19 +8,8 @@
  * @license    http://www.wtfpl.net/ see COPYING file
  */
 
-require_once dirname(__FILE__).'/inc/Readability.php';
+include dirname(__FILE__).'/inc/config.php';
-require_once dirname(__FILE__).'/inc/Encoding.php';
+$db = new db(DB_PATH);
-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());
-}
 
 $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">';
+                    <li id="entry-<?php echo $entry['id']; ?>" class="entrie mb2">
-                    }
+                        <span class="content">
-                    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">&#10003;</a> <a href="?action=toggle_fav&id='.$entry['id'].'" title="toggle favorite" class="tool">'.(($entry['is_fav'] == 0) ? '&#9734;' : '&#9733;' ).'</a> <a href="?action=delete&id='.$entry['id'].'" title="toggle delete"  onclick="return confirm(\'Are you sure?\')" class="tool">&#10799;</a></div></aside>';
+                            <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++;
-                    if ($i == 3) {
-                        echo '</section>';
-                        $i = 0;
-                    }
                 }
                 ?>
+                </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>