From bc881f2af1896f5f648d44ca75539f65b126fdf4 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Tue, 21 May 2024 21:10:44 +0200
Subject: [PATCH] subject styling

---
 .../subject/subjectview/body/SubjectBody.vue  | 59 -------------------
 .../body/projects/SubjectProjectPage.vue      | 27 +--------
 .../body/projects/SubjectProjectsPage.vue     |  4 +-
 .../projects/list/SubjectProjectsList.vue     |  4 +-
 .../subjectview/header/SubjectHeaderCard.vue  | 47 ++++++++++-----
 .../header/SubjectHeaderContainer.vue         | 31 +++++-----
 .../subjectview/header/SubjectHeaderImage.vue |  3 -
 frontend/src/views/subject/SubjectView.vue    | 14 +++--
 8 files changed, 62 insertions(+), 127 deletions(-)
 delete mode 100644 frontend/src/components/subject/subjectview/body/SubjectBody.vue

diff --git a/frontend/src/components/subject/subjectview/body/SubjectBody.vue b/frontend/src/components/subject/subjectview/body/SubjectBody.vue
deleted file mode 100644
index ff55f56b..00000000
--- a/frontend/src/components/subject/subjectview/body/SubjectBody.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <div class="tab-container">
-        <v-tabs v-model="tab" align-tabs="center" grow slider-color="#3F3BE1">
-            <v-tab
-                height="25px"
-                v-for="(item, index) in items"
-                :key="index"
-                :value="index"
-                :class="{ 'page-tab': true, active: index === tab }"
-                >{{ $t(`subject.${item}`) }}
-            </v-tab>
-        </v-tabs>
-    </div>
-
-    <v-window v-model="tab">
-        <v-window-item value="0" key="0">
-            <SubjectProjectsPage :projects="projects"></SubjectProjectsPage>
-        </v-window-item>
-        <v-window-item value="1" key="1">
-            <SubjectGroupsPage />
-        </v-window-item>
-    </v-window>
-</template>
-
-<script setup lang="ts">
-import SubjectProjectsPage from "@/components/subject/subjectview/body/projects/SubjectProjectsPage.vue";
-import SubjectGroupsPage from "@/components/subject/subjectview/body/groups/SubjectGroupsPage.vue";
-
-import { ref } from "vue";
-import type Project from "@/models/Project";
-
-defineProps<{
-    projects: Project[];
-}>();
-
-const items = ["projects", "groups"];
-const tab = ref(0);
-</script>
-
-<style scoped>
-
-
-.page-tab {
-    font-size: 16px;
-    font-weight: 500;
-    font-family: "Poppins", sans-serif;
-    text-transform: capitalize;
-    background-color: rgb(var(--v-theme-background));
-}
-
-.tab-container {
-    border-top-right-radius: 20px;
-    border-top-left-radius: 20px;
-    background-color: rgb(var(--v-theme-background));
-    padding-top: 16px;
-    height: 30px;
-    margin-bottom: 20px;
-}
-</style>
diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
index a039d150..b5c94b5a 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
@@ -17,12 +17,10 @@
                     </v-row>
                 </v-card-title>
             </router-link>
-
             <v-card-text class="d-block py-3 deadline">
                 <v-icon>mdi-alarm</v-icon>
                 {{ $d(project.deadline, "long") }}
             </v-card-text>
-
             <v-card-text>
                 <h2>{{ $t("subject.project.assignment") }}</h2>
                 <div
@@ -63,13 +61,6 @@
                 </v-card-actions>
             </div>
         </v-card>
-        <v-card class="project-card" variant="text">
-            <v-card-title class="card_title">{{ $t("subject.project.group") }}</v-card-title>
-        </v-card>
-
-        <v-card class="project-card" variant="text">
-            <v-card-title class="card_title">{{ $t("subject.project.submissions") }}</v-card-title>
-        </v-card>
     </div>
 </template>
 
