]> git.immae.eu Git - github/wallabag/wallabag.git/commitdiff
mise en page de l'affichage d'un article
authornicosomb <nicolas@loeuillet.org>
Fri, 5 Apr 2013 13:30:50 +0000 (15:30 +0200)
committernicosomb <nicolas@loeuillet.org>
Fri, 5 Apr 2013 13:30:50 +0000 (15:30 +0200)
css/index.html [deleted file]
css/reset.css [deleted file]
css/style.css
css/typography.css [deleted file]
index.php
tpl/footer.html
tpl/index.html

diff --git a/css/index.html b/css/index.html
deleted file mode 100755 (executable)
index e69de29..0000000
diff --git a/css/reset.css b/css/reset.css
deleted file mode 100755 (executable)
index 530ddc3..0000000
+++ /dev/null
@@ -1,35 +0,0 @@
-html, body, div, span, object, iframe,\r
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,\r
-a, abbr, acronym, address, code,\r
-del, dfn, em, img, q, dl, dt, dd, ol, ul, li,\r
-fieldset, form, label, legend,\r
-table, caption, tbody, tfoot, thead, tr, th, td {\r
-  margin: 0;\r
-  padding: 0;\r
-  border: 0;\r
-  font-weight: inherit;\r
-  font-style: inherit;\r
-  font-size: 100%;\r
-  font-family: inherit;\r
-  vertical-align: baseline;\r
-}\r
-\r
-\r
-/* Tables still need 'cellspacing="0"' in the markup. */\r
-table { border-collapse: separate; border-spacing: 0; }\r
-caption, th, td { text-align: left; font-weight: normal; }\r
-table, td, th { vertical-align: middle; }\r
-\r
-/* Remove possible quote marks (") from <q>, <blockquote>. */\r
-blockquote:before, blockquote:after, q:before, q:after { content: ""; }\r
-blockquote, q { quotes: "" ""; }\r
-\r
-/* Remove annoying border on linked images. */\r
-a img { border: none; }\r
-\r
-\r
-body {\r
-  \r
-  margin: 10px;\r
-}\r
-\r
index 41a617803c2260871daf655c929a75d1db3a65c7..764cf628533013b41f92d0107aa582c02b71a937 100644 (file)
@@ -1,7 +1,11 @@
 body {
     color: #222222;
     font: 20px/1.3em Palatino,Georgia,serif;
-    background-color: #e6e6e6;
+    background-color: #F1F1F1;
+}
+
+body.article {
+    background-color: #ffffff;
 }
 
 a, a:hover, a:visited {
@@ -11,7 +15,20 @@ header {
     text-align: center;
 }
 
-#main {
+#article header {
+    text-align: left;
+    border-bottom: 1px solid #222222;
+}
+
+#article header a {
+    text-decoration: none;
+}
+
+#article header .vieworiginal a {
+    color: #888888;
+}
+
+#main, #article {
     margin: 0 auto;
 }
 
@@ -26,6 +43,32 @@ header {
     padding: 15px;
 }
 
+#main #entries {
+    margin-top: 20px;
+}
+
+#main #entries .entrie {
+    color: rgb(46, 46, 46);
+    position:relative;
+    background-color: #ffffff;
+    height: 8em;
+}
+
+#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;
+}
+
 #main a.tool {
     text-decoration: none;
 }
