From d63f7cf5b8a25bba0de8ee11202edda3ca062eb4 Mon Sep 17 00:00:00 2001
From: ArthurHoaro <arthur@hoa.ro>
Date: Sat, 27 Feb 2016 21:59:27 +0100
Subject: Desktop search fields

---
 tpl/default/css/shaarli.css  |  46 +++++++++++++++++++++++++++++++++++--------
 tpl/default/img/logo2.png    | Bin 0 -> 6252 bytes
 tpl/default/includes.html    |   1 +
 tpl/default/js/shaarli.js    |  12 ++++++++++-
 tpl/default/linklist.html    |   7 -------
 tpl/default/page.footer.html |   4 +++-
 tpl/default/page.header.html |   6 +++---
 7 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 tpl/default/img/logo2.png

(limited to 'tpl/default')

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 8deb008e..4ec976b1 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -119,16 +119,15 @@ body {
 #header {
     width: 100%;
     height: 150px;
-    background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed center 2.5em;
+    background: url(../img/noise.png), #1fa67a url(../img/logo2.png) no-repeat fixed 10px 2.5em;
 }
 
 #header h1 {
     position: fixed;
     float: left;
-    margin: 45px 0 0 0;
-    width: 44%;
+    margin: 45px 0 0 125px;
+    width: 55%;
     height: 100px;
-    text-align: right;
 }
 
 #header h1 a, #header h1 a:visited {
@@ -152,7 +151,8 @@ body {
 }
 
 #linkcount {
-    position: fixed;
+    /* position: fixed; */
+    position: absolute;
     top: 40px;
     right: 10px;
     color: #b0ddce;
@@ -160,13 +160,43 @@ body {
 }
 
 #search {
-    position: fixed;
-    top: 55px;
+    /**
+     * Can't make it work with awesomplete list z-index. Any idea?
+     * position: fixed;
+     */
+    position: absolute;
+    top: 60px;
     right: 10px;
-    width: 44%;
+    width: 30%;
     text-align: right;
 }
 
+#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;
+    color: #b0ddce;
+}
+
+#search button {
+    background: transparent;
+    border: none;
+    color: #b0ddce;
+}
+
+#search button:hover {
+    color: #fff;
+}
+
+/**
+ * CONTENT
+ */
 #content {
     position: relative;
     box-shadow: 0 -2px 1em #797979;
diff --git a/tpl/default/img/logo2.png b/tpl/default/img/logo2.png
new file mode 100644
index 00000000..ef0e09ac
Binary files /dev/null and b/tpl/default/img/logo2.png differ
diff --git a/tpl/default/includes.html b/tpl/default/includes.html
index c5b7ee13..03cc3d2a 100644
--- a/tpl/default/includes.html
+++ b/tpl/default/includes.html
@@ -9,6 +9,7 @@
 <link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css">
 <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
 <link type="text/css" rel="stylesheet" href="css/shaarli.css" />
+<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
 {if="is_file('inc/user.css')"}
   <link type="text/css" rel="stylesheet" href="inc/user.css#" />
 {/if}
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index c401af1d..cbce0617 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -39,4 +39,14 @@
     });
 
     window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
-})(this, this.document);
\ No newline at end of file
+})(this, this.document);
+
+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';
+    });
+});
\ No newline at end of file
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 90932524..48de2e54 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
     {include="includes"}
 </head>
 <body>
@@ -99,11 +98,5 @@
 </div>
 
     {include="page.footer"}
-
-<script src="inc/awesomplete.min.js#"></script>
-<script src="inc/awesomplete-multiple-tags.js#"></script>
-<script>
-    awesompleteUniqueTag('#tagfilter_value');
-</script>
 </body>
 </html>
diff --git a/tpl/default/page.footer.html b/tpl/default/page.footer.html
index 8e380087..5e4ff9ee 100644
--- a/tpl/default/page.footer.html
+++ b/tpl/default/page.footer.html
@@ -28,4 +28,6 @@
 	<script src="{$value}#"></script>
 {/loop}
 
-<script src="js/shaarli.js"></script>
\ No newline at end of file
+<script src="js/shaarli.js"></script>
+<script src="inc/awesomplete.js#"></script>
+<script src="inc/awesomplete-multiple-tags.js#"></script>
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index f67f6e1f..3f2075c1 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -92,17 +92,17 @@
           value="{$search_crits}"
         {/if}
       >
-      <input type="submit" value="Search" class="bigbutton">
+      <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"
         {if="!empty($search_crits) && $search_type=='tags'"}
           value="{function="implode(' ', $search_crits)"}"
         {/if}
-        autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
+        autocomplete="off" data-multiple data-minChars="1"
         data-list="{loop="$tags"}{$key}, {/loop}"
       >
-      <input type="submit" value="Search" class="bigbutton">
+      <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
     </form>
   </div>
 </div>
-- 
cgit v1.2.3