Remove the green header

3 files changed, 107 insertions, 93 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 0367534b..fd0a144f 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -170,11 +170,10 @@ pre {
 #header {
     width: 100%;
     height: 150px;
-    background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed 10px 2.5em;
+    background: url(../img/noise.png), #979797 url(../img/logo.png) no-repeat 10px 2.5em;
 }
 
 #header h1 {
-    position: fixed;
     float: left;
     margin: 45px 0 0 125px;
     width: 55%;
@@ -190,7 +189,7 @@ pre {
 
     overflow: hidden;
     height: 100px;
-    color: #b0ddce;
+    color: #252525;
     text-decoration: none;
     z-index: 1;
 
@@ -199,7 +198,7 @@ pre {
 }
 
 #header h1 a:hover {
-    color: #d1fff0;
+    color: #fff;
 }
 
 .header-buttons {
@@ -207,36 +206,16 @@ pre {
 }
 
 #linkcount {
-    /* position: fixed; */
-    position: absolute;
-    top: 40px;
-    right: 10px;
-    color: #b0ddce;
+    color: #252525;
     font-size: 0.8em;
 }
 
 #search {
-    /**
-     * Can't make it work with awesomplete list z-index. Any idea?
-     * position: fixed;
-     */
-    position: absolute;
-    top: 60px;
-    right: 10px;
-    width: 30%;
-    text-align: right;
+    margin-top: 5px;
 }
 
 #search input[type="text"] {
-    margin: 0 0 5px 0;
-    padding: 5px 5px 3px 15px;
-    height: 20px;
-    width: 140px;
-    transition: width .5s ease;
-    background: #1b926c;
-    border: medium none currentColor;
-    border-radius: 25px;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
+    width: 250px;
     color: #b0ddce;
 }
 
@@ -255,6 +234,20 @@ pre {
     color: #fff;
 }
 
+@media screen and (min-width: 64em) {
+    #search .searchform {
+        margin-right: 25px;
+        text-align: right;
+    }
+
+    #search .tagfilter {
+        margin-left: 25px;
+        text-align: left;
+    }
+}
+
+
+
 #header-login-form {
     height: 0;
     transition: 0.3s;
@@ -285,11 +278,33 @@ pre {
     text-align: center;
     background: #1b926c;
     display: block;
+    //transition: 0.3s;
 }
 
