algemene styling van website (#226)

* style * style * temp * style * style * temp * more styling * testen * lint * format * styling * some styling en test fixes * backbuttons * subjects styling * subject styling * create project styling * create subjects styling * lint * format * format * requested changes * format * fix show group * more requested changes * small groups fix --------- Co-authored-by: Bram Reyniers <[email protected]>
SELab-2 · May 22, 2024 · 34d3314 · 34d3314
1 parent 9ee3b67
commit 34d3314
Show file tree

Hide file tree

Showing 44 changed files with 589 additions and 413 deletions.
diff --git a/frontend/src/assets/ugent_background.png b/frontend/src/assets/ugent_background.png
diff --git a/frontend/src/components/TitleContainer.vue b/frontend/src/components/TitleContainer.vue
@@ -0,0 +1,35 @@
+<template>
+    <v-card class="title-card" variant="flat" color="primary">
+        <v-card-title class="title"> {{ props.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>
diff --git a/frontend/src/components/buttons/GroupButtons.vue b/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 () => {

diff --git a/frontend/src/components/groups/GroupCard.vue b/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>
 

diff --git a/frontend/src/components/project/ProjectInfo.vue b/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) => {

diff --git a/frontend/src/components/project/ProjectMiniCard.vue b/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>

diff --git a/frontend/src/components/project/ProjectSideBar.vue b/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));
 }

diff --git a/frontend/src/components/project/RequirementsInput.vue b/frontend/src/components/project/RequirementsInput.vue
@@ -28,19 +28,21 @@
         </v-col>
     </v-row>
     <v-row v-for="(req, index) in internalRequirements" :key="index" class="align-center my-1">
-        <v-col cols="10">
+        <v-col cols="5">
             <v-chip class="me-2" color="blue" text-color="white">
                 {{ req.value }}
             </v-chip>
         </v-col>
-        <v-col cols="2" class="d-flex justify-space-between align-center">
+        <v-col cols="4" class="d-flex justify-space-between align-center">
             <v-switch
                 v-model="req.mandatory"
                 :label="req.mandatory ? $t('project.mandatory') : $t('project.forbidden')"
                 :color="req.mandatory ? 'green' : 'red'"
                 hide-details
                 inset
             ></v-switch>
+        </v-col>
+        <v-col cols="2">
             <v-btn icon="mdi-delete" @click="deleteRequirement(index)" />
         </v-col>
     </v-row>

diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/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;

diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/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>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/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;
 }
 

diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/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>

diff --git a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue b/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">
             <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
             <v-card-title class="subject-title">
                 {{ subject?.name }}
@@ -33,18 +33,19 @@ defineProps<{
     justify-content: space-between;
     position: relative;
     width: 100%;
+    height: 100px;
+    background-color: rgb(var(--v-theme-secondary));
+    border-radius: 3px;
 }
 
 .subject-title {
-    color: white;
-    font-size: 3vh;
-    position: absolute;
-    bottom: 0;
+    color: rgb(var(--v-theme-text));
 }
 
 .subject-icon {
     position: absolute;
-    top: 10px;
+    bottom: 10px;
     right: 15px;
+    color: rgb(var(--v-theme-text));
 }
 </style>