ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add back links to media library frontend

This commit is contained in:
Daniel Egger 2022-10-07 17:32:50 +02:00
parent 3c386f31ca
commit d9d741f4c6
4 changed files with 143 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
View File

@ -1,7 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import LinkCard from "@/components/mediaLibrary/LinkCard.vue"; import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
import MediaLink from "@/components/mediaLibrary/MediaLink.vue"; import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
import { useMediaLibraryStore } from "@/stores/mediaLibrary"; import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import * as log from "loglevel"; import * as log from "loglevel";
import { computed } from "vue"; import { computed } from "vue";
@ -48,9 +47,21 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
</script> </script>
<template> <template>
<Teleport v-if="mediaStore.mediaLibraryPage && mediaCategory" to="body"> <div
<MLCategoryLayout> v-if="mediaCategory"
<template #header> 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="flex justify-between">
<div class="lg:w-6/12"> <div class="lg:w-6/12">
<h3 class="font-normal text-large mb-3">Handlungsfeld</h3> <h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
@ -64,8 +75,9 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
/> />
</div> </div>
</div> </div>
</template> </div>
<template #body> </div>
<div class="container-large">
<section class="mb-20 mt-8 lg:w-2/3"> <section class="mb-20 mt-8 lg:w-2/3">
<h2 class="mb-4">{{ mediaCategory.description_title }}</h2> <h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
<p class="mb-4">{{ mediaCategory.description_text }}</p> <p class="mb-4">{{ mediaCategory.description_text }}</p>
@ -75,9 +87,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
:key="item" :key="item"
class="mb-2 flex items-center" class="mb-2 flex items-center"
> >
<it-icon-check <it-icon-check class="h-8 w-8 text-sky-500 mr-4 flex-none"></it-icon-check>
class="h-8 w-8 text-sky-500 mr-4 flex-none"
></it-icon-check>
{{ item.value }} {{ item.value }}
</li> </li>
</ul> </ul>
@ -146,9 +156,8 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
</router-link> </router-link>
</section> </section>
</template> </template>
</template> </div>
</MLCategoryLayout> </div>
</Teleport>
</template> </template>
<style scoped> <style scoped>

39
client/src/pages/mediaLibrary/MLCategoryLayout.vue
View File

@ -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>

29
client/src/pages/mediaLibrary/MLMediaListPage.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import MediaLink from "@/components/mediaLibrary/MediaLink.vue"; import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
import { useMediaLibraryStore } from "@/stores/mediaLibrary"; import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import * as log from "loglevel"; import * as log from "loglevel";
import { computed } from "vue"; import { computed } from "vue";
@ -35,12 +34,25 @@ const mediaList = computed(() => {
</script> </script>
<template> <template>
<Teleport v-if="mediaList" to="body"> <div
<MLCategoryLayout> v-if="mediaCategory"
<template #header> 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> <h1 class="mb-4">{{ mediaList.title }}</h1>
</template> </div>
<template #body> </div>
<div class="container-large">
<section class="mb-20"> <section class="mb-20">
<ul class="border-t"> <ul class="border-t">
<li <li
@ -70,9 +82,8 @@ const mediaList = computed(() => {
</li> </li>
</ul> </ul>
</section> </section>
</template> </div>
</MLCategoryLayout> </div>
</Teleport>
</template> </template>
<style scoped> <style scoped>

20
client/tsconfig.app.json
View File

@ -1,27 +1,15 @@
{ {
"extends": "@vue/tsconfig/tsconfig.web.json", "extends": "@vue/tsconfig/tsconfig.web.json",
"include": [ "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"env.d.ts", "exclude": ["src/**/__tests__/*"],
"src/**/*",
"src/**/*.vue"
],
"exclude": [
"src/**/__tests__/*"
],
"compilerOptions": { "compilerOptions": {
"lib": [ "lib": ["ES2021", "DOM", "DOM.Iterable"],
"ES2021",
"DOM",
"DOM.Iterable"
],
"composite": true, "composite": true,
"strict": true, "strict": true,
"allowJs": true, "allowJs": true,
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": [ "@/*": ["./src/*"]
"./src/*"
]
} }
} }
} }