added icon and hotkey for the searchbar: /. (Closes #93)

redimp · Mar 13, 2024 · daf9f4a · daf9f4a
1 parent 0fa0f05
commit daf9f4a
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 5 deletions.
diff --git a/otterwiki/static/css/otterwiki.css b/otterwiki/static/css/otterwiki.css
@@ -307,4 +307,24 @@ mark {
 .dark-mode .spoiler > .spoiler-button {
     color: #9e9e9e;
     background-color: rgba(255, 255, 255, 0.2);
-}
+}
+
+.top-search {
+    display: flex;
+    position: relative;
+}
+
+.top-search::after {
+    top: .5rem;
+    right: 1rem;
+    position: absolute;
+    content: "/";
+    padding: .2rem .8rem;
+    border: solid 1px rgba(128,128,128,.4);
+    border-radius: .4rem;
+    color: rgba(128,128,128,.4);
+    font-size: 1.3rem;
+    line-height: 1.5rem;
+    height: 2.2rem;
+    width: 2.2rem;
+}
diff --git a/otterwiki/static/js/otterwiki.js b/otterwiki/static/js/otterwiki.js
@@ -660,3 +660,17 @@ var MathJax = {
     }
 };
 
+/* Hot Keys */
+window.addEventListener("keypress", function() {
+    var isInputElement = event.srcElement instanceof HTMLInputElement;
+    var isTextAreaElement = event.srcElement instanceof HTMLTextAreaElement;
+
+    if(isInputElement || isTextAreaElement) {
+        return;
+    }
+
+	if (document.getElementById("search-query") != null && event.key === '/') {
+        document.getElementById("search-query").focus();
+        event.preventDefault();
+    }
+});
diff --git a/otterwiki/templates/layout.html b/otterwiki/templates/layout.html
@@ -72,7 +72,7 @@
 {% block navbarmain %}
         <!-- Navbar start -->
         <nav class="navbar">
-            <div class="navbar-content">
+            <div class="navbar-content relative">
                 <button id="toggle-sidebar-btn" class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
                     <i class="fas fa-bars"></i>
                 </button>
@@ -89,8 +89,10 @@
 {% endblock %}
             <div class="navbar-content ml-auto">
 {% block navbarsearch %}
-                <form action="{{ url_for("search") }}" method="post">
-                <input name="query" type="text" class="form-control mr-5" placeholder="Search">
+                <form action="{{ url_for("search") }}" method="post" class="relative">
+                <span class="top-search">
+                <input id="search-query" name="query" type="text" class="form-control mr-5" placeholder="Search" style="padding-right: 3.5rem;">
+                </span>
                 </form>
 {% endblock %}
 {% block navbardropdown_outer %}

diff --git a/otterwiki/templates/search.html b/otterwiki/templates/search.html
@@ -1,12 +1,15 @@
 {# vim: set et ts=8 sts=4 sw=4 ai: #}
 {% extends "wiki.html" %}
+{% block navbarsearch %}
+{# don't display two searchbars #}
+{% endblock %}
 {% block content %}
 <div class="w-600 mw-full">
 <div class="card">
   <h2 class="card-title">Search</h2>
   <form action="{{url_for("search")}}" method="POST" class="form-inline">
   <div class="form-group">
-    <input type="text" class="form-control" name="query" id="query" placeholder="Search term" value="{{query if query}}" autofocus>
+    <input type="text" class="form-control" name="query" id="search-query" placeholder="Search term" value="{{query if query}}" autofocus onfocus="this.setSelectionRange(this.value.length,this.value.length);">
   </div>
 {#
   <div class="form-group">