Linklist improvements

3 files changed, 29 insertions, 27 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index e3961fc3..d9a48239 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -2,7 +2,7 @@
  * General
  */
 body {
-
+    background: url(../img/noise.png) #979797;
 }
 
 .strong {
@@ -44,19 +44,19 @@ body {
 .pure-u-0 { display: none !important; }
 @media screen and (min-width: 35.5em) {
     .pure-u-sm-0 { display: none !important; }
-    .pure-u-sm-visible { display: inherit !important; }
+    .pure-u-sm-visible { display: inline-block !important; }
 }
 @media screen and (min-width: 48em) {
     .pure-u-md-0 { display: none !important; }
-    .pure-u-md-visible { display: inherit !important; }
+    .pure-u-md-visible { display: inline-block !important; }
 }
 @media screen and (min-width: 64em) {
     .pure-u-lg-0 { display: none !important; }
-    .pure-u-lg-visible { display: inherit !important; }
+    .pure-u-lg-visible { display: inline-block !important; }
 }
 @media screen and (min-width: 80em) {
     .pure-u-xl-0 { display: none !important; }
-    .pure-u-xl-visible { display: inherit !important; }
+    .pure-u-xl-visible { display: inline-block !important; }
 }
 
 /**
@@ -223,7 +223,10 @@ body {
  */
 #content {
     position: relative;
-    box-shadow: 0 -2px 1em #797979;
+    /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
+    margin-top: -4px;
+    /* Hack-ish way to only shadow the top part. */
+    box-shadow: 0 -20px 20px -20px #797979;
     z-index: 2;
     background: url(../img/noise.png) #979797;
 }
@@ -231,7 +234,7 @@ body {
 /**
  * CONTENT - LINKLIST PAGING
  */
-@media screen and (min-width: 35.5em) {
+@media screen and (max-width: 64em) {
     .linklist-paging {
         margin: 2.1em 0 0 0;
     }
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index c8c13fe0..1a8256f3 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -25,17 +25,18 @@
 
 
     <div class="linklist-pages pure-u-1-3">
-      {if="$previous_page_url"}
-        <a href="{$previous_page_url}" class="paging_older">
-          <i class="fa fa-long-arrow-left"></i> Older
-        </a>
-      {/if}
-      {if="$page_max>1"}{$page_current} / {$page_max}{/if}
       {if="$next_page_url"}
         <a href="{$next_page_url}" class="paging_newer">
-          Newer <i class="fa fa-long-arrow-right"></i>
+          <i class="fa fa-arrow-circle-left"></i>
         </a>
       {/if}
+      {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if}
+      {if="$previous_page_url"}
+        <a href="{$previous_page_url}" class="paging_older">
+          <i class="fa fa-arrow-circle-right"></i>
+        </a>
+      {/if}
+
     </div>
 
     <div class="linksperpage pure-u-1-3">
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 3f2075c1..7a67fb2a 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -5,13 +5,14 @@
       <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}"
         class="pure-menu-link">
         <i class="fa fa-home"></i>
+        {$GLOBALS['title']}
       </a>
       <a href="#" class="menu-toggle" id="menu-toggle"><s class="bar"></s><s class="bar"></s></a>
     </div>
   </div>
   <div class="pure-u-1">
-    <div class="pure-menu menu-transform pure-menu-horizontal">
-      <ul class="pure-menu-list">
+    <div class="pure-menu menu-transform pure-menu-horizontal pure-g">
+      <ul class="pure-menu-list pure-u-lg-11-12 pure-u-sm-1">
         <li class="pure-menu-item pure-menu-selected pure-u-0 pure-u-lg-visible">
           <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}"
             class="pure-menu-link">
@@ -33,19 +34,10 @@
           <li class="pure-menu-item">
             <a href="?do=tools" class="pure-menu-link">Tools</a>
           </li>
-        {else}
-          <li class="pure-menu-item">
-            <a href="?do=login" class="pure-menu-link">Login</a>
-          </li>
         {/if}
-        <li class="pure-menu-item">
-          <a href="{$feedurl}?do=rss{$searchcrits}" class="pure-menu-link">RSS Feed</a>
+        <li class="pure-menu-item pure-u-lg-0">
+          <a href="?do=atom{$searchcrits}" class="pure-menu-link">RSS Feed</a>
         </li>
-        {if="$GLOBALS['config']['SHOW_ATOM']"}
-          <li class="pure-menu-item">
-            <a href="{$feedurl}?do=atom{$searchcrits}" class="pure-menu-link">ATOM Feed</a>
-          </li>
-        {/if}
         <li class="pure-menu-item">
           <a href="?do=tagcloud" class="pure-menu-link">Tag cloud</a>
         </li>
@@ -71,6 +63,12 @@
           </li>
         {/if}
       </ul>
+      <div class="pure-u-lg-1-12 pure-u-sm-0 pure-u-lg-visible">
+        <!--<i class="fa fa-user"></i>-->
+        <a href="?do=atom{$searchcrits}" class="pure-menu-link">
+          <i class="fa fa-rss"></i>
+        </a>
+      </div>
     </div>
   </div>
 </div>