Refactor some layouts

client/src/components/learningPath/LearningContent.vue

@@ -55,8 +55,6 @@ const block = computed(() => {
     </div>
 
     <div v-else class="container-medium">
-      <p>{{ block.value.description }}</p>
-
       <div v-if="block.type === 'video'">
         <iframe
           class="mt-8 w-full aspect-video"
@@ -69,11 +67,21 @@ const block = computed(() => {
         </iframe>
       </div>
 
-      <p v-else-if="block.type === 'media_library'" class="mt-4">
+      <div v-else-if="block.type === 'media_library'" class="mt-4 lg:mt-12">
+        <h1>{{ learningContent.title }}</h1>
+
+        <p class="text-xl my-4 lg:my-8">{{ block.value.description }}</p>
         <a :href="block.value.url" target="_blank" class="button btn-primary">
-          {{ learningContent.title }}
+          Mediathek öffnen
         </a>
-      </p>
+      </div>
+
+      <div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12">
+        <p class="text-xl my-4">{{ block.value.description }}</p>
+        <h1>{{ learningContent.title }}</h1>
+      </div>
+
+      <div v-else class="text-xl my-4">{{ block.value.description }}</div>
     </div>
   </div>
 </template>

client/src/components/learningPath/SelfEvaluation.vue

@@ -50,7 +50,7 @@ function handleContinue() {
       <button type="button" class="btn-blue" @click="handleContinue()">Weiter</button>
     </nav>
 
-    <div class="mx-auto max-w-6xl px-4 lg:px-8 py-4">
+    <div class="container-medium">
       <div class="mt-2 lg:mt-8 text-gray-700">
         Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}
       </div>

client/src/pages/CockpitPage.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useUserStore } from "@/stores/user";
+import * as log from "loglevel";
+
+log.debug("CockpitView created");
+
+const userStore = useUserStore();
+</script>
+
+<template>
+  <main class="px-8 py-8 lg:px-12 lg:py-12 bg-gray-200">
+    <div class="container-medium">
+      <h1 data-cy="welcome-message">Willkommen, {{ userStore.first_name }}</h1>
+
+      <h2 class="mt-12">Deine Kurse</h2>
+
+      <div class="mt-8 p-8 break-words bg-white max-w-xl">
+        <h3>Versicherungsvermittler/in</h3>
+        <div class="mt-4">
+          <router-link class="btn-blue" to="/learn/versicherungsvermittlerin-lp">
+            Weiter geht's
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<style scoped></style>

client/src/pages/CockpitView.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { useUserStore } from "@/stores/user";
-import * as log from "loglevel";
-
-log.debug("CockpitView created");
-
-const userStore = useUserStore();
-</script>
-
-<template>
-  <main class="px-8 py-8 lg:px-12 lg:py-12 bg-gray-200">
-    <h1 data-cy="welcome-message">Willkommen, {{ userStore.first_name }}</h1>
-
-    <h2 class="mt-12">Deine Kurse</h2>
-
-    <div class="mt-8 p-8 break-words bg-white max-w-xl">
-      <h3>Versicherungsvermittler/in</h3>
-      <div class="mt-4">
-        <router-link class="btn-blue" to="/learn/versicherungsvermittlerin-lp">
-          Weiter geht's
-        </router-link>
-      </div>
-    </div>
-  </main>
-</template>
-
-<style scoped></style>

client/src/pages/LoginPage.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useUserStore } from "@/stores/user";
+import * as log from "loglevel";
+import { reactive } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+log.debug("LoginView.vue created");
+log.debug(route.query);
+
+const state = reactive({
+  username: "",
+  password: "",
+});
+
+const userStore = useUserStore();
+</script>
+
+<template>
+  <main class="px-8 py-8 lg:px-12 lg:py-12 bg-gray-200">
+    <div class="container-medium">
+      <h1 class="mb-8">Login</h1>
+
+      <form
+        class="bg-white p-4 lg:p-8"
+        @submit.prevent="
+          userStore.handleLogin(state.username, state.password, route.query.next)
+        "
+      >
+        <div class="mb-4">
+          <label class="block mb-1" for="email">Username</label>
+          <input
+            id="username"
+            v-model="state.username"
+            type="text"
+            name="username"
+            class="py-2 px-3 border border-gray-500 mt-1 block w-96"
+          />
+        </div>
+        <div class="mb-4">
+          <label class="block mb-1" for="password">Password</label>
+          <input
+            id="password"
+            v-model="state.password"
+            type="password"
+            name="password"
+            class="py-2 px-3 border border-gray-500 mt-1 block w-96"
+          />
+        </div>
+
+        <div>
+          <input
+            data-cy="login-button"
+            type="submit"
+            value="Login"
+            class="btn-primary"
+          />
+        </div>
+      </form>
+      <p class="pt-8"><a href="/sso/login/">Login mit SSO</a></p>
+    </div>
+  </main>
+</template>
+
+<style scoped></style>

client/src/pages/LoginView.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { useUserStore } from "@/stores/user";
-import * as log from "loglevel";
-import { reactive } from "vue";
-import { useRoute } from "vue-router";
-
-const route = useRoute();
-
-log.debug("LoginView.vue created");
-log.debug(route.query);
-
-const state = reactive({
-  username: "",
-  password: "",
-});
-
-const userStore = useUserStore();
-</script>
-
-<template>
-  <main class="px-8 py-8">
-    <h1>Login</h1>
-
-    <form
-      @submit.prevent="
-        userStore.handleLogin(state.username, state.password, route.query.next)
-      "
-    >
-      <div class="mt-8 mb-4">
-        <label class="block mb-1" for="email">Username</label>
-        <input
-          id="username"
-          v-model="state.username"
-          type="text"
-          name="username"
-          class="py-2 px-3 border border-gray-500 mt-1 block w-96"
-        />
-      </div>
-      <div class="mb-4">
-        <label class="block mb-1" for="password">Password</label>
-        <input
-          id="password"
-          v-model="state.password"
-          type="password"
-          name="password"
-          class="py-2 px-3 border border-gray-500 mt-1 block w-96"
-        />
-      </div>
-
-      <div>
-        <input data-cy="login-button" type="submit" value="Login" class="btn-primary" />
-      </div>
-    </form>
-    <p class="pt-8"><a href="/sso/login/">Login mit SSO</a></p>
-  </main>
-</template>
-
-<style scoped></style>

client/src/pages/learningPath/LearningPathPage.vue

@@ -6,7 +6,7 @@ import { useUserStore } from "@/stores/user";
 import { onMounted } from "vue";
 
 import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
-import LearningPathViewVertical from "@/pages/LearningPathViewVertical.vue";
+import LearningPathViewVertical from "@/components/learningPath/LearningPathViewVertical.vue";
 import type { LearningPath } from "@/services/learningPath";
 
 log.debug("LearningPathView created");
@@ -74,42 +74,43 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
           ></LearningPathDiagram>
         </div>
 
-        <h1 data-cy="learning-path-title" class="m-6 lg:m-12">
-          {{ learningPathStore.learningPath.title }}
-        </h1>
-
-        <div
-          class="bg-white m-6 lg:m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
-        >
-          <div class="p-4 lg:p-8 flex-auto">
-            <h2>Willkommmen zurück, {{ userStore.first_name }}</h2>
-            <p class="mt-4 text-xl"></p>
-          </div>
+        <div class="container-large">
+          <h1 data-cy="learning-path-title" class="mt-6 lg:mt-12 mb-6">
+            {{ learningPathStore.learningPath.title }}
+          </h1>
           <div
-            v-if="learningPathStore.learningPath.nextLearningContent"
-            class="p-4 lg:p-8 flex-2"
+            class="bg-white p-4 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
           >
-            Nächster Schritt
-            <h3>
-              {{
-                learningPathStore.learningPath.nextLearningContent.parentCircle.title
-              }}:
-              {{
-                learningPathStore.learningPath.nextLearningContent
-                  .parentLearningSequence?.title
-              }}
-            </h3>
-            <router-link
-              class="mt-4 btn-blue"
-              :to="createContinueUrl(learningPathStore.learningPath)[0]"
-              data-cy="lp-continue-button"
-              translate
+            <div class="p-4 lg:p-8 flex-auto">
+              <h2>Willkommmen zurück, {{ userStore.first_name }}</h2>
+              <p class="mt-4 text-xl"></p>
+            </div>
+            <div
+              v-if="learningPathStore.learningPath.nextLearningContent"
+              class="p-4 lg:p-8 flex-2"
             >
-              <span v-if="createContinueUrl(learningPathStore.learningPath)[1]">
-                Los geht's
-              </span>
-              <span v-else>Weiter geht's</span>
-            </router-link>
+              Nächster Schritt
+              <h3>
+                {{
+                  learningPathStore.learningPath.nextLearningContent.parentCircle.title
+                }}:
+                {{
+                  learningPathStore.learningPath.nextLearningContent
+                    .parentLearningSequence?.title
+                }}
+              </h3>
+              <router-link
+                class="mt-4 btn-blue"
+                :to="createContinueUrl(learningPathStore.learningPath)[0]"
+                data-cy="lp-continue-button"
+                translate
+              >
+                <span v-if="createContinueUrl(learningPathStore.learningPath)[1]">
+                  Los geht's
+                </span>
+                <span v-else>Weiter geht's</span>
+              </router-link>
+            </div>
           </div>
         </div>
         <div class="topic"></div>

client/src/router/index.ts

@@ -1,5 +1,5 @@
-import CockpitView from "@/pages/CockpitView.vue";
-import LoginView from "@/pages/LoginView.vue";
+import CockpitView from "@/pages/CockpitPage.vue";
+import LoginView from "@/pages/LoginPage.vue";
 import { redirectToLoginIfRequired, updateLoggedIn } from "@/router/guards";
 import { useAppStore } from "@/stores/app";
 import { createRouter, createWebHistory } from "vue-router";
@@ -20,10 +20,6 @@ const router = createRouter({
       name: "home",
       component: CockpitView,
     },
-    {
-      path: "/shop",
-      component: () => import("@/pages/ShopView.vue"),
-    },
     {
       path: "/media/:mediaLibraryPageSlug",
       props: true,
@@ -49,37 +45,41 @@ const router = createRouter({
         },
       ],
     },
-    {
-      path: "/messages",
-      component: () => import("@/pages/MessagesView.vue"),
-    },
-    {
-      path: "/profile",
-      component: () => import("@/pages/ProfileView.vue"),
-    },
     {
       path: "/learn/:learningPathSlug",
-      component: () => import("../pages/LearningPathView.vue"),
+      component: () => import("../pages/learningPath/LearningPathPage.vue"),
       props: true,
     },
     {
       path: "/learn/:learningPathSlug/:circleSlug",
-      component: () => import("../pages/CircleView.vue"),
+      component: () => import("../pages/learningPath/CirclePage.vue"),
       props: true,
     },
     {
       path: "/learn/:learningPathSlug/:circleSlug/evaluate/:learningUnitSlug",
-      component: () => import("../pages/LearningUnitSelfEvaluationView.vue"),
+      component: () => import("../pages/learningPath/SelfEvaluationPage.vue"),
       props: true,
     },
     {
       path: "/learn/:learningPathSlug/:circleSlug/:contentSlug",
-      component: () => import("../pages/LearningContentView.vue"),
+      component: () => import("../pages/learningPath/LearningContentPage.vue"),
       props: true,
     },
+    {
+      path: "/shop",
+      component: () => import("@/pages/ShopPage.vue"),
+    },
+    {
+      path: "/messages",
+      component: () => import("@/pages/MessagesPage.vue"),
+    },
+    {
+      path: "/profile",
+      component: () => import("@/pages/ProfilePage.vue"),
+    },
     {
       path: "/styleguide",
-      component: () => import("../pages/StyleGuideView.vue"),
+      component: () => import("../pages/StyleGuidePage.vue"),
       meta: {
         public: true,
       },

client/tailwind.css

@@ -60,11 +60,11 @@ svg {
   }
 
   .container-medium {
-    @apply mx-auto max-w-5xl px-4 lg:px-8 py-4;
+    @apply mx-auto max-w-5xl w-full px-4 lg:px-8 py-4;
   }
 
   .container-large {
-    @apply mx-auto max-w-9xl px-4 lg:px-8 py-4;
+    @apply mx-auto max-w-6xl w-full px-4 lg:px-8 py-4;
   }
 }