Add search frontend code

2025-05-24 12:18:23 +02:00 · 2025-05-24 12:18:23 +02:00 · 3e91f34303
commit 3e91f34303
parent 988849e598
22 changed files with 379 additions and 73 deletions
--- a/backend/scss/search.scss
+++ b/backend/scss/search.scss
@ -0,0 +1,73 @@
+@use 'sass:color';
+
+@use 'constants' as consts;
+
+#search {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+
+    input {
+        width: 100%;
+        line-height: 28px;
+        padding: 0 1rem;
+        padding-left: 2.5rem;
+        border-radius: 8px;
+        background-color: consts.$color-2;
+    }
+
+    input::placeholder {
+        color: consts.$text-dimished;
+    }
+
+    .icon {
+        position: absolute;
+        left: 1rem;
+        fill: consts.$color-3;
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .results {
+        display: none;
+        z-index: 2;
+        position: absolute;
+        background-color: white;
+        vertical-align: top;
+        top: 100%;
+
+        border: solid 1px consts.$color-3;
+        background-color: consts.$color-1;
+        box-shadow: 0 0 5px color.adjust(consts.$color-3, $lightness: -20%);
+
+        .message {
+            display: hidden;
+            padding:
+                var(--margin) calc(2 * var(--margin)) var(--margin) calc(2 * var(--margin));
+        }
+
+        ul {
+            padding: 0px;
+            margin: 0px;
+
+            li {
+                padding:
+                    var(--margin) calc(2 * var(--margin)) var(--margin) calc(2 * var(--margin));
+
+                list-style-type: none;
+
+                em {
+                    font-weight: bold;
+                }
+            }
+
+            li:nth-child(odd) {
+                background: consts.$color-2;
+            }
+        }
+    }
+}
+
+#hidden-templates-search {
+    display: none;
+}