add search ui

diff --git a/chloro/phyll/static/js/chloro.js b/chloro/phyll/static/js/chloro.js
index 14ccdb97e9052afe9e27fe0d8844a11be3f10917..c53a8b6394dac8da4151789cc9354fab76579c64 100644 (file)
--- a/chloro/phyll/static/js/chloro.js
+++ b/chloro/phyll/static/js/chloro.js
@@ -510,4 +510,18 @@ $(function() {
     }
   });
   $('#quickedit input').trigger('change');
+  $('.search-results').empty();
+  $('.search-field').on('submit', function() {
+    var value = $('input[name=q]').val();
+    $.ajax({url: '/ajax/search/', data: {q: value}}).done(function(data) {
+      $('.search-results').empty();
+      for (const hit of data.data) {
+        var $a_hit = $('<a>', {text: hit.title, href: hit.url});
+        var $li_hit = $('<li>');
+        $li_hit.append($a_hit);
+        $('.search-results').append($li_hit);
+      }
+    });
+    return false;
+  });
 });

diff --git a/chloro/rdio/static/css/style.scss b/chloro/rdio/static/css/style.scss
index b3fcec826ecf9cd9f0897be0263b2cf32dffd969..313fd4b9bce19ea92d4cf4c6013cff4c5012fd5a 100644 (file)
--- a/chloro/rdio/static/css/style.scss
+++ b/chloro/rdio/static/css/style.scss
@@ -258,3 +258,66 @@ input#image-upload, input#document-upload {
                color: white;
        }
 }
+
+#search {
+       label {
+               position: absolute;
+               right: 1em;
+       }
+       #search-enable, .search-results {
+               display: none;
+       }
+       #search-enable + label::after {
+               display: flex;
+               justify-content: center;
+               align-items: center;
+               background: #eee;
+               border: 1px solid #aaa;
+               width: 2em;
+               height: 28px;
+               content: "🔍";
+               border-radius: 5px;
+       }
+       #search-enable:checked {
+               + label {
+                       &::after {
+                               content: "×";
+                       }
+               }
+               ~ .search-field {
+                       height: 30px;
+               }
+               ~ .search-results {
+                       display: block;
+               }
+       }
+       .search-field {
+               height: 0;
+               transition: all ease 0.2s;
+               overflow: hidden;
+               display: flex;
+               flex-direction: column;
+               margin-right: 50px;
+               input {
+                       height: 30px;
+               }
+       }
+       .search-results {
+               list-style: none;
+               padding: 0;
+               margin: 0;
+               li {
+                       margin: 0;
+                       padding: 0;
+                       a {
+                               display: block;
+                               padding: 0.5rem 1rem;
+                               border: 1px solid $link-color;
+                               margin-top: -1px;
+                               &:hover {
+                                       background: #eee;
+                               }
+                       }
+               }
+       }
+}

diff --git a/chloro/rdio/templates/phyll/base.html b/chloro/rdio/templates/phyll/base.html
index 947495eff49aba3506cada32de111364c596dd03..710dc3dfac0dcd5fa46f6241ca92dc52ccb429c6 100644 (file)
--- a/chloro/rdio/templates/phyll/base.html
+++ b/chloro/rdio/templates/phyll/base.html
@@ -19,6 +19,15 @@
       <span><a href="/">rdio.space - gestion radio</a></span>
     </header>
     <main class="{% block content-class %}{% endblock %}">
+      <div id="search">
+        <input type="checkbox" id="search-enable">
+        <label for="search-enable"></label>
+        <form class="search-field">
+          <input name="q" type="search">
+        </form>
+        <ul class="search-results">
+        </ul>
+      </div>
       {% block body %}
       {% endblock %}
     </main>