From f555bba9e906327dd4e0414c614e46df77ff673e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@lyska.io>
Date: Sun, 7 Feb 2021 00:10:02 +0100
Subject: [PATCH] Fix mobile issues with searchbox and nav menu (#72)

* Fix mobile Safari searchbox style (#62)

* Fix mobile menu not closing on outside click (#62)
---
 .../components/SearchAutoComplete.svelte      |  7 ++-
 bookmarks/styles/bookmarks.scss               | 26 ++++++++--
 bookmarks/styles/shared.scss                  |  1 -
 bookmarks/templates/bookmarks/index.html      |  4 +-
 bookmarks/templates/bookmarks/layout.html     | 35 ++-----------
 bookmarks/templates/bookmarks/nav_menu.html   | 49 +++++++++++++++++++
 6 files changed, 82 insertions(+), 40 deletions(-)
 create mode 100644 bookmarks/templates/bookmarks/nav_menu.html

diff --git a/bookmarks/components/SearchAutoComplete.svelte b/bookmarks/components/SearchAutoComplete.svelte
index a911b88..130c7c9 100644
--- a/bookmarks/components/SearchAutoComplete.svelte
+++ b/bookmarks/components/SearchAutoComplete.svelte
@@ -189,8 +189,8 @@
 </script>
 
 <div class="form-autocomplete">
-    <div class="form-autocomplete-input" class:is-focused={isFocus}>
-        <input type="search" name="{name}" placeholder="{placeholder}" autocomplete="off" value="{value}"
+    <div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
+        <input type="search" class="form-input" name="{name}" placeholder="{placeholder}" autocomplete="off" value="{value}"
                bind:this={input}
                on:input={handleInput} on:keydown={handleKeyDown} on:focus={handleFocus} on:blur={handleBlur}>
     </div>
@@ -257,6 +257,9 @@
     .form-autocomplete-input {
         padding: 0;
     }
+    .form-autocomplete-input.is-focused {
+        z-index: 2;
+    }
 
     /* TODO: Should be read from theme */
     .menu-item.selected > a {
diff --git a/bookmarks/styles/bookmarks.scss b/bookmarks/styles/bookmarks.scss
index 7c03403..feb1fb7 100644
--- a/bookmarks/styles/bookmarks.scss
+++ b/bookmarks/styles/bookmarks.scss
@@ -1,13 +1,33 @@
-.bookmarks-page {
+.bookmarks-page .search {
+  $searchbox-height: 1.8rem;
 
-  .search input[type=search] {
+  // Regular input
+  input[type='search'] {
     width: 180px;
-    height: 1.8rem;
+    height: $searchbox-height;
+    -webkit-appearance: none;
 
     @media (min-width: $control-width-md) {
       width: 300px;
     }
   }
+
+  // Enhanced auto-complete input
+  // This needs a bit more wrangling to make the CSS component align with the attached button
+  .form-autocomplete {
+    height: $searchbox-height;
+
+    .form-autocomplete-input {
+      height: $searchbox-height;
+      width: 100%;
+
+      input[type='search'] {
+        height: 100%;
+        margin: 0;
+        border: none;
+      }
+    }
+  }
 }
 
 ul.bookmark-list {
diff --git a/bookmarks/styles/shared.scss b/bookmarks/styles/shared.scss
index 59c3349..62d03cc 100644
--- a/bookmarks/styles/shared.scss
+++ b/bookmarks/styles/shared.scss
@@ -4,7 +4,6 @@ section.content-area {
     border-bottom: solid 1px $border-color;
     display: flex;
     flex-direction: row;
-    align-items: baseline;
     margin-bottom: 16px;
 
     h2 {
diff --git a/bookmarks/templates/bookmarks/index.html b/bookmarks/templates/bookmarks/index.html
index ebd71a3..8c0ff03 100644
--- a/bookmarks/templates/bookmarks/index.html
+++ b/bookmarks/templates/bookmarks/index.html
@@ -12,10 +12,10 @@
                 <h2>Bookmarks</h2>
                 <div class="spacer"></div>
                 <div class="search">
-                    <form action="{% url 'bookmarks:index' %}" method="get">
+                    <form action="{% url 'bookmarks:index' %}" method="get" role="search">
                         <div class="input-group">
                             <span id="search-input-wrap">
-                                <input type="search" name="q" placeholder="Search for words or #tags"
+                                <input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
                                        value="{{ query }}">
                             </span>
                             <input type="submit" value="Search" class="btn input-group-btn">
diff --git a/bookmarks/templates/bookmarks/layout.html b/bookmarks/templates/bookmarks/layout.html
index 35acb9c..14bfe60 100644
--- a/bookmarks/templates/bookmarks/layout.html
+++ b/bookmarks/templates/bookmarks/layout.html
@@ -5,7 +5,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="{% static 'favicon.png' %}" />
+    <link rel="icon" href="{% static 'favicon.png' %}"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
     <meta name="description" content="Self-hosted bookmark service">
     <meta name="robots" content="index,follow">
@@ -23,39 +23,10 @@
             <h1>linkding</h1>
         </a>
     </section>
-    {# Only nav items menu when logged in #}
+    {# Only show nav items menu when logged in #}
     {% if request.user.is_authenticated %}
         <section class="navbar-section">
-            {# Basic menu list #}
-            <div class="hide-md">
-                <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
-                <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
-                <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
-                <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
-            </div>
-            {# Menu drop-down for smaller devices #}
-            <div class="show-md">
-                <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">
-                    <i class="icon icon-plus"></i>
-                </a>
-                <div class="dropdown dropdown-right">
-                    <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
-                        <i class="icon icon-menu icon-2x"></i>
-                    </a>
-                    <!-- menu component -->
-                    <ul class="menu">
-                        <li>
-                            <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
-                        </li>
-                        <li>
-                            <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+            {% include 'bookmarks/nav_menu.html' %}
         </section>
     {% endif %}
 </header>
diff --git a/bookmarks/templates/bookmarks/nav_menu.html b/bookmarks/templates/bookmarks/nav_menu.html
new file mode 100644
index 0000000..4cb5a28
--- /dev/null
+++ b/bookmarks/templates/bookmarks/nav_menu.html
@@ -0,0 +1,49 @@
+{# Basic menu list #}
+<div class="hide-md">
+    <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
+    <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
+    <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
+    <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
+</div>
+{# Menu drop-down for smaller devices #}
+<div class="show-md">
+    <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">
+        <i class="icon icon-plus"></i>
+    </a>
+    <div class="dropdown dropdown-right">
+        <a href="#" id="mobile-nav-menu-trigger" class="btn btn-link dropdown-toggle" tabindex="0">
+            <i class="icon icon-menu icon-2x"></i>
+        </a>
+        <!-- menu component -->
+        <ul class="menu">
+            <li>
+                <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
+            </li>
+            <li>
+                <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
+            </li>
+            <li>
+                <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
+            </li>
+        </ul>
+    </div>
+</div>
+<script>
+    // Hide mobile menu on outside click
+    // The Spectre CSS component relies on focus changes to show/hide the dropdown, however mobile browsers like
+    // Safari will not trigger a blur event when clicking on a non-focusable element, so we have to simulate the
+    // behaviour through Javascript
+    const mobileNavMenuTrigger = document.getElementById('mobile-nav-menu-trigger');
+
+    function mobileNavMenuOutsideClickHandler(clickEvent) {
+        if (mobileNavMenuTrigger.parentElement.contains(clickEvent.target)) return
+        mobileNavMenuTrigger.blur();
+    }
+
+    mobileNavMenuTrigger.addEventListener('focus', function () {
+        document.addEventListener('click', mobileNavMenuOutsideClickHandler);
+    })
+    mobileNavMenuTrigger.addEventListener('blur', function () {
+        document.removeEventListener('click', mobileNavMenuOutsideClickHandler);
+    })
+</script>
\ No newline at end of file