3 files changed, 41 insertions(+), 19 deletions(-)

M static/css/style.css
M static/js/advancedsearch.js
M templates/link_list.html

@@ 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;
+}
+

@@ 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");
+})
+

@@ 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>