@@ -97,13 +88,12 @@ const renderQuillContent = (content: string) => {
 .project_description {
     font-size: 14px;
     line-height: 1.5;
-    color: #333;
     margin-top: 10px;
     margin-left: 10px;
 }
 
 .project-card {
-    background-color: white;
+    background-color: rgb(var(--v-theme-background));
     padding: 20px;
     display: flex;
     flex-direction: column;
@@ -117,17 +107,13 @@ const renderQuillContent = (content: string) => {
     color: inherit;
 }
 
-.deadline {
-    color: #181818;
-}
-
 .colored-zone {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px; /* Adjust the height as needed */
-    background-color: var(--color-primary); /* Desired background color */
+    background-color: rgb(var(--v-theme-primary)); /* Desired background color */
     z-index: -1; /* Ensure the colored zone is behind the card content */
 }
 
@@ -141,15 +127,6 @@ const renderQuillContent = (content: string) => {
     text-transform: capitalize;
 }
 
-.card_title {
-    font-size: 24px;
-    text-transform: capitalize;
-    display: block;
-    line-height: 1.2;
-    font-weight: 500;
-    color: black;
-}
-
 .project-container {
     overflow: auto;
     max-height: 55vh;
diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
index b84a79ec..1c1b088b 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
@@ -20,7 +20,6 @@
                         :project="project"
                     ></SubjectProjectPage>
                 </v-window-item>
-
                 <v-window-item v-if="filteredProjects.length === 0" :key="'placeholder'">
                     <div class="placeholder">
                         <p>{{ $t("subject.projectsPage.no_projects") }}</p>
@@ -78,7 +77,8 @@ const updateFilterOption = (option: FilterOptions) => {
     justify-content: center;
     align-items: center;
     height: 400px; /* Adjust height as needed */
-    border: 1px solid #ccc;
+    border-radius: 3px;
+    background-color: rgb(var(--v-theme-background))
 }
 
 .placeholder p {
diff --git a/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
index ffc25f33..6ef81755 100644
--- a/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
@@ -9,7 +9,7 @@
                     v-for="(filter, index) in filterOptions"
                     :key="index"
                     :value="FilterOptions[filter]"
-                    color="primary"
+                    color="text"
                     variant="tonal"
                 >
                     {{ $t(`subject.projectsPage.${filter.toLowerCase()}`) }}
@@ -73,7 +73,7 @@ watch(activeButton, (newVal: string) => {
 
 <style scoped>
 .projects-card {
-    background-color: white;
+    background-color: rgb(var(--v-theme-background));
     padding: 20px;
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index 357fc056..11548ec0 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -1,14 +1,17 @@
 <template>
-    <v-card variant="text" class="title-card" height="165">
+    <v-card variant="text" class="title-card">
         <v-row>
-            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 11 : 12" class="scrollable-col">
-                <v-card-title class="title">
-                    <div class="scrollable">
-                        {{ title }}
-                    </div>
-                </v-card-title>
+            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 11 : 12">
+                <div class="icon">
+                    <SubjectIcon :role="role" size="xxx-large" class="subject-icon"></SubjectIcon>
+                    <v-card-title class="title">
+                        <div class="scrollable">
+                            {{ title }}
+                        </div>
+                    </v-card-title>
+                </div>
                 <v-card-text>
-                    <v-chip color="primary" variant="flat" label>
+                    <v-chip color="secondary" variant="flat" label class="academyyear">
                         {{
                             `${$t("subject.academy_year")} 20${academicYear}-20${academicYear + 1}`
                         }}
@@ -19,7 +22,7 @@
                             :key="instructor!.uid"
                             variant="outlined"
                             :color="instructor!.is_teacher ? `primary` : `green`"
-                            class="ma-1 instr-chip"
+                            :class="instructor!.is_teacher ? `ma-1 instr-chip-instructor` : `ma-1 instr-chip-assistent`"
                             exact
                         >
                             <v-icon
@@ -48,12 +51,15 @@
 import type User from "@/models/User";
 import useIsAdmin from "@/composables/useIsAdmin";
 import useIsTeacher from "@/composables/useIsTeacher";
+import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
+import {SubjectRole} from "@/models/Subject";
 
 defineProps<{
     title: string;
     academicYear: number;
     instructors: User[];
     isInstructor: boolean;
+    role: SubjectRole
 }>();
 
 const { isAdmin } = useIsAdmin();
@@ -64,12 +70,6 @@ const { isTeacher } = useIsTeacher();
 .title-card {
     background-color: rgb(var(--v-theme-background));
     padding: 20px;
-    overflow-y: auto;
-    scrollbar-width: none;
-}
-
-.title-card::-webkit-scrollbar {
-    display: none;
 }
 
 .scrollable {
@@ -99,4 +99,21 @@ const { isTeacher } = useIsTeacher();
     justify-content: flex-end;
     margin-top: 10px;
 }
+
+.instr-chip-instructor {
+    background-color: #DFE5F7;
+}
+
+.instr-chip-assistent {
+    background-color: #d0efd1;
+}
+
+.academyyear{
+    border-radius: 50px;
+    border: 1px solid rgb(var(--v-theme-text));
+}
+
+.icon {
+    display: flex;
+}
 </style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
index c3019e11..16cb6ece 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
@@ -1,24 +1,19 @@
 <template>
-    <v-row>
-        <v-col cols="4">
-            <SubjectHeaderImage :imagePath="imagePath" :role="userRole"></SubjectHeaderImage>
-        </v-col>
-        <v-col cols="8">
-            <SubjectHeaderCard
-                :title="title"
-                :academic-year="academicYear"
-                :instructors="instructors"
-                :isInstructor="isInstructor"
-            >
-            </SubjectHeaderCard>
-        </v-col>
-    </v-row>
+    <SubjectHeaderCard
+        :title="title"
+        :academic-year="academicYear"
+        :instructors="instructors"
+        :isInstructor="isInstructor"
+        :role="userRole"
+    >
+    </SubjectHeaderCard>
 </template>
 
 <script setup lang="ts">
 import SubjectHeaderCard from "@/components/subject/subjectview/header/SubjectHeaderCard.vue";
 import type User from "@/models/User";
 import SubjectHeaderImage from "@/components/subject/subjectview/header/SubjectHeaderImage.vue";
+import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
 import { SubjectRole } from "@/models/Subject";
 import { computed, toRefs } from "vue";
 
@@ -42,4 +37,10 @@ const userRole = computed(() => {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+
+.header {
+    display: flex;
+}
+
+</style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
index 9f5434d7..bc871c35 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
@@ -15,9 +15,6 @@ defineProps<{
 </script>
 
 <style scoped>
-.header-img {
-    height: 165px;
-}
 
 .subject-icon {
     position: absolute;
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 7bc59253..1d4dcbf0 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -2,7 +2,7 @@
     <div v-if="isError" class="v-container">
         <p>{{ $t("default.something-went-wrong") }}</p>
     </div>
-    <v-skeleton-loader v-else type="card" :loading="isLoading">
+    <v-skeleton-loader v-else type="card" :loading="isLoading"  >
         <v-row>
             <v-snackbar v-model="snackbar" timeout="3000" color="primary">
                 {{ $t("subject.register_link_button.snackbar") }}
@@ -12,7 +12,7 @@
                     </v-btn>
                 </template>
             </v-snackbar>
-            <v-col class="subjectcard">
+            <v-col class="col-sm-12 col-md-6 col-lg-8 subjectcard">
                 <v-row>
                     <v-col>
                         <SubjectHeaderContainer
@@ -29,7 +29,7 @@
                 </v-row>
                 <v-row>
                     <v-col>
-                        <SubjectBody v-if="subject" :projects="projects"></SubjectBody>
+                        <SubjectProjectsPage v-if="subject" :projects="projects"></SubjectProjectsPage>
                     </v-col>
                 </v-row>
             </v-col>
@@ -63,7 +63,7 @@ import {
 } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
-import SubjectBody from "@/components/subject/subjectview/body/SubjectBody.vue";
+import SubjectProjectsPage from "@/components/subject/subjectview/body/projects/SubjectProjectsPage.vue";
 import { useCurrentUserQuery } from "@/queries/User";
 import useIsTeacher from "@/composables/useIsTeacher";
 import useIsAdmin from "@/composables/useIsAdmin";
@@ -143,7 +143,7 @@ const { isTeacher } = useIsTeacher();
 <style scoped>
 
 .action-btn-container {
-    margin-top: 25px;
+    margin-top: 50px;
     margin-right: 25px;
 }
 
@@ -152,6 +152,7 @@ const { isTeacher } = useIsTeacher();
     margin-top: 50px;
     margin-left: 50px;
     margin-right: 10px;
+    margin-bottom: 50px;
     border-radius: 3px;
     padding: 20px;
 }
@@ -160,7 +161,8 @@ const { isTeacher } = useIsTeacher();
     background-color: rgb(var(--v-theme-primary));
     color: rgb(var(--v-theme-navtext));
     margin-bottom: 10px;
-    width: 500px;
+    width: 175px;
 }
 
+
 </style>