diff --git a/css/typography.css b/css/typography.css
deleted file mode 100755 (executable)
index e41db09..0000000
+++ /dev/null
@@ -1,85 +0,0 @@
-\r
-body { \r
-       font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0;  \r
-       font-size-adjust:none;\r
-       font-style:normal;\r
-       font-variant:normal;\r
-       font-weight:normal;\r
-       padding: 15px;\r
-       margin: 15px auto;\r
-}\r
-\r
-article {\r
-       border: 3px solid grey;\r
-       max-width:700px;\r
-       margin: 15px auto;\r
-       padding: 15px;\r
-}\r
-\r
-footer {\r
-       border: 1px solid black;\r
-       padding: 15px;\r
-       margin: 15px auto;\r
-}\r
-\r
-p { padding:0 0  0.8125em 0; color:#111; font-weight:300;}\r
-\r
-p + p { text-indent:1.625em;}\r
-\r
-img       { display: block; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; }\r
-\r
-p > img { display: inline-block; margin: 0; }\r
-\r
-h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif;  }\r
-h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; }\r
-\r
-\r
-h1 { font-size: 2.125em; margin-bottom: 0.765em; line-height: 1.5em;}\r
-h2 { font-size: 1.9em;  margin-bottom: 0.855em; }\r
-h3 { font-size: 1.7em;  margin-bottom: 0.956em; }\r
-h4 { font-size: 1.4em;  margin-bottom: 1.161em; }\r
-h5,h6 { font-size: 1.313em;  margin-bottom: 1.238em; }\r
-\r
-\r
-\r
-ul{list-style-position:outside;}\r
-li ul, \r
-li ol  { margin:0 1.625em;  }\r
-ul, ol { margin: 0 0 1.625em 0; }\r
-\r
-\r
-dl { margin: 0 0 1.625em 0; }\r
-dl dt { font-weight: bold; }\r
-dl dd { margin-left: 1.625em; }\r
-\r
-a { color:#005AF2; text-decoration:none; }\r
-a:hover { text-decoration: underline; }\r
-\r
-\r
-table { margin-bottom:1.625em; border-collapse: collapse; }\r
-th { font-weight:bold; }\r
-tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; }\r
-tfoot { font-style: italic; }\r
-caption { text-align:center; font-family:Georgia, serif; }\r
-\r
-\r
-abbr, acronym { border-bottom:1px dotted #000; }\r
-address { margin-top:1.625em; font-style: italic; }\r
-del {color:#000;}\r
-\r
-\r
-blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic;  }\r
-blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli  */\r
-blockquote > p {padding:0; margin:0; }\r
-\r
-strong { font-weight: bold; }\r
-em, dfn { font-style: italic; }\r
-dfn { font-weight: bold; }\r
-pre, code { margin: 1.625em 0; white-space: pre; }\r
-pre, code, tt { font: 1em monospace; line-height: 1.5; } \r
-tt { display: block; margin: 1.625em 0; }\r
-hr { margin-bottom:1.625em; }\r
-\r
-.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; }\r
-.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } \r
-.mono { font-family:"Courier New", Courier, monospace; }\r
index f26654c33e5918e7f85037d0694659ebc107a42d..887326d1c6e6f843b8c34303f2a712efef31edf5 100755 (executable)
--- a/index.php
+++ b/index.php
@@ -24,7 +24,7 @@ catch (Exception $e)
 
 $action = (isset ($_GET['action'])) ? htmlspecialchars($_GET['action']) : '';
 $view   = (isset ($_GET['view'])) ? htmlspecialchars($_GET['view']) : '';
