From 4bc9d29de70152acc3769be0fd5fb2ebb076adce Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Sat, 19 Apr 2025 14:21:27 +0200
Subject: [PATCH] style: responsive

---
 frontend/src/views/classes/SingleClass.vue    |  32 ++++-
 frontend/src/views/classes/TeacherClasses.vue | 129 +++++++++++-------
 2 files changed, 110 insertions(+), 51 deletions(-)

diff --git a/frontend/src/views/classes/SingleClass.vue b/frontend/src/views/classes/SingleClass.vue
index 30bbb141..c6b12ee9 100644
--- a/frontend/src/views/classes/SingleClass.vue
+++ b/frontend/src/views/classes/SingleClass.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
     import { useI18n } from "vue-i18n";
     import authState from "@/services/auth/auth-service.ts";
-    import { onMounted, ref } from "vue";
+    import { onMounted, ref, watchEffect } from "vue";
     import { useRoute } from "vue-router";
     import type { ClassResponse } from "@/controllers/classes";
     import type { JoinRequestsResponse, StudentsResponse } from "@/controllers/students";
@@ -12,6 +12,7 @@
     import { useClassDeleteStudentMutation, useClassQuery, useClassStudentsQuery } from "@/queries/classes";
     import { useCreateTeacherInvitationMutation } from "@/queries/teacher-invitations";
     import type { TeacherInvitationData } from "@dwengo-1/common/interfaces/teacher-invitation";
+import { useDisplay } from "vuetify";
 
     const { t } = useI18n();
 
@@ -142,6 +143,28 @@
         snackbar.value.color = color;
         snackbar.value.visible = true;
     }
+
+    // Custom breakpoints
+    const customBreakpoints = {
+        xs: 0,
+        sm: 500,
+        md: 1370,
+        lg: 1400,
+        xl: 1600,
+    };
+
+    // logic for small screens
+    const display = useDisplay();
+
+    // Reactive variables to hold custom logic based on breakpoints
+    const isSmAndDown = ref(false);
+    const isMdAndDown = ref(false);
+
+    watchEffect(() => {
+        // Custom breakpoint logic
+        isSmAndDown.value = display.width.value < customBreakpoints.sm;
+        isMdAndDown.value = display.width.value < customBreakpoints.md;
+    });
 </script>
 <template>
     <main>
@@ -228,6 +251,7 @@
                                                     {{ jr.requester.firstName + " " + jr.requester.lastName }}
                                                 </td>
                                                 <td>
+                                                    <span v-if="!isSmAndDown && !isMdAndDown">
                                                     <v-btn
                                                         @click="handleJoinRequest(jr, true)"
                                                         class="mr-2"
@@ -243,6 +267,12 @@
                                                     >
                                                         {{ t("reject") }}
                                                     </v-btn>
+                                                    </span>
+                                                    <span v-else>
+                                                        <v-btn @click="handleJoinRequest(jr, true)" icon="mdi-check-circle" class="mr-2" color="green" variant="text"></v-btn>
+                                                        <v-btn @click="handleJoinRequest(jr, false)" icon="mdi-close-circle" class="mr-2" color="red" variant="text"></v-btn>
+                                                    </span>
+                                                    
                                                 </td>
                                             </tr>
                                         </tbody>
diff --git a/frontend/src/views/classes/TeacherClasses.vue b/frontend/src/views/classes/TeacherClasses.vue
index 94fca7c9..d29b3b17 100644
--- a/frontend/src/views/classes/TeacherClasses.vue
+++ b/frontend/src/views/classes/TeacherClasses.vue
@@ -152,10 +152,12 @@
 
     // Reactive variables to hold custom logic based on breakpoints
     const isMdAndDown = ref(false);
+    const isSmAndDown = ref(false);
 
     watchEffect(() => {
         // Custom breakpoint logic
         isMdAndDown.value = display.width.value < customBreakpoints.md;
+        isSmAndDown.value = display.width.value < customBreakpoints.sm;
     });
 
     // Code display dialog logic
