aboutpage layout + testen

frontend/src/i18n/locales/en.ts

@@ -126,4 +126,10 @@ export default {
         all_students: "All students",
         all_students_course: "All students in course:",
     },
+    about: {
+        about: "About this project",
+        p_1: "This project was made as part of the course",
+        p_2: "The source code is publicly available at",
+        developers: "Our developers",
+    },
 };

frontend/src/i18n/locales/nl.ts

@@ -127,4 +127,10 @@ export default {
         all_students: "Alle studenten",
         all_students_course: "Alle studenten in vak:",
     },
+    about: {
+        about: "Over dit project",
+        p_1: "Dit project is gemaakt in het kader van het vak",
+        p_2: "De broncode is publiek beschikbaar op",
+        developers: "Onze developers",
+    },
 };

frontend/src/views/AboutView.vue

@@ -1,18 +1,20 @@
 <template>
-    <div>
-        <h1>Over dit project</h1>
-        <p>
-            Dit project is gemaakt in het kader van het vak
-            <a href="https://studiekiezer.ugent.be/2023/studiefiche/nl/C003784">
-                Software Engineering Lab 2 </a
-            >. De broncode is publiek beschikbaar op
-            <a href="https://github.com/SELab-2/UGent-5"> GitHub </a>.
-        </p>
-        <h2>Onze Developers:</h2>
+    <div class="info">
+        <div class="about">
+            <h1>{{ $t("about.about") }}</h1>
+            <p>
+                {{ $t("about.p_1") }}
+                <a href="https://studiekiezer.ugent.be/2023/studiefiche/nl/C003784" class="link">
+                    Software Engineering Lab 2 </a
+                >. {{ $t("about.p_2") }}
+                <a href="https://github.com/SELab-2/UGent-5" class="link"> GitHub </a>.
+            </p>
+        </div>
+        <h2>{{ $t("about.developers") }}:</h2>
         <v-list lines="one">
-            <v-list-item v-for="developer in developers" :key="developer.name">
+            <v-list-item v-for="developer in developers" :key="developer.name" class="developers">
                 <template v-slot:title>
-                    <v-btn :href="developer.githubUrl">{{ developer.name }}</v-btn>
+                    <v-btn :href="developer.githubUrl" variant="flat">{{ developer.name }}</v-btn>
                 </template>
                 <template v-slot:subtitle>
                     {{ developer.role }}
@@ -30,7 +32,7 @@ interface Developer {
 }
 const developers: Developer[] = [
     {
-        role: "Projectleider",
+        role: "Project Lead",
         name: "Marieke Sinnaeve",
         githubUrl: "https://github.com/masinnae",
     },
@@ -66,3 +68,26 @@ const developers: Developer[] = [
     },
 ];
 </script>
+<style scoped>
+.info {
+    padding: 30px;
+}
+
+.link {
+    color: rgb(var(--v-theme-text));
+}
+
+.about {
+    margin-bottom: 25px;
+}
+
+.v-btn {
+    background-color: rgb(var(--v-theme-secondary));
+}
+
+.developers {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+</style>

frontend/tests/views/AboutView.spec.ts

@@ -0,0 +1,15 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it} from "vitest";
+import AboutView from "../../src/views/AboutView.vue"
+
+
+describe("About view", () => {
+    const wrapper = mount(AboutView, {});
+    it("renders title", () => {
+       expect(wrapper.text()).toContain("Over dit project")
+    });
+    it("render developers", () => {
+        const items = wrapper.findAllComponents(".developers")
+        expect(items.length).toBe(7)
+    });
+});