Shaarli header template

3 files changed, 144 insertions, 96 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 7213c4a4..8deb008e 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -1,21 +1,64 @@
+/**
+ * General
+ */
 body {
-    background: url(../img/noise.png) #979797;
+
 }
 
-header {
+.strong {
+    font-weight: bold;
+}
 
+.clear {
+    clear: both;
+}
+
+/**
+ * Extends Pure grids responsive to hide items.
+ * Use xx-0 to hide an item on xx screen.
+ * Display it at any level with xx-visible.
+ */
+.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; }
+}
+@media screen and (min-width: 48em) {
+    .pure-u-md-0 { display: none !important; }
+    .pure-u-md-visible { display: inherit !important; }
+}
+@media screen and (min-width: 64em) {
+    .pure-u-lg-0 { display: none !important; }
+    .pure-u-lg-visible { display: inherit !important; }
+}
+@media screen and (min-width: 80em) {
+    .pure-u-xl-0 { display: none !important; }
+    .pure-u-xl-visible { display: inherit !important; }
 }
 
 /**
  * MENU
  **/
-.pure-menu {
-    /*position: fixed;*/
-    background: #16a085;
+.shaarli-menu {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background: #1b926c;
+    -webkit-font-smoothing: antialiased;
+    /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
+    max-height: 2.1em;
+    transition: max-height 0.5s;
+    overflow: hidden;
+    z-index: 999;
+}
+
+.shaarli-menu.open {
+    max-height: 500px;
+    transition: max-height 0.75s;
 }
 
 .pure-menu-selected {
-    background: #049372;
+    background: #1A694C;
 }
 
 .pure-menu-link,
@@ -27,24 +70,10 @@ header {
 
 .pure-menu-link:hover,
 .pure-menu-selected .pure-menu-link:hover {
-    color: #fff;
+    color: #d1fff0;
     background: transparent;
 }
 
-.shaarli-menu {
-    margin-bottom: 1em;
-    -webkit-font-smoothing: antialiased;
-    /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
-    max-height: 2.1em;
-    transition: max-height 0.5s;
-    overflow: hidden;
-}
-
-.shaarli-menu.open {
-    max-height: 500px;
-    transition: max-height 0.75s;
-}
-
 .menu-toggle {
     width: 34px;
     height: 34px;
@@ -85,24 +114,62 @@ header {
 }
 
 /**
- * Extends Pure grids responsive to hide items.
- * Use xx-0 to hide an item on xx screen.
- * Display it at any level with xx-visible.
+ * Header
  */
-.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; }
+#header {
+    width: 100%;
+    height: 150px;
+    background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed center 2.5em;
 }
-@media screen and (min-width: 48em) {
-    .pure-u-md-0 { display: none !important; }
-    .pure-u-md-visible { display: inherit !important; }
+
+#header h1 {
+    position: fixed;
+    float: left;
+    margin: 45px 0 0 0;
+    width: 44%;
+    height: 100px;
+    text-align: right;
 }
-@media screen and (min-width: 64em) {
-    .pure-u-lg-0 { display: none !important; }
-    .pure-u-lg-visible { display: inherit !important; }
+
+#header h1 a, #header h1 a:visited {
+    /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
+    display: -ms-flexbox;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    overflow: hidden;
+    height: 100px;
+    color: #b0ddce;
+    text-decoration: none;
+    z-index: 1;
+
+    /* TODO: font? */
 }
-@media screen and (min-width: 80em) {
-    .pure-u-xl-0 { display: none !important; }
-    .pure-u-xl-visible { display: inherit !important; }
+
+#header h1 a:hover {
+    color: #d1fff0;
+}
+
+#linkcount {
+    position: fixed;
+    top: 40px;
+    right: 10px;
+    color: #b0ddce;
+    font-size: 0.8em;
+}
+
+#search {
+    position: fixed;
+    top: 55px;
+    right: 10px;
+    width: 44%;
+    text-align: right;
+}
+
+#content {
+    position: relative;
+    box-shadow: 0 -2px 1em #797979;
+    z-index: 2;
+    background: url(../img/noise.png) #979797;
 }
\ No newline at end of file
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index ca91699e..90932524 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -5,32 +5,13 @@
     {include="includes"}
 </head>
 <body>
-<div id="pageheader">
-    {include="page.header"}
+{include="page.header"}
 
