projectspage theme and layout

SELab-2 · May 13, 2024 · 251dd11 · 251dd11
1 parent 73c3b94
commit 251dd11
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 37 deletions.
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
@@ -52,13 +52,12 @@ export default {
         needhelp_button: "Need help",
         group: "Group {number}",
         assignment: "Assignment:",
-        myProject: "My projects:",
+        myProject: "My projects",
         capacity_group: "Capacity: ",
         edit: "Edit project",
         submissions_list: "All submissions",
         not_found: "No projects found.",
-        archived: "Archived",
-        not_finished: "Not Finished",
+        finished: "Finished",
         not_found2: "Project not found",
         to_subject: "To subject",
     },

diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
@@ -52,13 +52,12 @@ export default {
         needhelp_button: "Hulp nodig",
         group: "Groep {number}",
         assignment: "Opdracht:",
-        myProject: "Mijn projecten:",
+        myProject: "Mijn projecten",
         capacity_group: "Capaciteit: ",
         edit: "Bewerk project",
         submissions_list: "Alle indieningen",
         not_found: "Geen projecten teruggevonden.",
-        archived: "Gearchiveerd",
-        not_finished: "Onafgewerkt",
+        finished: "Afgerond",
         not_found2: "Project niet teruggevonden",
         to_subject: "Naar vak",
     },

diff --git a/frontend/src/views/ProjectsView.vue b/frontend/src/views/ProjectsView.vue
@@ -1,30 +1,25 @@
 <template>
     <div>
-        <v-container>
-            <h1 v-if="isLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
-            <h1 v-else-if="isError || noProjectsFound" class="welcome">
-                {{ $t("project.not_found") }}
-            </h1>
-            <div v-else class="projectInfo">
-                <v-row class="rowheader">
-                    <h1>{{ $t("project.myProject") }}</h1>
-                    <v-btn-toggle v-model="activeButton">
-                        <v-btn value="notFinished" class="leftbuttonspace">{{
-                            $t("project.not_finished")
-                        }}</v-btn>
-                        <v-btn value="archived" class="leftbuttonspace">{{
-                            $t("project.archived")
-                        }}</v-btn>
-                    </v-btn-toggle>
-                </v-row>
-                <ProjectMiniCard
-                    v-for="project in filteredProjects"
-                    :key="project.id"
-                    :project="project"
-                    class="project-card"
-                />
+        <h1 v-if="isLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
+        <h1 v-else-if="isError || noProjectsFound" class="welcome">
+            {{ $t("project.not_found") }}
+        </h1>
+        <div v-else class="projectInfo">
+            <div class="rowheader">
+                <h1>{{ $t("project.myProject") }}</h1>
+                <v-btn-toggle v-model="activeButton" class="button">
+                    <v-btn value="finished">{{
+                        $t("project.finished")
+                    }}</v-btn>
+                </v-btn-toggle>
             </div>
-        </v-container>
+            <ProjectMiniCard
+                v-for="project in filteredProjects"
+                :key="project.id"
+                :project="project"
+                class="project-card"
+            />
+        </div>
     </div>
 </template>
 
@@ -51,12 +46,10 @@ const filteredProjects = computed(() => {
         );
 
     switch (activeButton.value) {
-        case "archived":
+        case "finished":
             return sortedProjects.filter((project: Project) => new Date(project.deadline) < now);
-        case "notFinished":
-            return sortedProjects.filter((project: Project) => new Date(project.deadline) > now);
         default:
-            return sortedProjects;
+            return sortedProjects.filter((project: Project) => new Date(project.deadline) > now);
     }
 });
 </script>
@@ -68,13 +61,20 @@ const filteredProjects = computed(() => {
 
 .projectInfo {
     padding: 10px;
+    margin: 25px;
 }
 
 .rowheader {
-    padding: 10px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+
 }
 
-.leftbuttonspace {
-    margin-left: 10px;
+.button {
+    height: 30px;
+    margin-top: 10px;
+    margin-left: 75px;
+    border: 1px solid rgb(var(--v-theme-text))
 }
 </style>