feat: basic layout with localization support

frontend/src/assets/lang/en.json

@@ -1 +1,18 @@
-{}
+{
+    "layout": {
+        "header": {
+            "logo": "Logo of Ghent University",
+            "navigation": {
+                "dashboard": "Dashboard",
+                "calendar": "Calendar",
+                "courses": "Courses",
+                "settings": "Preferences",
+                "help": "Help"
+            },
+            "language": {
+                "nl": "Dutch",
+                "en": "English"
+            }
+        }
+    }
+}

frontend/src/assets/lang/nl.json

@@ -8,6 +8,10 @@
                 "courses": "Vakken",
                 "settings": "Voorkeuren",
                 "help": "Help"
+            },
+            "language": {
+                "nl": "Nederlands",
+                "en": "Engels"
             }
         }
     }

frontend/src/assets/scss/theme/_variables.scss

@@ -67,7 +67,7 @@ $actionIconHoverColor:$shade800 !default;
 $actionIconBorderRadius:50% !default;
 
 //input field (e.g. inputtext, spinner, inputmask)
-$inputPadding:.75rem .75rem !default;
+$inputPadding: .75rem .75rem !default;
 $inputTextFontSize:1rem !default;
 
 $inputBg:$shade000 !default;
@@ -85,13 +85,13 @@ $inputFilledFocusBg:$shade000 !default;
 //input groups
 $inputGroupBg:$shade200 !default;
 $inputGroupTextColor:$shade600 !default;
-$inputGroupAddOnMinWidth: 3rem !default;
+$inputGroupAddOnMinWidth: 2.5rem !default;
 
 //input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
 $inputListBg:$shade000 !default;
 $inputListTextColor:$shade700 !default;
 $inputListBorder:$inputBorder !default;
-$inputListPadding:.75rem 0 !default;
+$inputListPadding:0 0 !default;
 $inputListItemPadding:.75rem 1.25rem !default;
 $inputListItemBg:transparent !default;
 $inputListItemTextColor:$shade700 !default;
@@ -144,16 +144,16 @@ $plainButtonTextColor:$textSecondaryColor !default;
 $plainButtonHoverBgColor:$shade200 !default;
 $plainButtonActiveBgColor:$shade300 !default;
 
-$secondaryButtonBg:#64748B !default;
-$secondaryButtonTextColor:#ffffff !default;
-$secondaryButtonBorder:1px solid #64748B !default;
-$secondaryButtonHoverBg:#475569 !default;
+$secondaryButtonBg: $secondaryColor !default;
+$secondaryButtonTextColor: $secondaryTextColor !default;
+$secondaryButtonBorder:1px solid $secondaryColor !default;
+$secondaryButtonHoverBg:$secondaryDarkColor !default;
 $secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
-$secondaryButtonHoverBorderColor:#475569 !default;
-$secondaryButtonActiveBg:#334155 !default;
+$secondaryButtonHoverBorderColor:$secondaryDarkColor !default;
+$secondaryButtonActiveBg:$secondaryDarkerColor !default;
 $secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
-$secondaryButtonActiveBorderColor:#334155 !default;
-$secondaryButtonFocusShadow:0 0 0 0.2rem #E2E8F0 !default;
+$secondaryButtonActiveBorderColor:$secondaryDarkColor !default;
+$secondaryButtonFocusShadow:0 0 0 2px #ffffff, 0 0 0 4px #85b0ed, 0 1px 2px 0 rgb(0, 0, 0) !default;
 
 $infoButtonBg:#0ea5e9 !default;
 $infoButtonTextColor:#ffffff !default;
@@ -871,6 +871,8 @@ $imagePreviewActionIconBorderRadius:50% !default;
     --text-color-secondary:#{$shade600};
     --primary-color:#{$primaryColor};
     --primary-color-text:#{$primaryTextColor};
+    --secondary-color:#{$secondaryColor};
+    --secondary-color-text:#{$secondaryTextColor};
     --surface-0: #ffffff;
     --surface-50: #f9fafb;
     --surface-100: #f3f4f6;

frontend/src/assets/scss/theme/base/components/button/_button.scss

@@ -75,7 +75,6 @@
     padding: $buttonPadding;
     font-size: $fontSize;
     transition: $formElementTransition;
