Use horizontal scrolling

This commit is contained in:
Christian Cueni 2022-10-24 09:40:12 +02:00
parent f6114c78e7
commit 9b8bbf5ebc
1 changed files with 13 additions and 9 deletions

View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useMediaLibraryStore } from "@/stores/mediaLibrary"; import {useMediaLibraryStore} from "@/stores/mediaLibrary";
import * as log from "loglevel"; import * as log from "loglevel";
import { onMounted } from "vue"; import {onMounted} from "vue";
log.debug("MediaLibraryView created"); log.debug("MediaLibraryView created");
@ -25,22 +25,22 @@ onMounted(async () => {
<template> <template>
<div class="bg-gray-200"> <div class="bg-gray-200">
<nav class="px-6 py-4 border-b bg-white"> <nav class="px-6 py-4 border-b bg-white">
<ul v-if="mediaLibraryStore.mediaLibraryPage" class="flex flex-col lg:flex-row"> <ul v-if="mediaLibraryStore.mediaLibraryPage" class="overflow-auto whitespace-nowrap scrollbar">
<li> <li class="lg:ml-12 inline-block">
<router-link :to="mediaLibraryStore.mediaLibraryPage.frontend_url"> <router-link :to="mediaLibraryStore.mediaLibraryPage.frontend_url">
Übersicht Übersicht
</router-link> </router-link>
</li> </li>
<li class="lg:ml-12"> <li class="ml-6 lg:ml-12 inline-block">
<router-link <router-link
:to="`${mediaLibraryStore.mediaLibraryPage.frontend_url}/category`" :to="`${mediaLibraryStore.mediaLibraryPage.frontend_url}/category`"
> >
Handlungsfelder Handlungsfelder
</router-link> </router-link>
</li> </li>
<li class="lg:ml-12">Allgemeines zu Versicherungen</li> <li class="ml-6 lg:ml-12 inline-block">Allgemeines zu Versicherungen</li>
<li class="lg:ml-12">Lernmedien</li> <li class="ml-6 lg:ml-12 inline-block">Lernmedien</li>
<li class="lg:ml-12"> <li class="ml-6 lg:ml-12 inline-block">
<a href="https://www.vbv.ch/de/der-vbv/lernen-lehren/lexikon">Lexikon</a> <a href="https://www.vbv.ch/de/der-vbv/lernen-lehren/lexikon">Lexikon</a>
</li> </li>
</ul> </ul>
@ -51,4 +51,8 @@ onMounted(async () => {
</div> </div>
</template> </template>
<style scoped></style> <style scoped>
.scrollbar::-webkit-scrollbar {
display: none;
}
</style>