tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat: responsive

Browse source
This commit is contained in:
laurejablonski 2025-04-19 13:59:43 +02:00
parent aaaacd181a
commit eba7033226
1 changed files with 96 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

100
frontend/src/views/classes/TeacherClasses.vue
View file

@ -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 type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher";
import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
import type { TeacherInvitationData, TeacherInvitationDTO } from "@dwengo-1/common/interfaces/teacher-invitation";
@ -14,6 +14,8 @@
useRespondTeacherInvitationMutation,
useTeacherInvitationsReceivedQuery,
} from "@/queries/teacher-invitations";
import { useDisplay } from "vuetify";
import { createVuetify } from "vuetify";
const { t } = useI18n();
@ -135,6 +137,34 @@
await navigator.clipboard.writeText(code.value);
copied.value = 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 isMdAndDown = ref(false);
watchEffect(() => {
// Custom breakpoint logic
isMdAndDown.value = display.width.value < customBreakpoints.md;
});
// Code display dialog logic
const viewCodeDialog = ref(false);
const selectedCode = ref("");
function openCodeDialog(codeToView: string) {
selectedCode.value = codeToView;
viewCodeDialog.value = true;
}
</script>
<template>
<main>
@ -163,12 +193,13 @@
>
<v-row
no-gutters
fluid
class="custom-breakpoint"
>
<v-col
cols="12"
sm="6"
md="6"
class="responsive-col"
>
<v-table class="table">
<thead>
@ -194,7 +225,16 @@
<v-icon end> mdi-menu-right </v-icon>
</v-btn>
</td>
<td>{{ c.id }}</td>
<td>
<span v-if="!isMdAndDown">{{ c.id }}</span>
<span
v-else
style="cursor: pointer"
@click="openCodeDialog(c.id)"
><v-icon icon="mdi-eye"></v-icon
></span>
</td>
<td>{{ c.students.length }}</td>
</tr>
</tbody>
@ -204,6 +244,7 @@
cols="12"
sm="6"
md="6"
class="responsive-col"
>
<div>
<h2>{{ t("createClass") }}</h2>
@ -279,6 +320,7 @@
<h1 class="title">
{{ t("invitations") }}
</h1>
<v-container fluid class="ma-4">
<v-table class="table">
<thead>
<tr>
@ -331,6 +373,7 @@
</using-query-result>
</tbody>
</v-table>
</v-container>
</div>
<v-snackbar
v-model="snackbar.visible"
@ -339,6 +382,42 @@
>
{{ snackbar.message }}
</v-snackbar>
<v-dialog
v-model="viewCodeDialog"
max-width="400px"
>
<v-card>
<v-card-title class="headline">{{ t("code") }}</v-card-title>
<v-card-text>
<v-text-field
v-model="selectedCode"
readonly
append-inner-icon="mdi-content-copy"
@click:append-inner="copyToClipboard"
></v-text-field>
<v-slide-y-transition>
<div
v-if="copied"
class="text-center mt-2"
>
{{ t("copied") }}
</div>
</v-slide-y-transition>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
text
@click="
viewCodeDialog = false;
copied = false;
"
>
{{ t("close") }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</main>
</template>
<style scoped>
@ -406,7 +485,7 @@
margin-left: 30px;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 850px) {
h1 {
text-align: center;
padding-left: 0;
@ -429,5 +508,18 @@
justify-content: center;
margin: 5px;
}
.custom-breakpoint {
flex-direction: column !important;
}
.table {
width: 100%;
}
.responsive-col {
max-width: 100% !important;
flex-basis: 100% !important;
}
}
</style>