subject styling

SELab-2 · May 21, 2024 · bc881f2 · bc881f2
1 parent abd8de4
commit bc881f2
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 127 deletions.
diff --git a/frontend/src/components/subject/subjectview/body/SubjectBody.vue b/frontend/src/components/subject/subjectview/body/SubjectBody.vue
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>