From d0f12608274f743d0a1caa3b6822079d34b6f6cf Mon Sep 17 00:00:00 2001
From: Yader Velasquez <yader@netlandish.com>
Date: Mon, 12 Feb 2024 18:43:01 -0600
Subject: [PATCH] Change form layout for advanced tags so we don't depents on
 chota fixed styles Display input form horizontally Display form when a tag is
 selected

References: https://todo.code.netlandish.com/~netlandish/links/47
---
 static/css/style.css        | 16 +++++++++++++++-
 static/js/advancedsearch.js |  8 ++++++++
 templates/link_list.html    | 36 ++++++++++++++++++------------------
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index fc74b13..99d6d66 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -432,7 +432,7 @@ a.bullet-link:before {
     z-index: 1000;
     position: absolute;
     background-color: #fff;
-    width: 250px;
+    width: 150px;
     border: 1px solid var(--color-lightGrey);
     border-radius: 4px;
 }
@@ -494,3 +494,17 @@ a.bullet-link:before {
     padding: 0 2px 0 3px;
     opacity: 1 !important;
 }
+
+#advanced-search-container {
+    width: 35%;
+}
+
+.advanced-search-inputs {
+    display: flex;
+    flex-direction: row;
+}
+
+.advanced-search-inputs > div {
+    padding: 5px;
+}
+
diff --git a/static/js/advancedsearch.js b/static/js/advancedsearch.js
index 32a444b..d752c9d 100644
--- a/static/js/advancedsearch.js
+++ b/static/js/advancedsearch.js
@@ -2,6 +2,9 @@ var url = document.querySelector('body').getAttribute('data-autocomplete');
 var tagSelectors = document.querySelectorAll(".tag-selector");
 var form = document.getElementById("advanced-search");
 
+var btn = document.getElementById("advanced-search-btn")
+var tagInputDiv = document.getElementById("advanced-search-tags")
+
 function autocomplete() {
     tags = this.value.split(",")
     tag = tags[tags.length -1].trim()
@@ -88,3 +91,8 @@ form.addEventListener("submit", function(e) {
 })
 
 
+btn.addEventListener("click", function(e) {
+    e.preventDefault();
+    tagInputDiv.classList.toggle("d-none");
+})
+
diff --git a/templates/link_list.html b/templates/link_list.html
index c822d48..120bd25 100644
--- a/templates/link_list.html
+++ b/templates/link_list.html
@@ -1,7 +1,7 @@
 {{template "base" .}}
 <section class="app-header app-header-advanced-search">
   <h1 class="app-header__title">{{ if .isOrgLink }}{{ .org.Name }} {{.pd.Title}}{{else if not .isPopular}}{{.pd.Data.recent}}{{else}}{{.pd.Data.popular}}{{end}}</h1>
-  <div>
+  <div id="advanced-search-container">
       <form class="app-header__search app-header__search--stack" method="GET" id="advanced-search"
         action="{{if .isPopular}}{{reverse "core:popular_link_list"}}{{else if .isOrgLink}}{{reverse "core:home_link_list"}}{{else}}{{reverse "core:recent_link_list"}}{{end}}">
           <div class="app-header__search app-header__search--inline">
@@ -13,25 +13,25 @@
               </button>
           </div>
           {{if .advancedSearch}}
-              <details>
-                  <summary>{{.pd.Data.advanced_search}}</summary>
+            <p class="text-right"><a href="#" id="advanced-search-btn">{{.pd.Data.advanced_search}}</a></p>
+            <div id="advanced-search-tags" {{if and (not .tagFilter) (not .excludeTagFilter)}}class="d-none"{{end}}>
+              <div class="advanced-search-inputs">
                   <div>
-                      <div>
-                          <label>{{.pd.Data.include_tags}}</label>
-                          <input type="text" name="tag" value="{{.tagFilter}}" class="tag-selector" autocomplete="off"/>
-                          <div class="d-none autocomplete-tags"></div>
-                      </div>
-                      <div>
-                          <label>{{.pd.Data.exclude_tags}}</label>
-                          <input type="text" name="exclude" value="{{.excludeTagFilter}}" class="tag-selector" autocomplete="off"/>
-                          <div class="d-none autocomplete-tags"></div>
-                      </div>
-                      <p class="mt-1 pull-right">
-                      <a href="{{reverse "core:home_link_list"}}" class="button primary is-small">{{.pd.Data.clear}}</a>
-                      <button type="submit" class="button primary is-small">{{.pd.Data.apply}}</button>
-                      </p>
+                      <label>{{.pd.Data.include_tags}}</label>
+                      <input type="text" name="tag" value="{{.tagFilter}}" class="tag-selector" autocomplete="off"/>
+                      <div class="d-none autocomplete-tags"></div>
                   </div>
-              </details>
+                  <div>
+                      <label>{{.pd.Data.exclude_tags}}</label>
+                      <input type="text" name="exclude" value="{{.excludeTagFilter}}" class="tag-selector" autocomplete="off"/>
+                      <div class="d-none autocomplete-tags"></div>
+                  </div>
+              </div>
+              <p class="mt-1 pull-right">
+                  <a href="{{reverse "core:home_link_list"}}" class="button primary is-small">{{.pd.Data.clear}}</a>
+                  <button type="submit" class="button primary is-small">{{.pd.Data.apply}}</button>
+              </p>
+            </div>
           {{end}}
       </form>
   </div>
-- 
2.45.2