misc fixes

TUM-Dev · Mar 7, 2024 · 31b7b4b · 31b7b4b
1 parent 8f0dc03
commit 31b7b4b
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 16 deletions.
diff --git a/webclient/src/components/AppFooter.vue b/webclient/src/components/AppFooter.vue
@@ -46,12 +46,12 @@ const navigation = computed(() => [
         </div>
       </nav>
       <div class="mt-10 flex justify-center space-x-10 text-center">
-        <p class="text-zinc-500 text-center text-xs">
-          {{ t("official_roomfinder") }}<br />
-          <Btn to="https://tum.de" variant="rounded-xl focusable" size="sm">
+        <Btn to="https://tum.de" variant="rounded-xl px-3 py-2 focusable" size="sm">
+          <p class="text-zinc-600 text-center text-xs">
+            {{ t("official_roomfinder") }}<br />
             <img :alt="t('tum_logo_alt')" :src="brandLogo.href" width="200" class="h-20" aria-hidden="true" />
-          </Btn>
-        </p>
+          </p>
+        </Btn>
       </div>
     </div>
   </footer>

diff --git a/webclient/src/components/BreadcrumbList.vue b/webclient/src/components/BreadcrumbList.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<{ items: Item[]; class?: string }>(), { c
     :class="props.class"
   >
     <template v-for="(item, i) in props.items" :key="item.to">
-      <span v-if="i > 0" class="text-zinc-500">/</span>
+      <span v-if="i > 0" aria-hidden="true" class="text-zinc-500">/</span>
       <li property="itemListElement" typeof="ListItem">
         <RouterLink
           :to="item.to"

diff --git a/webclient/src/components/DetailsInfoSection.vue b/webclient/src/components/DetailsInfoSection.vue
@@ -22,7 +22,12 @@ const appURL = import.meta.env.VITE_APP_URL;
        as long as only little information is there -->
   <div class="hidden lg:block">
     <div class="bg-white border-zinc-200 max-w-sm rounded-lg border shadow-md shadow-zinc-500/5 dark:bg-zinc-100">
-      <button v-if="state.image.shown_image" type="button" @click="state.showImageSlideshow(true)">
+      <button
+        v-if="state.image.shown_image"
+        type="button"
+        @click="state.showImageSlideshow(true)"
+        class="focusable rounded-t-lg"
+      >
         <img
           :alt="t('image_alt')"
           :src="`${appURL}/cdn/header/${state.image.shown_image.name}`"

diff --git a/webclient/src/components/DetailsInteractiveMap.vue b/webclient/src/components/DetailsInteractiveMap.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { BackgroundLayerSpecification, Coordinates, ImageSource } from "maplibre-gl";
-import { Map, Marker } from "maplibre-gl";
-import { AttributionControl, FullscreenControl, GeolocateControl, NavigationControl } from "maplibre-gl";
+import { AttributionControl, FullscreenControl, GeolocateControl, Map, Marker, NavigationControl } from "maplibre-gl";
 import { MapSelections, useDetailsStore } from "@/stores/details";
 import { nextTick, ref } from "vue";
 import { FloorControl } from "@/modules/FloorControl";
@@ -112,8 +111,7 @@ function initMap(containerId: string) {
     attributionControl: false,
   });
 
-  const nav = new NavigationControl({});
-  map.addControl(nav, "top-left");
+  map.addControl(new NavigationControl({}), "top-left");
 
   // (Browser) Fullscreen is enabled only on mobile, on desktop the map
   // is maximized instead. This is determined once to select the correct

diff --git a/webclient/src/components/DetailsRoomOverviewSection.vue b/webclient/src/components/DetailsRoomOverviewSection.vue
@@ -150,14 +150,17 @@ const { list, containerProps, wrapperProps } = useVirtualList<ChildEntry>(filter
         class="bg-zinc-100 border-zinc-400 max-h-96 overflow-y-scroll border p-2 dark:bg-zinc-200"
       >
         <ul v-bind="wrapperProps">
-          <a v-for="(room, index) in list" :key="index" :href="`/view/${room.data.id}`" class="!no-underline">
-            <li
+          <li>
+            <a
+              v-for="(room, index) in list"
+              :key="index"
+              :href="`/view/${room.data.id}`"
               class="flex h-[36px] max-h-[36px] min-h-[36px] flex-row gap-2 p-1.5 px-3 hover:text-white hover:bg-tumBlue-500"
             >
               <MapPinIcon class="my-auto h-4 w-4" aria-hidden="true" />
               {{ room.data.name }}
-            </li>
-          </a>
+            </a>
+          </li>
         </ul>
       </div>
       <div v-else class="flex flex-row items-baseline">

diff --git a/webclient/src/pages/view/[id].vue b/webclient/src/pages/view/[id].vue
@@ -116,7 +116,7 @@ onMounted(() => {
     <button
       v-if="state.image.shown_image"
       type="button"
-      class="!-mx-5 block lg:hidden"
+      class="focusable !-mx-5 block lg:hidden"
       @click="state.showImageSlideshow(true)"
     >
       <img :alt="t('image_alt')" :src="`${appURL}/cdn/header/${state.image.shown_image.name}`" class="block w-full" />