Merge branch 'dev' into refactor/linting

This commit is contained in:
Tibo De Peuter 2025-03-30 22:44:13 +02:00
commit 588c556949
Signed by: tdpeuter
GPG key ID: 38297DE43F75FFE2
37 changed files with 686 additions and 796 deletions

View file

@ -42,67 +42,83 @@
</script>
<template>
<main>
<v-app class="menu_collapsed">
<v-app-bar
app
style="background-color: #f6faf2"
<v-app-bar
class="app-bar"
app
>
<v-app-bar-nav-icon
class="menu_collapsed"
@click="drawer = !drawer"
/>
<router-link
to="/user"
class="dwengo_home"
>
<div>
<img
class="dwengo_logo"
alt="Dwengo logo"
:src="dwengoLogo"
/>
<p class="caption">
{{ t(`${role}`) }}
</p>
</div>
</router-link>
<v-toolbar-items class="menu">
<v-btn
class="menu_item"
variant="text"
to="/user/assignment"
>
<template v-slot:prepend>
<v-app-bar-nav-icon @click="drawer = !drawer" />
</template>
<v-app-bar-title>
<router-link
to="/user"
class="dwengo_home"
{{ t("assignments") }}
</v-btn>
<v-btn
class="menu_item"
variant="text"
to="/user/class"
>
{{ t("classes") }}
</v-btn>
<v-btn
class="menu_item"
variant="text"
to="/user/discussion"
>
{{ t("discussions") }}
</v-btn>
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon
variant="text"
>
<div>
<img
class="dwengo_logo"
:src="dwengoLogo"
style="width: 100px"
/>
<p
class="caption"
style="font-size: smaller"
>
{{ t(`${role}`) }}
</p>
</div>
</router-link>
</v-app-bar-title>
<v-spacer></v-spacer>
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon
variant="text"
>
<v-icon
icon="mdi-translate"
size="small"
color="#0e6942"
></v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(language, index) in languages"
:key="index"
@click="changeLanguage(language.code)"
>
<v-list-item-title>{{ language.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-icon
icon="mdi-translate"
size="small"
color="#0e6942"
></v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(language, index) in languages"
:key="index"
@click="changeLanguage(language.code)"
>
<v-list-item-title>{{ language.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-dialog max-width="500">
<template v-slot:activator="{ props: activatorProps }">
<v-btn
@click="performLogout"
text
v-bind="activatorProps"
:rounded="true"
variant="text"
>
<v-tooltip
:text="t('logout')"
@ -114,201 +130,81 @@
icon="mdi-logout"
size="x-large"
color="#0e6942"
/>
>
</v-icon>
</template>
</v-tooltip>
</v-btn>
</v-app-bar>
</template>
<v-navigation-drawer
v-model="drawer"
app
>
<v-list>
<v-list-item
to="/user/assignment"
link
>
<v-list-item-content>
<v-list-item-title class="menu_item">{{ t("assignments") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<template v-slot:default="{ isActive }">
<v-card :title="t('logoutVerification')">
<v-card-actions>
<v-spacer></v-spacer>
<v-list-item
to="/user/class"
link
>
<v-list-item-content>
<v-list-item-title class="menu_item">{{ t("classes") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item
to="/user/discussion"
link
>
<v-list-item-content>
<v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
<nav class="menu">
<div class="left">
<ul>
<li>
<router-link
to="/user"
class="dwengo_home"
>
<img
class="dwengo_logo"
:src="dwengoLogo"
/>
<p class="caption">
{{ t(`${role}`) }}
</p>
</router-link>
</li>
<li>
<router-link
:to="`/user/assignment`"
class="menu_item"
>
{{ t("assignments") }}
</router-link>
</li>
<li>
<router-link
to="/user/class"
class="menu_item"
>{{ t("classes") }}</router-link
>
</li>
<li>
<router-link
to="/user/discussion"
class="menu_item"
>{{ t("discussions") }}
</router-link>
</li>
<li>
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon
variant="text"
>
<v-icon
icon="mdi-translate"
size="small"
color="#0e6942"
></v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(language, index) in languages"
:key="index"
@click="changeLanguage(language.code)"
>
<v-list-item-title>{{ language.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</li>
</ul>
</div>
<div class="right">
<li>
<!-- <v-btn
@click="performLogout"
to="/login"
style="background-color: transparent; box-shadow: none !important"
>
<v-tooltip
<v-btn
:text="t('cancel')"
@click="isActive.value = false"
></v-btn>
<v-btn
:text="t('logout')"
location="bottom"
>
<template v-slot:activator="{ props }">
<v-icon
v-bind="props"
icon="mdi-logout"
size="x-large"
color="#0e6942"
></v-icon>
</template>
</v-tooltip>
</v-btn> -->
<v-dialog max-width="500">
<template v-slot:activator="{ props: activatorProps }">
<v-btn
v-bind="activatorProps"
style="background-color: transparent; box-shadow: none !important"
>
<v-tooltip
:text="t('logout')"
location="bottom"
>
<template v-slot:activator="{ props }">
<v-icon
v-bind="props"
icon="mdi-logout"
size="x-large"
color="#0e6942"
>
</v-icon>
</template>
</v-tooltip>
</v-btn>
</template>
@click="performLogout"
to="/login"
></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
<v-avatar
size="large"
color="#0e6942"
class="user-button"
>{{ initials }}</v-avatar
>
</v-app-bar>
<v-navigation-drawer
v-model="drawer"
temporary
app
>
<v-list>
<v-list-item
to="/user/assignment"
link
>
<v-list-item-title class="menu_item">{{ t("assignments") }}</v-list-item-title>
</v-list-item>
<template v-slot:default="{ isActive }">
<v-card :title="t('logoutVerification')">
<v-card-actions>
<v-spacer></v-spacer>
<v-list-item
to="/user/class"
link
>
<v-list-item-title class="menu_item">{{ t("classes") }}</v-list-item-title>
</v-list-item>
<v-btn
:text="t('cancel')"
@click="isActive.value = false"
></v-btn>
<v-btn
:text="t('logout')"
@click="performLogout"
to="/login"
></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</li>
<li>
<v-avatar
size="large"
color="#0e6942"
style="font-size: large; font-weight: bold"
>{{ initials }}</v-avatar
>
</li>
</div>
</nav>
<router-view />
</main>
<v-list-item
to="/user/discussion"
link
>
<v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<style scoped>
.app-bar {
background-color: #f6faf2;
}
.menu {
background-color: #f6faf2;
display: flex;
justify-content: space-between;
}
.right {
align-items: center;
padding: 10px;
.user-button {
margin-right: 10px;
font-size: large;
font-weight: bold;
}
.right li {
@ -346,16 +242,19 @@
color: #0e6942;
text-decoration: none;
font-size: large;
}
nav a.router-link-active {
font-weight: bold;
text-transform: none;
}
@media (max-width: 700px) {
.menu {
display: none;
}
.caption {
font-size: smaller;
}
.dwengo_logo {
width: 100px;
}
}
@media (min-width: 701px) {