Desktop search fields

diff --git a/inc/awesomplete.css b/inc/awesomplete.css
index 47c1928f3ddc82d8e83410e06a4c77d38c3422e1..4bb8024333889bbf8ecb46eabb179e7f9aa8863d 100644 (file)
--- a/inc/awesomplete.css
+++ b/inc/awesomplete.css
@@ -8,17 +8,12 @@
 div.awesomplete {
     display: inline-block;
     position: relative;
-    width: 100%;
-}
-
-div.awesomplete > input {
-    display: block;
 }
 
 div.awesomplete > ul {
     position: absolute;
     left: 0;
-    z-index: 1;
+    z-index: 9999;
     min-width: 100%;
     box-sizing: border-box;
     list-style: none;

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 8deb008e6f9218ec7acbb6964646f3806737ec09..4ec976b17a3e0968306327de404fbab93bcf166c 100644 (file)
--- 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 (file)
index 0000000..ef0e09a
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 c5b7ee1365ca50c82f18769e126d8afc8ae9bde8..03cc3d2a7a74d6391a402c5391fe31d0916c0933 100644 (file)
--- 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 c401af1df4238d7b979ad34b5f0a72eb6416ddcc..cbce061792b7b42e62a55b7d999584c7e303e808 100644 (file)
--- 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 909325249cb8342633e667c20d44e6d26d52a49d..48de2e5485cc2e54a269180de25205fe2961f0ce 100644 (file)
--- 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 8e380087ad9db25809271bdc58c8fb00629eb4ec..5e4ff9ee4237ada1a7480e20a84ae7b72872fbe5 100644 (file)
--- 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 f67f6e1fb6311dc089ad60b5385acdad18e31d48..3f2075c12d714fe331f74e8fc15bbf8cb4853eb9 100644 (file)
--- 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>