style: responsive

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>

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,13 +322,16 @@
             <h1 class="title">
                 {{ t("invitations") }}
             </h1>
-            <v-container fluid class="ma-4">
+            <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>
+                            <th class="header">{{ t("accept") + "/" + t("reject") }}</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -344,14 +349,18 @@
                                 >
                                     <td>
                                         {{
-                                        (classesResponse.data.classes as ClassDTO[]).filter((c) => c.id == i.classId)[0]
+                                            (classesResponse.data.classes as ClassDTO[]).filter(
-                                            .displayName
+                                                (c) => c.id == i.classId,
+                                            )[0].displayName
                                         }}
                                     </td>
                                     <td>
-                                    {{ (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName }}
+                                        {{
+                                            (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName
+                                        }}
                                     </td>
                                     <td class="text-right">
+                                        <span v-if="!isSmAndDown">
                                             <div>
                                                 <v-btn
                                                     color="green"
@@ -367,6 +376,26 @@
                                                     {{ 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>