@@ -320,60 +322,87 @@
             <h1 class="title">
                 {{ t("invitations") }}
             </h1>
-            <v-container fluid class="ma-4">
-            <v-table class="table">
-                <thead>
-                    <tr>
-                        <th class="header">{{ t("class") }}</th>
-                        <th class="header">{{ t("sender") }}</th>
-                        <th class="header"></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <using-query-result
-                        :query-result="getInvitationsQuery"
-                        v-slot="invitationsResponse: { data: TeacherInvitationsResponse }"
-                    >
+            <v-container
+                fluid
+                class="ma-4"
+            >
+                <v-table class="table">
+                    <thead>
+                        <tr>
+                            <th class="header">{{ t("class") }}</th>
+                            <th class="header">{{ t("sender") }}</th>
+                            <th class="header">{{ t("accept") + "/" + t("reject") }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
                         <using-query-result
-                            :query-result="allClassesQuery"
-                            v-slot="classesResponse: { data: ClassesResponse }"
+                            :query-result="getInvitationsQuery"
+                            v-slot="invitationsResponse: { data: TeacherInvitationsResponse }"
                         >
-                            <tr
-                                v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
-                                :key="i.classId"
+                            <using-query-result
+                                :query-result="allClassesQuery"
+                                v-slot="classesResponse: { data: ClassesResponse }"
                             >
-                                <td>
-                                    {{
-                                        (classesResponse.data.classes as ClassDTO[]).filter((c) => c.id == i.classId)[0]
-                                            .displayName
-                                    }}
-                                </td>
-                                <td>
-                                    {{ (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName }}
-                                </td>
-                                <td class="text-right">
-                                    <div>
-                                        <v-btn
-                                            color="green"
-                                            @click="handleInvitation(i, true)"
-                                            class="mr-2"
-                                        >
-                                            {{ t("accept") }}
-                                        </v-btn>
-                                        <v-btn
-                                            color="red"
-                                            @click="handleInvitation(i, false)"
-                                        >
-                                            {{ t("deny") }}
-                                        </v-btn>
-                                    </div>
-                                </td>
-                            </tr>
+                                <tr
+                                    v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
+                                    :key="i.classId"
+                                >
+                                    <td>
+                                        {{
+                                            (classesResponse.data.classes as ClassDTO[]).filter(
+                                                (c) => c.id == i.classId,
+                                            )[0].displayName
+                                        }}
+                                    </td>
+                                    <td>
+                                        {{
+                                            (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName
+                                        }}
+                                    </td>
+                                    <td class="text-right">
+                                        <span v-if="!isSmAndDown">
+                                            <div>
+                                                <v-btn
+                                                    color="green"
+                                                    @click="handleInvitation(i, true)"
+                                                    class="mr-2"
+                                                >
+                                                    {{ t("accept") }}
+                                                </v-btn>
+                                                <v-btn
+                                                    color="red"
+                                                    @click="handleInvitation(i, false)"
+                                                >
+                                                    {{ t("deny") }}
+                                                </v-btn>
+                                            </div>
+                                        </span>
+                                        <span v-else>
+                                            <div>
+                                                <v-btn
+                                                    @click="handleInvitation(i, true)"
+                                                    class="mr-2"
+                                                    icon="mdi-check-circle"
+                                                    color="green"
+                                                    variant="text"
+                                                >
+                                                </v-btn>
+                                                <v-btn
+                                                    @click="handleInvitation(i, false)"
+                                                    class="mr-2"
+                                                    icon="mdi-close-circle"
+                                                    color="red"
+                                                    variant="text"
+                                                >
+                                                </v-btn></div
+                                        ></span>
+                                    </td>
+                                </tr>
+                            </using-query-result>
                         </using-query-result>
-                    </using-query-result>
-                </tbody>
-            </v-table>
-        </v-container>
+                    </tbody>
+                </v-table>
+            </v-container>
         </div>
         <v-snackbar
             v-model="snackbar.visible"