-.subheader-form.open {
-    height: 30px;
-    padding: 5px 0;
+@media screen and (min-width: 64em) {
+
+    .subheader-form.closed {
+        height: 0;
+    }
+
+    .subheader-form.open {
+        height: 30px;
+        padding: 5px 0;
+    }
+
+    .subheader-form * {
+        --transition: visibility 1s, opacity 1s;
+    }
+
+    .subheader-form.open * {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    .subheader-form.closed * {
+        visibility: hidden;
+        opacity: 0;
+    }
 }
 
 .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
@@ -348,8 +363,6 @@ pre {
  */
 #content {
     position: relative;
-    /* 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;
 }
@@ -362,8 +375,7 @@ pre {
 
 @media screen and (min-width: 64em) {
     #content {
-        /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
-        margin-top: -4px;
+        margin-top: 34px;
     }
 }
 
@@ -371,8 +383,6 @@ pre {
  * CONTENT - LINKLIST PAGING
  * 64em -> lg
  */
-
-
 .linklist-filters {
     margin: 10px 0;
     color: #252525;
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 3afec7f3..24d11cdb 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -53,20 +53,6 @@ function getParentByClass(el, className) {
     window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
 })(this, this.document);
 
-
-/**
- * Expend search fields on focus.
- */
-var searchInputs = document.querySelectorAll('#search input[type="text"]');
-[].forEach.call(searchInputs, function(searchInput) {
-    searchInput.addEventListener('focus', function(event) {
-        event.target.style.width = '250px';
-    });
-    searchInput.addEventListener('blur', function(event) {
-        event.target.style.width = '140px';
-    });
-});
-
 /**
  * Fold/Expand shaares description and thumbnail.
  */
@@ -184,4 +170,18 @@ if (hiddenReturnurl != null) {
 var autofocusElements = document.querySelector('.autofocus');
 if (autofocusElements != null) {
     autofocusElements.focus();
-}
\ No newline at end of file
+}
+
+/**
+ * Hide search bar, and display it on search click.
+ */
+var searchBar = document.getElementById('search');
+var searchButton = document.getElementById('search-button');
+if (searchBar != null && searchButton != null) {
+    searchBar.classList.toggle('closed');
+    searchButton.addEventListener('click', function(event) {
+        event.preventDefault();
+        searchBar.classList.toggle('closed');
+        searchBar.classList.toggle('open');
+    });
+}
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 67d0d0c4..36410345 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -10,15 +10,17 @@
   </div>
   <div class="pure-u-1">
     <div class="pure-menu menu-transform pure-menu-horizontal pure-g">
-      <ul class="pure-menu-list pure-u-lg-11-12 pure-u-1">
+      <ul class="pure-menu-list pure-u-lg-5-6 pure-u-1">
         <li class="pure-menu-item pure-u-0 pure-u-lg-visible">
           <a href="{$titleLink}" class="pure-menu-link">
-            <i class="fa fa-home"></i>
+            <i class="fa fa-home"></i> {$shaarlititle}
           </a>
         </li>
         {if="isLoggedIn() || $openshaarli"}
           <li class="pure-menu-item">
-            <a href="?do=addlink" class="pure-menu-link">{'Shaare'|t}</a>
+            <a href="?do=addlink" class="pure-menu-link">
+              <i class="fa fa-plus" ></i> {'Shaare'|t}
+            </a>
           </li>
           <li class="pure-menu-item">
             <a href="?do=tools" class="pure-menu-link">{'Tools'|t}</a>
@@ -59,8 +61,13 @@
           <a href="?do=atom{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a>
         </li>
       </ul>
-      <div class="header-buttons pure-u-lg-1-12 pure-u-0 pure-u-lg-visible">
+      <div class="header-buttons pure-u-lg-1-6 pure-u-0 pure-u-lg-visible">
         <ul class="pure-menu-list">
+          <li class="pure-menu-item">
+            <a href="#" class="pure-menu-link" id="search-button" title="{'Search'|t}">
+              <i class="fa fa-search"></i>
+            </a>
+          </li>
           {if="!isLoggedIn()"}
             <li class="pure-menu-item">
               <a href="?do=login" class="pure-menu-link" id="login-button" title="{'Login'|t}">
@@ -85,44 +92,33 @@
   </div>
 </div>
 
-<div id="header" class="pure-u-0 pure-u-lg-visible">
-  <h1 id="header-title">
-    <a href="{$titleLink}">
-      {$shaarlititle}
-    </a>
-  </h1>
-  <div id="linkcount">
-    {if="!empty($linkcount)"}
-      <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
-      {if="$privateLinkcount>0"}
-        - <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
-      {/if}
-    {/if}
-  </div>
-
-  <div id="search">
-    <form method="GET" class="searchform" name="searchform">
-      <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="{'Search text'|t}"
-        {if="!empty($search_term)"}
-             value="{$search_term}"
-        {/if}
-      >
-      <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
-    </form>
-    <form method="GET" class="tagfilter" name="tagfilter">
-      <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="{'Filter by tag'|t}"
-        {if="!empty($search_tags)"}
-          value="{$search_tags}"
-        {/if}
-        autocomplete="off" data-multiple data-minChars="1"
-        data-list="{loop="$tags"}{$key}, {/loop}"
-      >
-      <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
-    </form>
-  </div>
-</div>
-
 <div id="content">
+  <div id="search" class="subheader-form">
+    <div class="pure-g">
+      <div class="pure-u-1 pure-u-lg-1-2">
+        <form method="GET" class="searchform" name="searchform">
+          <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="{'Search text'|t}"
+                 {if="!empty($search_term)"}
+                 value="{$search_term}"
+                 {/if}
+          >
+          <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+        </form>
+      </div>
+      <div class="pure-u-1 pure-u-lg-1-2">
+        <form method="GET" class="tagfilter" name="tagfilter">
+          <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="{'Filter by tag'|t}"
+                 {if="!empty($search_tags)"}
+                 value="{$search_tags}"
+                 {/if}
+          autocomplete="off" data-multiple data-minChars="1"
+          data-list="{loop="$tags"}{$key}, {/loop}"
+          >
+          <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+        </form>
+      </div>
+    </div>
+  </div>
   {loop="$plugins_header.fields_toolbar"}
     <form
       {loop="$value"}
@@ -189,4 +185,12 @@
   </div>
 {/if}
 
-<div class="clear"></div>
+  <div class="clear"></div>
+  <div id="linkcount" class="center">
+    {if="!empty($linkcount)"}
+    <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
+    {if="$privateLinkcount>0"}
+    &middot; <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
+    {/if}
+    {/if}
+  </div>