algemene styling van website

backend/README.md

@@ -68,7 +68,7 @@ DATABASE_URI="postgresql://username:password@localhost:5432/dbname"
 
 #### Run alembic to initialize the database
 ```sh
-alembic upgrade head
+alembic upgrade header
 ```
 
 You can find more info about alembic [here](alembic/README.md).

backend/alembic/README.md

@@ -25,7 +25,7 @@ and make adjustments if needed.
 #### Run a migration: this will upgrade the database schema to the most recent revision.
 
 ```sh
-alembic upgrade head
+alembic upgrade header
 ```
 
 #### Undo the most recent revision:

frontend/src/components/TitleContainer.vue

@@ -0,0 +1,35 @@
+<template>
+    <v-card class="title-card" variant="flat" color="primary">
+        <v-card-title class="title"> {{ title }}</v-card-title>
+        <slot></slot>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    title: string;
+}>();
+</script>
+
+<style scoped>
+.title-card {
+    padding: 30px;
+    color: white;
+}
+.title-card:after {
+    content: "";
+    background: url("@/assets/ugent_background.png") no-repeat center center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    opacity: 0.4;
+}
+
+.title {
+    font-size: 32px;
+    margin-bottom: 12px;
+}
+</style>

frontend/src/components/buttons/GroupButtons.vue

