From 5946e3309fe6c7fac70410d65f433d72b61bf158 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Tue, 25 Jun 2024 15:58:09 +0200
Subject: [PATCH] fixed how the parsed_id is displayed and made more of the
 search bar appear on small devices

---
 webclient/components/AppSearchBar.vue     |  2 +-
 webclient/components/SearchResultItem.vue | 23 ++++++++++++-----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/webclient/components/AppSearchBar.vue b/webclient/components/AppSearchBar.vue
index 5c97ee22c..a98d9cded 100644
--- a/webclient/components/AppSearchBar.vue
+++ b/webclient/components/AppSearchBar.vue
@@ -163,7 +163,7 @@ const { data, error } = await useFetch<SearchResponse>(url, {
   <ClientOnly>
     <div
       v-if="searchBarFocused && data && query.length !== 0"
-      class="shadow-4xl bg-zinc-50 border-zinc-200 absolute top-3 -ms-2 me-3 mt-16 flex max-h-[calc(100vh-80px)] max-w-xl flex-col gap-4 overflow-auto rounded border p-3.5 shadow-zinc-700/30"
+      class="shadow-4xl bg-zinc-50 border-zinc-200 absolute top-3 md:-ms-2 md:me-3 mt-16 flex max-h-[calc(100vh-80px)] max-w-xl flex-col gap-4 overflow-auto rounded border p-3.5 shadow-zinc-700/30"
     >
       <!--
     <li class="search-comment filter">
diff --git a/webclient/components/SearchResultItem.vue b/webclient/components/SearchResultItem.vue
index ae612b403..fb99ac0be 100644
--- a/webclient/components/SearchResultItem.vue
+++ b/webclient/components/SearchResultItem.vue
@@ -5,7 +5,7 @@ import {
   MagnifyingGlassIcon,
   MapPinIcon,
 } from "@heroicons/vue/24/outline/index.js";
-import { ChevronDownIcon } from "@heroicons/vue/16/solid/index.js";
+import { ChevronRightIcon } from "@heroicons/vue/16/solid/index.js";
 import type { components } from "~/api_types/index.js";
 
 defineProps<{
@@ -22,34 +22,35 @@ type RoomEntry = components["schemas"]["RoomEntry"];
     <NuxtLink
       :class="{ 'bg-blue-200': highlighted }"
       :to="'/view/' + item.id"
-      class="focusable flex gap-3 px-4 py-3"
+      class="focusable flex gap-1 md:gap-3 ps-2 md:ps-4 md:pe-4 py-3"
       @click="() => emit('click')"
       @mousedown="() => emit('mousedown')"
       @mouseover="() => emit('mouseover')"
     >
-      <div class="my-auto min-w-11">
+      <div class="my-auto min-w-9 md:min-w-11">
         <div
           v-if="item.type === 'room' || item.type === 'virtual_room' || item.type === 'poi'"
           class="text-zinc-900 p-2"
         >
-          <MagnifyingGlassIcon v-if="item.parsed_id" class="h-6 w-6" />
-          <MapPinIcon v-else class="h-6 w-6" />
+          <MagnifyingGlassIcon v-if="item.parsed_id" class="h-5 w-5 md:h-6 md:w-6" />
+          <MapPinIcon v-else class="h-5 w-5 md:h-6 md:w-6" />
         </div>
         <div v-else class="text-white bg-blue-500 rounded-full p-2">
-          <BuildingOfficeIcon v-if="item.type === 'building'" class="mx-auto h-6 w-6" />
-          <BuildingOffice2Icon v-else class="mx-auto h-6 w-6" />
+          <BuildingOfficeIcon v-if="item.type === 'building'" class="mx-auto h-5 w-5 md:h-6 md:w-6" />
+          <BuildingOffice2Icon v-else class="mx-auto h-5 w-5 md:h-6 md:w-6" />
         </div>
       </div>
       <div class="text-zinc-600 flex flex-col gap-0.5">
         <div class="flex flex-col">
           <div
             v-if="(item.type === 'room' || item.type === 'virtual_room' || item.type === 'poi') && item.parsed_id"
-            class="flex flex-row"
+            class="flex flex-row items-center"
           >
-            <ChevronDownIcon class="mt-0.5 h-4 w-4" />
-            <span v-html="item.parsed_id" />
+            <span class="text-zinc-900 shrink-0" v-html="item.parsed_id" />
+            <ChevronRightIcon class="text-zinc-400 shrink-0 h-4 w-4" />
+            <span class="line-clamp-1 text-sm text-zinc-400 shrink" v-html="item.name" />
           </div>
-          <span class="line-clamp-1" v-html="item.name" />
+          <span v-else class="line-clamp-1" v-html="item.name" />
         </div>
         <small>
           {{ item.subtext }}