-    border-radius: $borderRadius;
     outline-color: transparent;
 
     &:not(:disabled):hover {

frontend/src/components/Body.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-
 </script>
 
 <template>
-    <div class="p-4">
+    <div class="pt-6 pb-7">
         <slot/>
     </div>
 </template>

frontend/src/components/Footer.vue

@@ -1,9 +1,20 @@
 <script setup lang="ts">
+import enLogo from '@/assets/img/logo-white-en.png';
+import nlLogo from '@/assets/img/logo-white-nl.png';
+import {useI18n} from 'vue-i18n';
 
+/* Translation composable */
+const { t, locale } = useI18n();
+
+/* Available localized images */
+const logo: {[key: string]: string} = { nl: nlLogo, en: enLogo };
 </script>
 
 <template>
-    <div id="footer" class="p-4">
+    <div id="footer" class="p-4 py-3">
+        <div class="w-full lg:w-2 flex align-items-center py-3">
+            <img class="w-full max-w-9rem" :src="logo[locale]" :alt="t('layout.header.logo')">
+        </div>
     </div>
 </template>
 

frontend/src/components/Header.vue

@@ -1,43 +1,112 @@
 <script setup lang="ts">
+import enLogo from '@/assets/img/logo-en.png';
+import nlLogo from '@/assets/img/logo-nl.png';
+import nlFlag from '@/assets/img/flags/nl-flag.svg'
+import enFlag from '@/assets/img/flags/en-flag.svg'
+import Dropdown from 'primevue/dropdown';
 import {useI18n} from 'vue-i18n';
-import en from '@/assets/img/logo-en.png';
-import nl from '@/assets/img/logo-nl.png';
+import {computed} from 'vue';
 
-const { t, locale } = useI18n();
+/* Translation composable */
+const { t, locale, availableLocales } = useI18n();
 
-const logo: {[key: string]: string} = {nl, en};
+/* Available localized images */
+const logo: {[key: string]: string} = { nl: nlLogo, en: enLogo };
+const flags: {[key: string]: string} = { nl: nlFlag, en: enFlag };
 
-const items = [
+/* Navigation items */
+const items = computed(() => [
     {icon: 'home', label: t('layout.header.navigation.dashboard'), path: ''},
     {icon: 'calendar', label: t('layout.header.navigation.calendar'), path: ''},
     {icon: 'book', label: t('layout.header.navigation.courses'), path: ''},
     {icon: 'cog', label: t('layout.header.navigation.settings'), path: ''},
     {icon: 'info-circle', label: t('layout.header.navigation.help'), path: ''}
-];
+]);
 </script>
 
 <template>
     <div class="flex w-full">
-        <div class="w-full lg:w-2 flex align-items-center px-4 py-3">
-            <img class="w-full max-w-7rem" :src="logo[locale]" :alt="t('layout.header.logo')">
+        <div class="w-full lg:w-2 flex align-items-center py-3">
+            <img class="w-full max-w-9rem" :src="logo[locale]" :alt="t('layout.header.logo')">
         </div>
-        <div class="flex flex-column w-full lg:w-10 border-x-1 border-200">
-            <div id="header" class="w-full text-white p-4">
-                <div class="text-right text-sm">
-                    Ingelogd als Lander Maes
+        <div class="flex flex-column w-full lg:w-10">
+            <div id="header" class="w-full flex text-white p-4">
+                <div class="flex align-items-end">
+                    <h1 class="text-white m-0">Ypovoli</h1>
+                </div>
+                <div class="text-right w-12rem ml-auto text-sm flex flex-column align-items-end gap-3">
+                    <!-- Language selector -->
+                    <Dropdown id="language" v-model="locale" class="w-auto" :options="availableLocales" variant="outlined">
+                        <template #option="{ option }">
+                            <div class="flex align-items-center">
+                                <img :alt="t('layout.header.language.' + option)" :src="flags[option]" class="h-1rem mr-3"/>
+                                <div>
+                                    {{ t('layout.header.language.' + option) }}
+                                </div>
+                            </div>
+                        </template>
+                        <template #value="{ value }" class="pr-0">
+                            <div class="uppercase text-sm">{{ value }}</div>
+                        </template>
+                    </Dropdown>
+                    <!-- User information -->
+                    <span>
+                        Ingelogd als Lander Maes
+                    </span>
                 </div>
             </div>
-            <div id="navigation" class="w-full h-full flex border-bottom-1 border-200">
-                <div class="flex align-items-center w-9rem flex justify-content-center p-3 border-right-1 border-200 cursor-pointer text-primary font-bold" v-for="item in items">
-                    <span :class="'pi mr-2 pi-' + item.icon"/> {{ item.label }}
+            <!-- Navigation -->
+            <div id="navigation" class="w-full h-full flex">
+                <div class="flex align-items-center uppercase flex justify-content-center p-3 pl-0 cursor-pointer text-primary font-medium nav-item" v-for="item in items">
+                    <span class="mr-2" :class="'pi pi-' + item.icon"/> {{ item.label }}
                 </div>
             </div>
         </div>
     </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 #header {
     background: var(--primary-color);
+
+    #language {
+        background: transparent;
+        color: var(--primary-color-text);
+        border: none;
+        padding: .25rem;
+
+        .p-inputtext {
+            padding: 0;
+            color: var(--primary-color-text);
+        }
+
+        .p-dropdown-trigger {
+            width: auto;
+            color: var(--primary-color-text);
+            margin-left: 0.5rem;
+        }
+    }
+}
+
+.nav-item {
+    position: relative;
+    z-index: 1;
+
+    &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: .25rem;
+        left: 0;
+        width: 0;
+        height: 3px;
+        background: var(--primary-color);
+        transition: width .3s;
+        margin-top: 0.5rem;
+    }
+
+    &:hover::after {
+        width: calc(100% - 1rem);
+    }
 }
 </style>