-    <div id="headerform" class="search">
-        <form method="GET" class="searchform" name="searchform">
-            <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text"
-               {if="!empty($search_crits) && $search_type=='fulltext'"}
-                    value="{$search_crits}"
-               {/if}
-            >
-            <input type="submit" value="Search" class="bigbutton">
-        </form>
-        <form method="GET" class="tagfilter" name="tagfilter">
-            <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag"
-                {if="!empty($search_crits) && $search_type=='tags'"}
-                    value="{function="implode(' ', $search_crits)"}"
-                {/if}
-                autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
-                data-list="{loop="$tags"}{$key}, {/loop}"
-            >
-            <input type="submit" value="Search" class="bigbutton">
-        </form>
-        {loop="$plugins_header.fields_toolbar"}
-            {$value}
-        {/loop}
-    </div>
+<div id="headerform" class="search">
+
+    <!--{loop="$plugins_header.fields_toolbar"}
+        {$value}
+    {/loop}-->
 </div>
 
 <div id="linklist">
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 9a4ecd85..f67f6e1f 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -1,6 +1,7 @@
 <div class="shaarli-menu pure-g" id="shaarli-menu">
   <div class="pure-u-lg-0 pure-u-1">
     <div class="pure-menu">
+      <!-- FIXME! default value in PHP -->
       <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}"
         class="pure-menu-link">
         <i class="fa fa-home"></i>
@@ -74,46 +75,47 @@
   </div>
 </div>
 
-<div id="logo" title="Share your links !" onclick="document.location='?';"></div>
+<div id="header" class="pure-u-0 pure-u-lg-visible">
+  <h1 id="header-title">
+    <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}">
+      {$GLOBALS['title']}
+    </a>
+  </h1>
+  <div id="linkcount">
+    {if="!empty($linkcount)"}<span class="strong">{$linkcount}</span> shaares{/if}
+  </div>
 
-<div id="linkcount" class="nomobile">
-    {if="!empty($linkcount)"}{$linkcount} links{/if}
+  <div id="search">
+    <form method="GET" class="searchform" name="searchform">
+      <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text"
+        {if="!empty($search_crits) && $search_type=='fulltext'"}
+          value="{$search_crits}"
+        {/if}
+      >
+      <input type="submit" value="Search" class="bigbutton">
+    </form>
+    <form method="GET" class="tagfilter" name="tagfilter">
+      <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag"
+        {if="!empty($search_crits) && $search_type=='tags'"}
+          value="{function="implode(' ', $search_crits)"}"
+        {/if}
+        autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
+        data-list="{loop="$tags"}{$key}, {/loop}"
+      >
+      <input type="submit" value="Search" class="bigbutton">
+    </form>
+  </div>
 </div>
 
-<div id="menu">
-  <ul>
-      <li><span id="shaarli_title">
-        <a href="{$titleLink}">{$shaarlititle}</a>
-    </span>
-    </li>
+<div id="content">
+
 
 {if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}
     {ignore} When called as a popup from bookmarklet, do not display menu. {/ignore}
 {else}
-<li><a href="?" class="nomobile">Home</a></li>
-    {if="isLoggedIn()"}
-    <li><a href="?do=logout">Logout</a></li>
-    <li><a href="?do=tools">Tools</a></li>
-    <li><a href="?do=addlink">Add link</a></li>
-    {elseif="$GLOBALS['config']['OPEN_SHAARLI']"}
-    <li><a href="?do=tools">Tools</a></li>
-    <li><a href="?do=addlink">Add link</a></li>
-    {else}
-    <li><a href="?do=login">Login</a></li>
-    {/if}
-    <li><a href="{$feedurl}?do=rss{$searchcrits}" class="nomobile">RSS Feed</a></li>
-    {if="$GLOBALS['config']['SHOW_ATOM']"}
-    <li><a href="{$feedurl}?do=atom{$searchcrits}" class="nomobile">ATOM Feed</a></li>
-    {/if}
-    <li><a href="?do=tagcloud">Tag cloud</a></li>
-    <li><a href="?do=picwall{$searchcrits}">Picture wall</a></li>
-    <li><a href="?do=daily">Daily</a></li>
-    {loop="$plugins_header.buttons_toolbar"}
-        {$value}
-    {/loop}
+
 {/if}
-  </ul>
-</div>
+
 
 {if="!empty($plugin_errors) && isLoggedIn()"}
     <ul class="errors">
@@ -124,5 +126,3 @@
 {/if}
 
 <div class="clear"></div>
-
-