src/components/admin/management/version/VersionItem.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <p>
+      <span class="font-semibold text-lg">{{ version.title }}</span> vom
+      {{
+        new Date(version.isoDate).toLocaleDateString("de", {
+          month: "2-digit",
+          day: "2-digit",
+          year: "numeric",
+        })
+      }}
+    </p>
+    <div class="versionDisplay flex flex-col" v-html="version['content:encoded']"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Release } from "@/viewmodels/version.models";
+import { defineComponent, type PropType } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    version: {
+      type: Object as PropType<Release>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style lang="css" scoped>
+@reference "@/main.css";
+
+.versionDisplay :deep() ul {
+  list-style: none;
+  padding-left: 10px;
+  padding-bottom: 5px;
+}
+
+.versionDisplay :deep() ul li::before {
+  content: "-";
+  margin-right: 10px;
+  color: black;
+  font-weight: 600;
+}
+
+.versionDisplay :deep() a {
+  @apply text-primary;
+}
+</style>

src/views/admin/management/version/VersionDisplay.vue

@@ -11,7 +11,7 @@
               </small>
             </h1>
             <p>
-              V{{ clientVersion }} ({{
+              {{ clientVersion }} ({{
                 new Date(clientVersionRelease).toLocaleDateString("de", {
                   month: "2-digit",
                   day: "2-digit",
@@ -23,19 +23,7 @@
             </p>
           </div>
           <div class="grow flex flex-col gap-4 overflow-y-scroll">
-            <div v-for="version in newerClientVersions">
+            <VersionItem v-for="version in newerClientVersions" :key="version.title" :version="version" />
-              <p>
-                <span class="font-semibold text-lg">V{{ version.title }}</span> vom
-                {{
-                  new Date(version.isoDate).toLocaleDateString("de", {
-                    month: "2-digit",
-                    day: "2-digit",
-                    year: "numeric",
-                  })
-                }}
-              </p>
-              <div class="flex flex-col" v-html="version['content:encoded']"></div>
-            </div>
             <div v-if="newerClientVersions.length == 0" class="flex items-center justify-center">
               <p>Der Client ist auf der neuesten Version.</p>
             </div>
@@ -50,7 +38,7 @@
               </small>
             </h1>
             <p>
-              V{{ serverVersion }} ({{
+              {{ serverVersion }} ({{
                 new Date(serverVersionRelease).toLocaleDateString("de", {
                   month: "2-digit",
                   day: "2-digit",
@@ -61,20 +49,8 @@
               }})
             </p>
           </div>
-          <div class="grow flex flex-col gap-2 overflow-y-scroll">
+          <div class="grow flex flex-col gap-4 overflow-y-scroll">
-            <div v-for="version in newerServerVersions">
+            <VersionItem v-for="version in newerServerVersions" :key="version.title" :version="version" />
-              <p>
-                <span class="font-semibold text-lg">V{{ version.title }}</span> vom
-                {{
-                  new Date(version.isoDate).toLocaleDateString("de", {
-                    month: "2-digit",
-                    day: "2-digit",
-                    year: "numeric",
-                  })
-                }}
-              </p>
-              <div class="flex flex-col" v-html="version['content:encoded']"></div>
-            </div>
             <div v-if="newerServerVersions.length == 0" class="flex items-center justify-center">
               <p>Der Server ist auf der neuesten Version.</p>
             </div>
@@ -90,6 +66,7 @@ import { defineComponent } from "vue";
 import MainTemplate from "@/templates/Main.vue";
 import clientPackage from "../../../../../package.json";
 import type { Releases } from "@/viewmodels/version.models";
+import VersionItem from "@/components/admin/management/version/VersionItem.vue";
 </script>
 
 <script lang="ts">