Fix jumping search box (#163)

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## v1.8.1 (01/10/2021)
+- [**enhancement**] Add global shortcut for search [#161](https://github.com/sissbruecker/linkding/pull/161)
+  - allows to press `s` to focus the search input
+
+---
+
+## v1.8.0 (04/09/2021)
+- [**enhancement**] Wayback Machine Integration [#59](https://github.com/sissbruecker/linkding/issues/59)
+  - Automatically creates snapshots of bookmarked websites on [web archive](https://archive.org/web/)
+  - This is one of the largest changes yet and adds a task processor that runs as a separate process in the background. If you run into issues with this feature, it can be disabled using the [LD_DISABLE_BACKGROUND_TASKS](https://github.com/sissbruecker/linkding/blob/master/docs/Options.md#ld_disable_background_tasks) option
+
+---
+
 ## v1.7.2 (26/08/2021)
 - [**enhancement**] Add support for nanosecond resolution timestamps for bookmark import (e.g. Google Bookmarks) [#146](https://github.com/sissbruecker/linkding/issues/146)
 

bookmarks/static/shared.js

@@ -40,6 +40,28 @@
         });
     }
 
+    function initGlobalShortcuts() {
+        // Focus search button
+        document.addEventListener('keydown', function (event) {
+            // Filter for shortcut key
+            if (event.key !== 's') return;
+            // Skip if event occurred within an input element
+            const targetNodeName = event.target.nodeName;
+            const isInputTarget = targetNodeName === 'INPUT'
+                || targetNodeName === 'SELECT'
+                || targetNodeName === 'TEXTAREA';
 
-    initConfirmationButtons()
+            if (isInputTarget) return;
+
+            const searchInput = document.querySelector('input[type="search"]');
+
+            if (searchInput) {
+                searchInput.focus();
+                event.preventDefault();
+            }
+        });
+    }
+
+    initConfirmationButtons();
+    initGlobalShortcuts();
 })()

bookmarks/styles/bookmarks.scss

@@ -1,14 +1,16 @@
 .bookmarks-page .search {
+  $searchbox-width: 180px;
+  $searchbox-width-md: 300px;
   $searchbox-height: 1.8rem;
 
   // Regular input
   input[type='search'] {
-    width: 180px;
+    width: $searchbox-width;
     height: $searchbox-height;
     -webkit-appearance: none;
 
     @media (min-width: $control-width-md) {
-      width: 300px;
+      width: $searchbox-width-md;
     }
   }
 
@@ -18,14 +20,19 @@
     height: $searchbox-height;
 
     .form-autocomplete-input {
+      width: $searchbox-width;
       height: $searchbox-height;
-      width: 100%;
 
       input[type='search'] {
+        width: 100%;
         height: 100%;
         margin: 0;
         border: none;
       }
+
+      @media (min-width: $control-width-md) {
+        width: $searchbox-width-md;
+      }
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkding",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "",
   "main": "index.js",
   "scripts": {

version.txt

@@ -1 +1 @@
-1.8.0
+1.8.1