-$in     = (isset ($_GET['id'])) ? htmlspecialchars($_GET['id']) : '';
+$id     = (isset ($_GET['id'])) ? htmlspecialchars($_GET['id']) : '';
 
 switch ($action)
 {
@@ -128,21 +128,31 @@ catch (Exception $e)
         <header>
             <h1><img src="img/logo.png" alt="logo poche" />poche</h1>
         </header>
-        <div id="main" class="w800p">
+        <div id="main" class="w960p">
             <ul id="links">
                 <li><a href="index.php">home</a></li>
                 <li><a href="?view=fav">favorites</a></li>
                 <li><a href="?view=archive">archive</a></li>
                 <li><a 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>
-            <ul id="entries">
+            <div id="entries">
                 <?php
+                $i = 0;
                 foreach ($entries as $entry)
                 {
-                    echo '<li><a href="readityourself.php?url='.urlencode($entry['url']).'">' . $entry['title'] . '</a> <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" class="tool">&#10799;</a></li>';
+                    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">&#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" class="tool">&#10799;</a></div></aside>';
+
+                    $i++;
+                    if ($i == 3) {
+                        echo '</section>';
+                        $i = 0;
+                    }
                 }
                 ?>
-            </ul>
+            </div>
         </div>
         <footer class="mr2 mt3">
             <p class="smaller"><a href="http://github.com/nicosomb/poche">poche</a> is a read it later open source system, based on <a href="http://www.memiks.fr/readityourself/">ReadItYourself</a>. <a href="https://twitter.com/getpoche" title="follow us on twitter">@getpoche</a>. Logo by <a href="http://www.iconfinder.com/icondetails/43256/128/jeans_monotone_pocket_icon">Brightmix</a>. 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>
index 8385b9699382ed82e605b23d9fa47a3d81acfdc9..51b38b976d912c80b949748455225f4e1bfd2f78 100755 (executable)
@@ -1,7 +1,3 @@
-<footer>
-       <div>  
-       Copyright &copy; <a href="http://www.memiks.fr/">memiks.fr</a> | <a href="http://shaarli.memiks.fr/">Liens</a> / <a href="http://rss.memiks.fr/">RSS</a> / <a href="http://wiki.memiks.fr/">Wiki</a>  / <a href="mailto:&#109;&#101;&#109;&#105;&#107;&#115;&#064;&#109;&#101;&#109;&#105;&#107;&#115;&#046;&#102;&#114;">Contact</a><br>
-                       Licence: WTF Licence<br>
-                       More information HERE: <a href="http://www.memiks.fr/readityourself/">http://www.memiks.fr/readityourself/</a> Version : <span class="version">{$version}</span>
-       </div>
-</footer>
+        <footer class="mr2 mt3">
+            <p class="smaller"><a href="http://github.com/nicosomb/poche">poche</a> is a read it later open source system, based on <a href="http://www.memiks.fr/readityourself/">ReadItYourself</a>. <a href="https://twitter.com/getpoche" title="follow us on twitter">@getpoche</a>. Logo by <a href="http://www.iconfinder.com/icondetails/43256/128/jeans_monotone_pocket_icon">Brightmix</a>. 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>
index b4aba16cdb0daa4da5eb3847731889dec9af415f..3f3b28f0d5e548267b57aef166d9cf659ac6d182 100755 (executable)
@@ -1,18 +1,32 @@
+<!DOCTYPE html>
+<!--[if lte IE 6]> <html class="no-js ie6 ie67 ie678" lang="en"> <![endif]-->
+<!--[if lte IE 7]> <html class="no-js ie7 ie67 ie678" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js ie8 ie678" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 <html>
-       <head>
-               <link rel='stylesheet' href='./css/reset.css' type='text/css' media='all' />
-               <link rel='stylesheet' href='./css/typography.css' type='text/css' media='all' />
-       
-               <title>{$title}</title>
-       </head>
-       <body>
-               <article>
-                       <h1><a href="{$url}">{$title}</a></h1>
-                       <div id="readityourselfcontent">
-                               {$content}
-                       </div>
-                       <span class="comeFrom">Come From : <a href="{$url}">{$url}</a>
-               </article>
-               {include="footer"}
-       </body>
+    <head>
+        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=10">
+        <link rel="stylesheet" href="./css/knacss.css" media="all">
+        <link rel="stylesheet" href="./css/style.css" media="all">
+        <title>{$title}</title>
+    </head>
+    <body class="article">
+        <div id="article" class="w600p">
+               <div>
+                       <a href="index.php" title="back to home">&larr;</a>
+               </div>
+            <header class="mbm">
+                <h1><a href="{$url}">{$title}</a></h1>
+                <div class="vieworiginal txtright small"><a href="{$url}" target="_blank">view original</a></div>
+            </header>
+            <article>
+                <div id="readityourselfcontent">
+                    {$content}
+                </div>
+            </article>
+        </div>
+        {include="footer"}
+    </body>
 </html>