chore: make searchbar absolute if fullscreen

acdh-oeaw · Jun 6, 2024 · 894de6e · 894de6e
1 parent 10ad0f3
commit 894de6e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 17 deletions.
diff --git a/components/data-map-view.vue b/components/data-map-view.vue
@@ -141,26 +141,30 @@ watch(data, () => {
 </script>
 
 <template>
-	<div class="relative grid grid-rows-[auto_1fr] gap-4">
-		<SearchForm
-			:filter="searchFilters.category"
-			:search="searchFilters.search"
-			@submit="onChangeSearchFilters"
-		/>
+	<div :class="project.fullscreen ? 'relative grid' : 'relative grid grid-rows-[auto_1fr] gap-4'">
+		<div class="absolute z-10 flex w-full justify-center">
+			<SearchForm
+				:class="
+					project.fullscreen
+						? 'bg-white dark:bg-neutral-900 max-w-[800px] w-full mt-2 rounded-md p-6 bg-opacity-90 shadow-md'
+						: ''
+				"
+				:filter="searchFilters.category"
+				:search="searchFilters.search"
+				@submit="onChangeSearchFilters"
+			/>
+		</div>
 
 		<VisualisationContainer
 			v-slot="{ height, width }"
 			class="border"
 			:class="{ 'opacity-50 grayscale': isLoading }"
 		>
-			<div class="absolute z-10 mt-2 flex w-full justify-center">
-				<Toggle variant="iiif" @click="togglePolygons"> {{ $t("DataMapView.polygon") }} </Toggle>
-			</div>
 			<div class="absolute bottom-0 z-10 mb-2 flex w-full justify-center">
 				<div
-					class="max-h-72 gap-2 overflow-y-auto overflow-x-hidden rounded-md border-2 border-transparent bg-white p-2 text-sm shadow-md"
+					class="max-h-72 gap-2 overflow-y-auto overflow-x-hidden rounded-md border-2 border-transparent bg-white bg-opacity-90 p-2 text-sm font-medium shadow-md dark:bg-neutral-900"
 				>
-					<div class="grid grid-cols-[auto_1fr] gap-3">
+					<div class="grid grid-cols-[auto_auto_1fr] items-center gap-3 align-middle">
 						<div class="grid grid-cols-[auto_1fr] gap-1">
 							<span
 								class="m-1.5 size-2 rounded-full"
@@ -175,6 +179,11 @@ watch(data, () => {
 							></span>
 							{{ $t("DataMapView.centerpoint") }} ({{ centerpoints.length }})
 						</div>
+						<div>
+							<Toggle variant="iiif" @click="togglePolygons">
+								{{ $t("DataMapView.polygon") }}
+							</Toggle>
+						</div>
 					</div>
 				</div>
 			</div>

diff --git a/components/data-network-view.vue b/components/data-network-view.vue
@@ -4,6 +4,8 @@ import { z } from "zod";
 import type { SearchFormData as CategoryFormData } from "@/components/network-legend-panel.vue";
 import type { SearchFormData } from "@/components/network-search-form.vue";
 
+import { project } from "../config/project.config";
+
 const router = useRouter();
 const route = useRoute();
 const t = useTranslations();
@@ -79,8 +81,16 @@ const systemClasses = computed(() => {
 </script>
 
 <template>
-	<div class="relative grid grid-rows-[auto_1fr] gap-4">
-		<NetworkSearchForm :search="searchFilters.search" @submit="onChangeSearchFilters" />
+	<div :class="project.fullscreen ? 'relative grid' : 'relative grid grid-rows-[auto_1fr] gap-4'">
+		<NetworkSearchForm
+			:class="
+				project.fullscreen
+					? 'absolute z-10 bg-white dark:bg-neutral-900 max-w-[800px] w-full m-3 rounded-md p-6 bg-opacity-90 shadow-md'
+					: ''
+			"
+			:search="searchFilters.search"
+			@submit="onChangeSearchFilters"
+		/>
 
 		<VisualisationContainer
 			v-slot="{ height, width }"
@@ -89,7 +99,7 @@ const systemClasses = computed(() => {
 		>
 			<NetworkLegendPanel
 				v-if="height && width"
-				class="absolute bottom-0 right-0 z-10 m-3"
+				class="absolute bottom-0 right-0 z-10 m-3 bg-opacity-90"
 				:system-classes="systemClasses"
 				@submit="onChangeCategory"
 			/>

diff --git a/components/network-search-form.vue b/components/network-search-form.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { SearchIcon } from "lucide-vue-next";
 
+import { project } from "../config/project.config";
+
 export interface SearchFormData {
 	search: string;
 }
@@ -35,7 +37,7 @@ const searchLabelId = "search-field";
 		@submit.prevent="onSubmit"
 	>
 		<div class="grid gap-y-1">
-			<Label :for="searchLabelId">{{ t("SearchForm.search") }}</Label>
+			<Label v-if="!project.fullscreen" :for="searchLabelId">{{ t("SearchForm.search") }}</Label>
 			<Input
 				:id="searchLabelId"
 				:default-value="props.search"

diff --git a/components/search-form.vue b/components/search-form.vue
@@ -40,7 +40,7 @@ const searchLabelId = "search-field";
 		@submit.prevent="onSubmit"
 	>
 		<div class="grid gap-y-1">
-			<Label :for="filterLabelId">{{ t("SearchForm.filter") }}</Label>
+			<Label v-if="!project.fullscreen" :for="filterLabelId">{{ t("SearchForm.filter") }}</Label>
 			<!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
 			<Select name="category" :default-value="props.filter">
 				<SelectTrigger :id="filterLabelId" class="min-w-48">
@@ -55,7 +55,7 @@ const searchLabelId = "search-field";
 		</div>
 
 		<div class="grid gap-y-1">
-			<Label :for="searchLabelId">{{ t("SearchForm.search") }}</Label>
+			<Label v-if="!project.fullscreen" :for="searchLabelId">{{ t("SearchForm.search") }}</Label>
 			<Input
 				:id="searchLabelId"
 				:default-value="props.search"