From fe0ed2cac6e420cf40324d70133d0993de0d6bc3 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Wed, 22 May 2024 13:48:12 +0200
Subject: [PATCH] requested changes

---
 backend/README.md                             |  2 +-
 backend/alembic/README.md                     |  2 +-
 frontend/src/components/TitleContainer.vue    |  2 +-
 .../components/project/RequirementsInput.vue  |  6 ++-
 .../subject/subjectsview/body/SubjectCard.vue |  4 +-
 .../header/SubjectHeaderContainer.vue         |  6 +--
 frontend/src/views/GroupsView.vue             | 28 ++++++++--
 frontend/src/views/subject/SubjectView.vue    | 53 +++++++++++--------
 frontend/src/views/subject/SubjectsView.vue   | 19 +++----
 9 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/backend/README.md b/backend/README.md
index d6820ded..84355101 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -68,7 +68,7 @@ DATABASE_URI="postgresql://username:password@localhost:5432/dbname"
 
 #### Run alembic to initialize the database
 ```sh
-alembic upgrade header
+alembic upgrade head
 ```
 
 You can find more info about alembic [here](alembic/README.md).
diff --git a/backend/alembic/README.md b/backend/alembic/README.md
index 387500d8..d5cbbb71 100644
--- a/backend/alembic/README.md
+++ b/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 header
+alembic upgrade head
 ```
 
 #### Undo the most recent revision:
diff --git a/frontend/src/components/TitleContainer.vue b/frontend/src/components/TitleContainer.vue
index 15ff3ff5..5798864b 100644
--- a/frontend/src/components/TitleContainer.vue
+++ b/frontend/src/components/TitleContainer.vue
@@ -1,6 +1,6 @@
 <template>
     <v-card class="title-card" variant="flat" color="primary">
-        <v-card-title class="title"> {{ title }}</v-card-title>
+        <v-card-title class="title"> {{ props.title }}</v-card-title>
         <slot></slot>
     </v-card>
 </template>
diff --git a/frontend/src/components/project/RequirementsInput.vue b/frontend/src/components/project/RequirementsInput.vue
index 4edfcf39..d1ad07de 100644
--- a/frontend/src/components/project/RequirementsInput.vue
+++ b/frontend/src/components/project/RequirementsInput.vue
@@ -28,12 +28,12 @@
         </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')"
@@ -41,6 +41,8 @@
                 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/subjectsview/body/SubjectCard.vue b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
index 5a9e1b26..3f237973 100644
--- a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
@@ -40,13 +40,11 @@ defineProps<{
 .subject-title {
     color: rgb(var(--v-theme-text));
     font-size: 3vh;
-    position: absolute;
-    bottom: 0;
 }
 
 .subject-icon {
     position: absolute;
-    top: 10px;
+    bottom: 10px;
     right: 15px;
     color: rgb(var(--v-theme-text));
 }
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
index 1dc333a7..7f0a6e70 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
@@ -12,8 +12,6 @@
 <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";
 
@@ -38,7 +36,5 @@ const userRole = computed(() => {
 </script>
 
 <style scoped>
-.header {
-    display: flex;
-}
+
 </style>
diff --git a/frontend/src/views/GroupsView.vue b/frontend/src/views/GroupsView.vue
index 875ce88f..9824ab2a 100644
--- a/frontend/src/views/GroupsView.vue
+++ b/frontend/src/views/GroupsView.vue
@@ -2,8 +2,8 @@
     <v-container>
         <h1 v-if="isDataLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
         <h1 v-else-if="isDataError" class="welcome">{{ $t("group.error") }}</h1>
-        <v-row v-else class="projectInfo">
-            <v-col cols="10">
+        <v-row v-else class="projectinfo">
+            <v-col class="col-sm-12 col-md-6">
                 <h2>{{ "Project: " + project!.name }}</h2>
                 <StudentsDialog :students="allStudents" :title="$t('group.all_students')" />
                 <v-divider class="border-opacity-50"></v-divider>
@@ -32,7 +32,7 @@
                     $t("group.create_group")
                 }}</v-btn>
             </v-col>
-            <v-col cols="2">
+            <v-col cols="2" class="buttoncontainer">
                 <BackButton
                     title="project.to_project"
                     :destination="`/project/${projectId}`"
@@ -133,6 +133,7 @@ async function createGroup() {
 <style scoped>
 .v-container {
     padding: 25px;
+    position: relative;
 }
 
 .group-card {
@@ -150,4 +151,25 @@ async function createGroup() {
 .backbutton {
     margin: 25px;
 }
+
+.buttoncontainer{
+    min-width: 200px;
+}
+@media (max-width: 900px) {
+    .backbutton {
+        margin-right: 0;
+    }
+
+    .buttoncontainer {
+        z-index: 10;
+        position: absolute;
+        right: 20px;
+        top: 10px;
+    }
+
+    .projectinfo{
+        position: relative;
+    }
+}
+
 </style>
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 5372c146..6db57b44 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -12,7 +12,7 @@
                     </v-btn>
                 </template>
             </v-snackbar>
-            <v-col class="col-sm-12 col-md-6 col-lg-8 subjectcard">
+            <v-col class="col-sm-12 col-md-6 subjectcard">
                 <v-row>
                     <v-col>
                         <SubjectHeaderContainer
@@ -36,21 +36,19 @@
                     </v-col>
                 </v-row>
             </v-col>
-            <v-col v-if="isAdmin || isInstructor" cols="2">
-                <div class="action-btn-container">
-                    <router-link :to="{ name: 'create-project', params: { subjectId: subjectId } }">
-                        <v-btn prepend-icon="mdi-plus-circle" class="button">
-                            {{ $t("subject.create_project") }}
-                        </v-btn>
-                    </router-link>
-                    <RegisterLinkButton
-                        v-if="isAdmin || isTeacher"
-                        :subjectId="subjectId"
-                        @register-link-btn-pressed="snackbar = true"
-                        @is-uuid-error="isUuidError = true"
-                        class="button"
-                    ></RegisterLinkButton>
-                </div>
+            <v-col v-if="isAdmin || isInstructor" cols="2" class="action-btn-container">
+                <router-link :to="{ name: 'create-project', params: { subjectId: subjectId } }">
+                    <v-btn prepend-icon="mdi-plus-circle" class="button">
+                        {{ $t("subject.create_project") }}
+                    </v-btn>
+                </router-link>
+                <RegisterLinkButton
+                    v-if="isAdmin || isTeacher"
+                    :subjectId="subjectId"
+                    @register-link-btn-pressed="snackbar = true"
+                    @is-uuid-error="isUuidError = true"
+                    class="button"
+                ></RegisterLinkButton>
             </v-col>
         </v-row>
     </v-skeleton-loader>
@@ -146,14 +144,27 @@ const { isTeacher } = useIsTeacher();
 .action-btn-container {
     margin-top: 50px;
     margin-right: 25px;
+    min-width: 200px;
+    margin-left: 25px;
+}
+
+@media (max-width: 900px) {
+    .action-btn-container {
+        display: flex;
+        order: -1;
+        margin-top: 50px;
+        margin-bottom: -30px;
+        width: 100%;
+        margin-left: 50px;
+    }
+    .button {
+        margin-right: 10px;
+    }
 }
 
 .subjectcard {
     background-color: rgb(var(--v-theme-secondary));
-    margin-top: 50px;
-    margin-left: 50px;
-    margin-right: 10px;
-    margin-bottom: 50px;
+    margin: 50px 50px 50px 50px;
     border-radius: 3px;
     padding: 20px;
 }
@@ -162,6 +173,6 @@ const { isTeacher } = useIsTeacher();
     background-color: rgb(var(--v-theme-primary));
     color: rgb(var(--v-theme-navtext));
     margin-bottom: 10px;
-    width: 175px;
+    width: 200px;
 }
 </style>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 9d264950..0b81a5e2 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -4,7 +4,7 @@
     </div>
     <v-skeleton-loader v-else type="card" :loading="isLoading">
         <v-row class="subjectsview">
-            <v-col :cols="isAdmin || isTeacher ? 10 : 12">
+            <v-col class="col-sm-12 col-md-6">
                 <v-card variant="flat">
                     <v-row>
                         <v-col>
@@ -36,14 +36,12 @@
                     </v-row>
                 </v-card>
             </v-col>
-            <v-col v-if="isAdmin || isTeacher" cols="2">
-                <div class="action-btn-container">
-                    <router-link :to="{ name: 'create-subject' }">
-                        <v-btn prepend-icon="mdi-plus-circle" class="button">
-                            {{ $t("subjects.create_subject") }}
-                        </v-btn>
-                    </router-link>
-                </div>
+            <v-col v-if="isAdmin || isTeacher" cols="2" class="action-btn-container">
+                <router-link :to="{ name: 'create-subject' }">
+                    <v-btn prepend-icon="mdi-plus-circle" class="button">
+                        {{ $t("subjects.create_subject") }}
+                    </v-btn>
+                </router-link>
             </v-col>
         </v-row>
     </v-skeleton-loader>
@@ -127,6 +125,7 @@ const onAcademicYearChanged = (academicYear: number) => {
 <style scoped>
 .action-btn-container {
     margin-top: 30px;
+    min-width: 200px;
 }
 
 .no-results {
@@ -136,6 +135,7 @@ const onAcademicYearChanged = (academicYear: number) => {
 .subjectsview {
     margin-left: 40px;
     margin-top: 30px;
+    margin-right: 40px;
     background-color: rgb(var(--v-theme-background));
 }
 
@@ -148,5 +148,6 @@ const onAcademicYearChanged = (academicYear: number) => {
 .button {
     background-color: rgb(var(--v-theme-primary));
     color: white;
+    width: 200px;
 }
 </style>