Using only one form in linklist.html + adding untaggedonly filter - fix #885

4 files changed, 65 insertions, 80 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 39bbd0a3..e1868c59 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -226,6 +226,12 @@ body, .pure-g [class*="pure-u"] {
     border-radius: 2px;
     color: #252525;
 }
+@media screen and (max-width: 64em) {
+    .searchform {
+        max-width: 260px;
+        margin: 0 auto;
+    }
+}
 
 /* because chrome */
 #search input[type="text"]::-webkit-input-placeholder,
@@ -236,43 +242,37 @@ body, .pure-g [class*="pure-u"] {
 #search button,
 #search-tagcloud button,
 #search-linklist button {
-    background: transparent;
+    padding: 4px 8px 6px 8px;
+    background-color: #1B926C;
+    color: #f5f5f5;
     border: none;
+    border-radius: 2px;
 }
 
-#search button {
-    color: #f5f5f5;
+#search-tagcloud button {
+    width: 90%;
 }
 
-#search-linklist button {
-    color: #252525;
+@media screen and (max-width: 64em) {
+    #search-linklist button {
+        width: 100%;
+    }
+    #search-linklist .awesomplete {
+        margin: 5px 0;
+    }
 }
 
 #search button:hover,
-#search-linklist button:hover {
-    color: #fff;
-}
+#search-linklist button:hover,
 #search-tagcloud button:hover {
     color: #d0d0d0;
 }
 
+#search,
 #search-linklist {
-    padding: 5px 0;
+    padding: 6px 0;
 }
 
-@media screen and (min-width: 64em) {
-    #search .searchform,
-    #search-linklist .searchform {
-        margin-right: 25px;
-        text-align: right;
-    }
-
-    #search .tagfilter,
-    #search-linklist .tagfilter {
-        margin-left: 25px;
-        text-align: left;
-    }
-}
 @media screen and (max-width: 64em) {
     #search, #search * {
         visibility: hidden;
@@ -321,7 +321,6 @@ body, .pure-g [class*="pure-u"] {
 }
 
 .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
-    margin: 0 0 5px 0;
     padding: 5px 5px 3px 15px;
     height: 20px;
     width: 20%;
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 2568a5d6..685821e3 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -19,30 +19,21 @@
 
 <div id="search-linklist">
 
-  <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" 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" placeholder="{'Filter by tag'|t}"
-               {if="!empty($search_tags)"}
-               value="{$search_tags}"
-               {/if}
-        autocomplete="off" data-multiple data-autofirst 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>
+  <form method="GET" class="pure-form searchform" name="searchform">
+    <input type="text" tabindex="1" name="searchterm" class="searchterm" placeholder="{'Search text'|t}"
+           {if="!empty($search_term)"}
+           value="{$search_term}"
+           {/if}
+    >
+    <input type="text" tabindex="2" name="searchtags" class="searchtags" placeholder="{'Filter by tag'|t}"
+           {if="!empty($search_tags)"}
+           value="{$search_tags}"
+           {/if}
+    autocomplete="off" data-multiple data-autofirst data-minChars="1"
+    data-list="{loop="$tags"}{$key}, {/loop}"
+    >
+    <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+  </form>
 </div>
 
 {loop="$plugins_header.fields_toolbar"}
@@ -91,7 +82,7 @@
         <div id="searchcriteria">{'Nothing found.'|t}</div>
       </div>
     </div>
-  {elseif="!empty($search_term) or $search_tags !== '' or !empty($visibility)"}
+  {elseif="!empty($search_term) or $search_tags !== '' or !empty($visibility) or $untaggedonly"}
     <div class="pure-g pure-alert pure-alert-success search-result">
       <div class="pure-u-2-24"></div>
       <div class="pure-u-20-24">
@@ -107,10 +98,6 @@
                 <a href="?removetag={function="urlencode($value)"}">{$value}<span class="remove"><i class="fa fa-times"></i></span></a>
               </span>
           {/loop}
-        {elseif="$search_tags === false"}
-          <span class="label label-tag" title="{'Remove tag'|t}">
-            <a href="?">{'untagged'|t}<span class="remove"><i class="fa fa-times"></i></span></a>
-          </span>
         {/if}
         {if="!empty($visibility)"}
           {'with status'|t}
@@ -118,6 +105,11 @@
             {$visibility|t}
           </span>
         {/if}
+        {if="$untaggedonly"}
+          <span class="label label-private">
+            {'without any tag'|t}
+          </span>
+        {/if}
       </div>
     </div>
   {/if}
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index d8c1e76e..41e9fa34 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -6,10 +6,13 @@
           {'Filters'|t}
         </span>
         {if="isLoggedIn()"}
-          <a href="?privateonly" title="{'Filter private links'|t}"
-             class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
-          ><i class="fa fa-key"></i></a>
+        <a href="?privateonly" title="{'Filter private links'|t}"
+           class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
+        ><i class="fa fa-key"></i></a>
         {/if}
+        <a href="?untaggedonly" title="{'Filter untagged links'|t}"
+           class={if="$untaggedonly"}"filter-on"{else}"filter-off"{/if}
+        ><i class="fa fa-tag"></i></a>
         <a href="#" class="filter-off fold-all pure-u-lg-0" title="Fold all">
           <i class="fa fa-chevron-up"></i>
         </a>
@@ -55,4 +58,4 @@
       </a>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 6c71a718..2411703c 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -97,30 +97,21 @@
 
 <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-autofirst 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>
+    <form method="GET" class="pure-form 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}
+      >
+      <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-autofirst 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 id="actions" class="subheader-form">
     <div class="pure-g">