Adapt design of media library

client/src/components/AppFooter.vue

@@ -5,10 +5,17 @@ log.debug("AppFooter created");
 </script>
 
 <template>
-  <footer class="px-8 py-4 bg-gray-200 border-t border-gray-500 flex">
+  <footer
+    class="px-8 py-4 bg-gray-200 border-t border-gray-500 flex flex-col lg:flex-row"
+  >
     <div>@2022 VBV</div>
+    <div class="lg:ml-8">FAQ</div>
+    <div class="lg:ml-8">Datenschutzbestimmungen</div>
+    <div class="lg:ml-8">Impressum</div>
     <div class="flex-grow"></div>
     <div>VBV_VERSION_BUILD_NUMBER_VBV</div>
+    <div class="lg:ml-8">Deutsch</div>
+    <div class="lg:ml-8">Kontakt</div>
   </footer>
 </template>
 

client/src/components/mediaLibrary/LinkCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
 
-export interface Props {
+interface Props {
   title: string;
   description: string;
   linkText: string;
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="border-gray-500 border flex p-4 items-center">
+  <div class="border-gray-500 border flex flex-col lg:flex-row p-4 items-center">
     <img class="mr-6" :src="icon" />
     <div>
       <h4 class="mb-2 text-bold">{{ title }}</h4>

client/src/components/mediaLibrary/OverviewCard.vue

@@ -16,8 +16,8 @@ const props = withDefaults(defineProps<Props>(), {
   <div class="bg-white p-8 flex justify-between">
     <div>
       <h3 class="mb-4">{{ title }}</h3>
-      <p class="mb-4">{{ description }}</p>
-      <router-link :to="link" class="inline-flex items-center font-normal">
+      <p class="mb-4 text-xl">{{ description }}</p>
+      <router-link :to="link" class="text-xl inline-flex items-center font-normal">
         <span class="inline">{{ call2Action }}</span>
         <it-icon-arrow-right class="ml-1 h-5 w-5"></it-icon-arrow-right>
       </router-link>
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
     <div
       v-if="icon"
       :class="[`bg-${icon}`]"
-      class="bg-contain bg-no-repeat bg-right w-2/6 -mr-8"
+      class="hidden lg:block bg-contain bg-no-repeat bg-right w-2/6 -mr-8"
     ></div>
   </div>
 </template>

client/src/pages/mediaLibrary/MLCategoryDetailPage.vue

@@ -52,27 +52,32 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
     <MLCategoryLayout>
       <template #header>
         <div class="flex justify-between">
-          <div class="w-5/12">
+          <div class="lg:w-6/12">
             <h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
             <h1 class="mb-4 lg:mb-8">{{ mediaCategory.title }}</h1>
-            <p>{{ mediaCategory.introduction_text }}</p>
+            <p class="text-xl">{{ mediaCategory.introduction_text }}</p>
+          </div>
+          <div>
+            <img
+              class="hidden lg:block float-right"
+              src="/static/icons/demo/category-large.png"
+            />
           </div>
-          <img class="w-5/12" :src="mediaCategory.icon" />
         </div>
       </template>
       <template #body>
-        <section class="mb-20">
+        <section class="mb-20 mt-8 lg:w-2/3">
           <h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
-          <p class="mb-4 lg:w-2/3">{{ mediaCategory.description_text }}</p>
+          <p class="mb-4">{{ mediaCategory.description_text }}</p>
           <ul>
             <li
               v-for="item in mediaCategory.items"
               :key="item"
-              class="mb-2 h-10 leading-10 flex items-center"
+              class="mb-2 flex items-center"
             >
-              <span
-                class="text-sky-500 bg-[url('/static/icons/icon-check.svg')] bg-no-repeat h-10 w-10 mr-2"
-              ></span>
+              <it-icon-check
+                class="h-8 w-8 text-sky-500 mr-4 flex-none"
+              ></it-icon-check>
               {{ item.value }}
             </li>
           </ul>

client/src/pages/mediaLibrary/MLCategoryIndexPage.vue

@@ -25,8 +25,8 @@ watch(dropdownSelected, (newValue) =>
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl">
-    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+  <div class="container-large">
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-10 mt-6">
       <h1>Handlungsfelder</h1>
       <!--      <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>

client/src/pages/mediaLibrary/MLCategoryLayout.vue

@@ -6,16 +6,24 @@ const router = useRouter();
 
 <template>
   <Teleport to="body">
-    <div class="px-16 fixed top-0 overflow-y-scroll bg-white h-full w-full">
-      <div class="-mx-16 pt-4 pb-24 px-16 mb-20 bg-gray-200">
-        <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 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>
-      <slot name="body"></slot>
     </div>
   </Teleport>
 </template>
@@ -24,6 +32,7 @@ const router = useRouter();
 .it-icon-hf {
   color: blue;
 }
+
 .it-icon-hf > * {
   @apply m-auto;
 }

client/src/pages/mediaLibrary/MLIndexPage.vue

@@ -26,8 +26,8 @@ watch(dropdownSelected, (newValue) =>
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl">
-    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+  <div class="container-large">
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-12 mt-6">
       <h1>Mediathek</h1>
       <!--      <ItDropdownSelect-->
       <!--        v-model="dropdownSelected"-->

client/src/pages/mediaLibrary/MLParentPage.vue

@@ -24,18 +24,18 @@ onMounted(async () => {
 
 <template>
   <div class="bg-gray-200">
-    <nav class="h-12 px-6 py-2 border-b border-gray-500 bg-white">
-      <ul class="flex">
+    <nav class="px-6 py-4 border-b border-gray-500 bg-white">
+      <ul class="flex text-xl flex-col lg:flex-row">
         <li>Übersicht</li>
-        <li class="ml-10">Handlungsfelder</li>
-        <li class="ml-10">Allgemeines zu Versicherungen</li>
-        <li class="ml-10">Lernmedien</li>
-        <li class="ml-10">
+        <li class="lg:ml-12">Handlungsfelder</li>
+        <li class="lg:ml-12">Allgemeines zu Versicherungen</li>
+        <li class="lg:ml-12">Lernmedien</li>
+        <li class="lg:ml-12">
           <a href="https://www.vbv.ch/de/der-vbv/lernen-lehren/lexikon">Lexikon</a>
         </li>
       </ul>
     </nav>
-    <main class="px-8 py-8">
+    <main>
       <router-view></router-view>
     </main>
   </div>