@@ -67,7 +67,7 @@ const { mutateAsync: removeGroup } = useDeleteGroupMutation();
 
 const joinGroupAndRedirect = async () => {
     await joinGroup({ groupId: group.value.id, projectId: project.value.id });
-    router.push(`/groups/${group.value.id}`);
+    router.push(`/submissions/${group.value.id}`);
 };
 
 const leaveGroupAndRedirect = async () => {

frontend/src/components/groups/GroupCard.vue

@@ -49,7 +49,7 @@ const amountOfMembers = computed(() => {
 });
 
 const toGroupPage = async () => {
-    router.push(`/groups/${group.value.id}`);
+    router.push(`/submissions/${group.value.id}`);
 };
 </script>
 

frontend/src/components/project/ProjectInfo.vue

@@ -58,10 +58,7 @@ const props = defineProps<{
 const { project, group, instructors, subject, user } = toRefs(props);
 
 const isTeacher = computed(
-    () =>
-        user.value.is_teacher ||
-        user.value.is_admin ||
-        instructors.value?.some((element) => element.uid == user.value.uid)
+    () => user.value.is_admin || instructors.value?.some((element) => element.uid == user.value.uid)
 );
 
 const renderQuillContent = (content: string) => {

frontend/src/components/project/ProjectMiniCard.vue

@@ -1,31 +1,27 @@
 <template>
-    <v-card variant="flat">
+    <v-card @click="toProject" variant="flat">
         <v-skeleton-loader :loading="isSubjectLoading" type="article">
-            <v-card-item>
+            <v-col cols="9">
                 <v-card-title>
                     {{ project?.name }}
                 </v-card-title>
                 <v-card-subtitle>
                     {{ subject?.name }}
                 </v-card-subtitle>
-            </v-card-item>
-            <v-card-text>
+            </v-col>
+            <v-col cols="3" class="deadline">
                 <b>{{ $t("project.deadline") }}:</b>
                 <p>{{ $d(project!.deadline, "long") }}</p>
-            </v-card-text>
+            </v-col>
         </v-skeleton-loader>
-        <v-card-actions>
-            <v-btn :to="`/project/${project.id}`">
-                {{ $t("project.details_button") }}
-            </v-btn>
-        </v-card-actions>
     </v-card>
 </template>
 
 <script setup lang="ts">
 import { useSubjectQuery } from "@/queries/Subject";
 import { computed, toRefs } from "vue";
 import type Project from "@/models/Project";
+import router from "@/router";
 
 const props = defineProps<{
     project: Project;
@@ -36,6 +32,10 @@ const { project } = toRefs(props);
 const { data: subject, isLoading: isSubjectLoading } = useSubjectQuery(
     computed(() => project.value.subject_id)
 );
+
+const toProject = async () => {
+    await router.push({ name: "project", params: { projectId: project.value.id } });
+};
 </script>
 
 <style scoped>

frontend/src/components/project/ProjectSideBar.vue

@@ -4,7 +4,7 @@
             {{ $t("project.to_subject") }}
         </v-btn>
     </router-link>
-    <router-link v-if="group && !isSoloProject && !isTeacher" :to="`/groups/${group!.id}`">
+    <router-link v-if="group && !isSoloProject && !isTeacher" :to="`/submissions/${group!.id}`">
         <v-btn class="group-button" prepend-icon="mdi-account-group">
             {{ $t("project.group", { number: group!.num }) }}
         </v-btn>
@@ -14,7 +14,7 @@
             {{ $t("project.group_button") }}
         </v-btn>
     </router-link>
-    <router-link v-else-if="isTeacher" :to="`/project/${project!.id}/groups`">
+    <router-link v-else-if="isTeacher && !isSoloProject" :to="`/project/${project!.id}/groups`">
         <v-btn class="group-button" prepend-icon="mdi-account-group">
             {{ $t("project.to_groups") }}
         </v-btn>
@@ -55,7 +55,10 @@ const isTeacher = computed(() => {
     if (!user.value || !instructors.value) {
         return false;
     }
-    return instructors.value.some((instructor) => instructor.uid === user.value.uid);
+    return (
+        user.value.is_admin ||
+        instructors.value.some((instructor) => instructor.uid === user.value.uid)
+    );
 });
 
 const isSoloProject = computed(() => project.value.capacity === 1);
@@ -64,7 +67,7 @@ const isSoloProject = computed(() => project.value.capacity === 1);
 <style scoped>
 .group-button {
     margin-bottom: 5px;
-    min-width: 150px;
+    width: 200px;
     background-color: rgb(var(--v-theme-primary));
     color: rgb(var(--v-theme-navtext));
 }

frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue

@@ -37,7 +37,7 @@ defineEmits<{
 
 <style scoped>
 .title-card {
-    background-color: var(--color-secondary);
+    background-color: rgb(var(--v-theme-secondary));
     padding: 20px;
 }
 
@@ -47,7 +47,6 @@ defineEmits<{
     display: block;
     line-height: 1.2;
     font-weight: 500;
-    color: black;
     word-wrap: break-word;
     white-space: normal;
     overflow: hidden;

frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue

@@ -30,7 +30,7 @@ defineEmits<{
 
 <style scoped>
 .title-card {
-    background-color: var(--color-secondary);
+    background-color: rgb(var(--v-theme-secondary));
     padding: 20px;
 }
 
@@ -40,6 +40,5 @@ defineEmits<{
     display: block;
     line-height: 1.2;
     font-weight: 500;
-    color: black;
 }
 </style>

frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue

@@ -3,7 +3,6 @@
         <v-card-title class="title">
             {{ $t("create_subject.new_subject") }}
         </v-card-title>
-
         <v-card-text>
             <v-text-field
                 v-model="subjectName"
@@ -36,7 +35,7 @@
                     <v-checkbox
                         :label="$t('create_subject.assign_self')"
                         v-model="checkbox"
-                        color="primary"
+                        color="text"
                         class="checkbox"
                     ></v-checkbox>
                 </v-col>
@@ -119,7 +118,7 @@ watch(subjectMail, (newValue) => {
 
 <style scoped>
 .title-card {
-    background-color: var(--color-secondary);
+    background-color: rgb(var(--v-theme-secondary));
     padding: 20px;
 }
 

frontend/src/components/subject/extra/SubjectIcon.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-icon color="white" :size="size">
+    <v-icon :size="size">
         {{ `mdi-${userRole}` }}
     </v-icon>
 </template>

frontend/src/components/subject/subjectsview/body/SubjectCard.vue

@@ -1,6 +1,6 @@
 <template>
     <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
-        <v-card class="subject-card" height="16vh" color="primary">
+        <v-card class="subject-card" height="16vh">
             <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
             <v-card-title class="subject-title">
                 {{ subject?.name }}
@@ -33,10 +33,12 @@ defineProps<{
     justify-content: space-between;
     position: relative;
     width: 100%;
+    background-color: rgb(var(--v-theme-secondary));
+    border-radius: 3px;
 }
 
 .subject-title {
-    color: white;
+    color: rgb(var(--v-theme-text));
     font-size: 3vh;
     position: absolute;
     bottom: 0;
@@ -46,5 +48,6 @@ defineProps<{
     position: absolute;
     top: 10px;
     right: 15px;
+    color: rgb(var(--v-theme-text));
 }
 </style>

frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue

@@ -1,41 +1,38 @@
 <template>
-    <v-card variant="text" class="title-card" width="100%">
-        <v-row>
-            <v-col>
-                <v-card-title class="title">
-                    {{ $t("subjects.title") }}
-                </v-card-title>
-
-                <v-card-text>
-                    <div class="chip-container">
-                        <v-chip-group mandatory v-model="activeAcademicYear" column>
-                            <v-chip
-                                v-for="(academicYear, index) in academicYears"
-                                :key="index"
-                                :value="academicYear"
-                                color="primary"
-                                class="ma-1"
-                                variant="tonal"
-                            >
-                                {{ `${academicYear}-${academicYear + 1}` }}
-                            </v-chip>
-                        </v-chip-group>
-                    </div>
-                </v-card-text>
-            </v-col>
-            <v-col v-if="isInstructor && isStudent" cols="6">
-                <v-checkbox
-                    class="subject-checkbox"
-                    v-model="showInstructorSubjects"
-                    :label="$t('subjects.instructor_subjects')"
-                ></v-checkbox>
-                <v-checkbox
-                    class="subject-checkbox"
-                    v-model="showStudentSubjects"
-                    :label="$t('subjects.student_subjects')"
-                ></v-checkbox>
-            </v-col>
-        </v-row>
+    <v-card variant="flat" class="title-card">
+        <div class="leftcontent">
+            <v-card-title class="title">
+                {{ $t("subjects.title") }}
+            </v-card-title>
+            <v-card-text>
+                <div class="chip-container">
+                    <v-chip-group mandatory v-model="activeAcademicYear" column>
+                        <v-chip
+                            v-for="(academicYear, index) in academicYears"
+                            :key="index"
+                            :value="academicYear"
+                            class="ma-1 chip"
+                            color="secondary"
+                            variant="flat"
+                        >
+                            {{ `${academicYear}-${academicYear + 1}` }}
+                        </v-chip>
+                    </v-chip-group>
+                </div>
+            </v-card-text>
+        </div>
+        <div v-if="isInstructor && isStudent">
+            <v-checkbox
+                class="subject-checkbox"
+                v-model="showInstructorSubjects"
+                :label="$t('subjects.instructor_subjects')"
+            ></v-checkbox>
+            <v-checkbox
+                class="subject-checkbox"
+                v-model="showStudentSubjects"
+                :label="$t('subjects.student_subjects')"
+            ></v-checkbox>
+        </div>
     </v-card>
 </template>
 
@@ -90,17 +87,26 @@ watch(activeSubjectFilter, (newVal: SubjectFilter | undefined) => {
 
 <style scoped>
 .title-card {
-    background-color: white;
+    position: relative;
+    display: flex;
     padding: 20px;
+    color: white;
+}
+.title-card:after {
+    content: "";
+    background: url("@/assets/ugent_background.png") no-repeat center center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    opacity: 0.4;
 }
 
 .title {
     font-size: 32px;
-    letter-spacing: -0.5px;
-    text-transform: capitalize;
-    font-weight: bold;
     margin-bottom: 12px;
-    font-family: "Poppins", sans-serif;
 }
 
 .chip-container {
@@ -110,4 +116,13 @@ watch(activeSubjectFilter, (newVal: SubjectFilter | undefined) => {
 .subject-checkbox {
     margin-top: -15px;
 }
+
+.chip {
+    color: rgb(var(--v-theme-text));
+    background-color: rgb(var(--v-theme-background));
+}
+
+.leftcontent {
+    max-width: 400px;
+}
 </style>