Cleanup search input

swisstopo · Dec 9, 2024 · 2ae8b39 · 2ae8b39
1 parent 0ac6c37
commit 2ae8b39
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 10 deletions.
diff --git a/ui/src/components/search/search-input.ts b/ui/src/components/search/search-input.ts
@@ -84,10 +84,13 @@ export class SearchInput extends LitElementI18n {
 
   protected updated(changedProperties: PropertyValues<this>): void {
     super.updated(changedProperties);
-    if (this.isActive) {
-      this.classList.add('is-active');
-    } else {
-      this.classList.remove('is-active');
+    console.log(changedProperties);
+    if (changedProperties.has('isActive' as keyof SearchInput)) {
+      if (this.isActive) {
+        this.classList.add('is-active');
+      } else {
+        this.classList.remove('is-active');
+      }
     }
   }
 

diff --git a/ui/src/ngm-app.ts b/ui/src/ngm-app.ts
@@ -207,8 +207,6 @@ export class NgmApp extends LitElementI18n {
     this.queryManager = new QueryManager(viewer);
 
     this.sidebar = this.querySelector('ngm-side-bar') as SideBar | null;
-
-    // setupSearch(viewer, this.querySelector('ga-search')!, sideBar);
   }
 
   removeLoading() {

diff --git a/ui/src/style/header.css b/ui/src/style/header.css
@@ -12,14 +12,13 @@ header {
   --header-padding-v: 10px;
   padding: var(--header-padding-v) var(--header-padding-r) var(--header-padding-v) var(--header-padding-l);
 
-  --content-width: calc(100vw - var(--header-padding-l)  - var(--header-padding-r));
+  --content-width: calc(100vw - var(--header-padding-l) - var(--header-padding-r));
   --suffix-width: 90px;
 }
 
 @media (min-width: 700px) {
   header {
     --header-padding-v: 16px;
-    --suffix-width: 90px;
     justify-content: flex-start;
   }
 }
@@ -87,4 +86,4 @@ header .ngm-header-suffix {
     width: unset;
     max-width: unset;
   }
-}
+}
diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css
@@ -129,7 +129,6 @@ ngm-side-bar {
   overflow-y: auto;
   overflow-x: hidden;
   padding-bottom: 40px;
-  /* scrollbar-color: #868E96 #F1F3F5; */
 }
 
 .ngm-menu-1 > div.ngm-active-section > div:nth-child(1),