From ff0f2320e174af359b043312d9d2fa2a2b9c0563 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 1 Jul 2024 14:43:43 +0200
Subject: [PATCH] changes the layout of the searchbar to be the same in the
 mobile view and in the desktop view

---
 application/views/templates/CISHTML-Header.php |  3 +--
 public/js/components/searchbar/searchbar.js    | 17 +++++++++++------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/application/views/templates/CISHTML-Header.php b/application/views/templates/CISHTML-Header.php
index c9f2b3305..f373a1d49 100755
--- a/application/views/templates/CISHTML-Header.php
+++ b/application/views/templates/CISHTML-Header.php
@@ -31,7 +31,7 @@ if (!isset($menu)) {
 	<button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
 		<span class="navbar-toggler-icon"></span>
 	</button>
-	<fhc-searchbar id="nav-search" class="px-2 d-lg-none fhc-searchbar w-100" @updatesearchtypes="updatesearchtypes" :selectedtypes="selectedtypes" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>	
+	<fhc-searchbar id="nav-search" class=" fhc-searchbar w-100" @updatesearchtypes="updatesearchtypes" :selectedtypes="selectedtypes" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>	
 	<a id="nav-logo" href="<?= site_url(''); ?>">
 		<img src="<?= base_url('/public/images/logo-300x160.png'); ?>" alt="Logo">
 	</a>
@@ -42,7 +42,6 @@ if (!isset($menu)) {
 			</button>
 		</div>
 		<div class="offcanvas-body p-0">
-			<fhc-searchbar id="nav-search" class="d-none d-lg-block fhc-searchbar w-100" @updatesearchtypes="updatesearchtypes" :selectedtypes="selectedtypes" :searchoptions="searchbaroptions"  :searchfunction="searchfunction"></fhc-searchbar>
 			<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
 				<img src="<?= site_url('Cis/Pub/bild/person/' . getAuthPersonId()); ?>" class="avatar rounded-circle"/>
 			</button>
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 474f0ad8b..bee90fd1e 100755
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -54,8 +54,8 @@ export default {
               </template>
             </div>
 
-            <div @[\`show.bs.collapse\`]="calcSearchSettingsExtent" class="collapse" id="searchSettings"  ref="settings" 
-                 class="searchbar_settings text-white" tabindex="-1">
+            <div id="searchSettings"  ref="settings" 
+                 class="top-100 end-0 searchbar_settings text-white collapse" tabindex="-1">
               <div class="d-flex flex-column m-3" v-if="this.searchoptions.types.length > 0">
               <span class="fw-light mb-2">Suche filtern nach:</span>  
               <template v-for="(type, index) in this.searchoptions.types" :key="type">
@@ -79,13 +79,18 @@ export default {
     },
     beforeMount: function() {
         this.updateSearchOptions();
+        
+    },
+    mounted(){
+        window.addEventListener('resize', (event) =>{
+            console.log(this.$refs.settings,"this is the refs of the settings")
+            this.$refs.settings.hide();
+            console.log("resizing")
+        }); 
+        //console.log(this.$refs.settings.show,"this are the refs")
     },
     methods: {
         
-        calcSearchSettingsExtent: function(){
-            this.$refs.settings.style.top = Math.floor(this.$refs.settingsbutton.offsetHeight  ) + 'px';
-            this.$refs.settings.style.right = 0;
-        },
 
         updateSearchOptions: function() {
             this.searchsettings.types = [];