frontend/src/components/Title.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <h1 class="title">
+        <slot/>
+    </h1>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    margin-top: 0;
+    color: var(--primary-color);
+    position: relative;
+    display: inline-block;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: -8px;
+        display: block;
+        width: 100%;
+        border-top: 4px solid var(--primary-color);;
+    }
+}
+</style>

frontend/src/components/layout/BaseLayout.vue

@@ -6,19 +6,13 @@ import Footer from '@/components/Footer.vue';
 
 <template>
     <div class="w-12 lg:w-8 mx-auto">
-        <div class="grid gap-0">
-            <div class="col-12">
-                <Header/>
-            </div>
-            <div class="col-12">
-                <Body>
-                    <slot/>
-                </Body>
-            </div>
-            <div class="col-12">
-                <Footer/>
-            </div>
-        </div>
+        <Header/>
+
+        <Body>
+            <slot/>
+        </Body>
+
+        <Footer/>
     </div>
 </template>
 

frontend/src/config/environment.ts

@@ -1 +1,3 @@
-export const environment = {};
+export const environment = {
+
+};

frontend/src/main.scss

@@ -1,28 +1,15 @@
+/* Package stylesheets */
 @import '../node_modules/primeflex/primeflex.css';
 @import '../node_modules/primeicons/primeicons.css';
+
+/* Custom PrimeVue theme */
 @import 'assets/scss/theme/theme.scss';
 
 body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
 
-    h1 {
-        color: $primaryColor;
-        position: relative;
-        display: inline-block;
-
-        &::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            bottom: -8px;
-            display: block;
-            width: 100%;
-            border-top: 4px solid $primaryColor;
-        }
-    }
-
     * {
         box-sizing: border-box;
     }

frontend/src/main.ts

@@ -1,6 +1,8 @@
 import nl from '@/assets/lang/nl.json';
 import en from '@/assets/lang/en.json';
 import App from '@/views/App.vue';
+import PrimeVue from 'primevue/config';
+import Ripple from 'primevue/ripple';
 import {createApp} from 'vue';
 import {createI18n} from 'vue-i18n';
 import {routes} from '@/router/routes.ts';
@@ -24,5 +26,13 @@ app.use(createRouter({
     history: createWebHistory(), routes
 }));
 
+app.use(PrimeVue, {
+    ripple: true
+});
+
+/* Bind app directives */
+
+app.directive('ripple', Ripple);
+
 /* Mount the application */
 app.mount('#app');