Add back links to media library frontend
This commit is contained in:
Daniel Egger
parent
3c386f31ca
commit
d9d741f4c6
|
|
@ -1,7 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
|
||||
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
|
||||
import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
|
||||
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
||||
import * as log from "loglevel";
|
||||
import { computed } from "vue";
|
||||
|
|
@ -48,9 +47,21 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport v-if="mediaStore.mediaLibraryPage && mediaCategory" to="body">
|
||||
<MLCategoryLayout>
|
||||
<template #header>
|
||||
<div
|
||||
v-if="mediaCategory"
|
||||
class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
|
||||
>
|
||||
<div class="bg-gray-200">
|
||||
<div class="container-large">
|
||||
<nav>
|
||||
<a
|
||||
class="block my-9 cursor-pointer flex items-center"
|
||||
:href="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
|
||||
>
|
||||
<it-icon-arrow-left />
|
||||
<span>zurück</span></a
|
||||
>
|
||||
</nav>
|
||||
<div class="flex justify-between">
|
||||
<div class="lg:w-6/12">
|
||||
<h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
|
||||
|
|
@ -64,8 +75,9 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-large">
|
||||
<section class="mb-20 mt-8 lg:w-2/3">
|
||||
<h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
|
||||
<p class="mb-4">{{ mediaCategory.description_text }}</p>
|
||||
|
|
@ -75,9 +87,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
|
|||
:key="item"
|
||||
class="mb-2 flex items-center"
|
||||
>
|
||||
<it-icon-check
|
||||
class="h-8 w-8 text-sky-500 mr-4 flex-none"
|
||||
></it-icon-check>
|
||||
<it-icon-check class="h-8 w-8 text-sky-500 mr-4 flex-none"></it-icon-check>
|
||||
{{ item.value }}
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -146,9 +156,8 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
|
|||
</router-link>
|
||||
</section>
|
||||
</template>
|
||||
</template>
|
||||
</MLCategoryLayout>
|
||||
</Teleport>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div class="fixed top-0 overflow-y-scroll bg-white h-full w-full">
|
||||
<div class="bg-gray-200">
|
||||
<div class="container-large">
|
||||
<nav>
|
||||
<a
|
||||
class="block my-9 cursor-pointer flex items-center"
|
||||
@click="router.go(-1)"
|
||||
>
|
||||
<it-icon-arrow-left />
|
||||
<span>zurück</span></a
|
||||
>
|
||||
</nav>
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-large">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.it-icon-hf {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.it-icon-hf > * {
|
||||
@apply m-auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
|
||||
import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
|
||||
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
||||
import * as log from "loglevel";
|
||||
import { computed } from "vue";
|
||||
|
|
@ -35,12 +34,25 @@ const mediaList = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport v-if="mediaList" to="body">
|
||||
<MLCategoryLayout>
|
||||
<template #header>
|
||||
<div
|
||||
v-if="mediaCategory"
|
||||
class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
|
||||
>
|
||||
<div class="bg-gray-200">
|
||||
<div class="container-large">
|
||||
<nav>
|
||||
<a
|
||||
class="block my-9 cursor-pointer flex items-center"
|
||||
:href="mediaStore.mediaLibraryPage.frontend_url"
|
||||
>
|
||||
<it-icon-arrow-left />
|
||||
<span>zurück</span></a
|
||||
>
|
||||
</nav>
|
||||
<h1 class="mb-4">{{ mediaList.title }}</h1>
|
||||
</template>
|
||||
<template #body>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-large">
|
||||
<section class="mb-20">
|
||||
<ul class="border-t">
|
||||
<li
|
||||
|
|
@ -70,9 +82,8 @@ const mediaList = computed(() => {
|
|||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
</MLCategoryLayout>
|
||||
</Teleport>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,15 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||
"include": [
|
||||
"env.d.ts",
|
||||
"src/**/*",
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/__tests__/*"
|
||||
],
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"lib": [
|
||||
"ES2021",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"lib": ["ES2021", "DOM", "DOM.Iterable"],
|
||||
"composite": true,
|
||||
"strict": true,
|
||||
"allowJs": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue