From 70988ab406a68542676c9665272ea26270f7bf82 Mon Sep 17 00:00:00 2001
From: Bryan Newbold <bnewbold@archive.org>
Date: Thu, 6 Aug 2020 20:22:19 -0700
Subject: have search buttons animate after submit

Extremely minimal javascript used
---
 fatcat_scholar/templates/base.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'fatcat_scholar/templates/base.html')

diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index 26ac246..29ad1a7 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -168,7 +168,7 @@
           <div class="ui form">
             <div class="ui action input large fluid">
               <input type="search" placeholder="{{ _("by title, authors, keywords...") }}" name="q" aria-label="search metadata" required itemprop="query-input" style="border-radius: 0; border: 1px #999 solid;" {% if query and query.q %}value="{{ query.q }}"{% endif %}>
-              <button class="ui green button" style="border-radius: 0; background-color: #44a25a; font-size: 1.2rem;">{{ _("Search") }}</button>
+              <button id="search_submit_button" class="ui green button" style="border-radius: 0; background-color: #44a25a; font-size: 1.2rem;">{{ _("Search") }}</button>
             </div>
           </div>
         </form>
@@ -250,6 +250,13 @@
   crossorigin="anonymous">
 </script>
 #}
+<script>
+// when search is submitted, have submit button animate
+console.log("hi");
+document.getElementById("search_form").onsubmit = function(){
+  document.getElementById("search_submit_button").classList.add("loading");
+};
+</script>
 {% block postscript %}{% endblock %}
 </body>
 </html>
-- 
cgit v1.2.3