diff --git a/frontend/src/assets/img/flags/en-flag.svg b/frontend/src/assets/img/flags/en-flag.svg new file mode 100644 index 00000000..630b05cd --- /dev/null +++ b/frontend/src/assets/img/flags/en-flag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/img/flags/en-flag.svg:Zone.Identifier b/frontend/src/assets/img/flags/en-flag.svg:Zone.Identifier new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/assets/img/flags/nl-flag.svg b/frontend/src/assets/img/flags/nl-flag.svg new file mode 100644 index 00000000..23ef3086 --- /dev/null +++ b/frontend/src/assets/img/flags/nl-flag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/img/flags/nl-flag.svg:Zone.Identifier b/frontend/src/assets/img/flags/nl-flag.svg:Zone.Identifier new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/assets/img/logo-en.png b/frontend/src/assets/img/logo-en.png index a20a336b..9dab5b27 100644 Binary files a/frontend/src/assets/img/logo-en.png and b/frontend/src/assets/img/logo-en.png differ diff --git a/frontend/src/assets/img/logo-nl.png b/frontend/src/assets/img/logo-nl.png index ca9a5af9..d2fb8949 100644 Binary files a/frontend/src/assets/img/logo-nl.png and b/frontend/src/assets/img/logo-nl.png differ diff --git a/frontend/src/assets/img/logo-white-en.png b/frontend/src/assets/img/logo-white-en.png new file mode 100644 index 00000000..74b807e2 Binary files /dev/null and b/frontend/src/assets/img/logo-white-en.png differ diff --git a/frontend/src/assets/img/logo-white-en.png:Zone.Identifier b/frontend/src/assets/img/logo-white-en.png:Zone.Identifier new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/assets/img/logo-white-nl.png b/frontend/src/assets/img/logo-white-nl.png new file mode 100644 index 00000000..b678e84a Binary files /dev/null and b/frontend/src/assets/img/logo-white-nl.png differ diff --git a/frontend/src/assets/img/logo-white-nl.png:Zone.Identifier b/frontend/src/assets/img/logo-white-nl.png:Zone.Identifier new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json index 9e26dfee..ace0675f 100644 --- a/frontend/src/assets/lang/en.json +++ b/frontend/src/assets/lang/en.json @@ -1 +1,18 @@ -{} \ No newline at end of file +{ + "layout": { + "header": { + "logo": "Logo of Ghent University", + "navigation": { + "dashboard": "Dashboard", + "calendar": "Calendar", + "courses": "Courses", + "settings": "Preferences", + "help": "Help" + }, + "language": { + "nl": "Dutch", + "en": "English" + } + } + } +} \ No newline at end of file diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json index 68bda71a..5628c5de 100644 --- a/frontend/src/assets/lang/nl.json +++ b/frontend/src/assets/lang/nl.json @@ -8,6 +8,10 @@ "courses": "Vakken", "settings": "Voorkeuren", "help": "Help" + }, + "language": { + "nl": "Nederlands", + "en": "Engels" } } } diff --git a/frontend/src/assets/scss/theme/_variables.scss b/frontend/src/assets/scss/theme/_variables.scss index 16421a90..e1f873dd 100644 --- a/frontend/src/assets/scss/theme/_variables.scss +++ b/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; diff --git a/frontend/src/assets/scss/theme/base/components/button/_button.scss b/frontend/src/assets/scss/theme/base/components/button/_button.scss index 4fa0c9e1..9e42ccf3 100644 --- a/frontend/src/assets/scss/theme/base/components/button/_button.scss +++ b/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 { diff --git a/frontend/src/components/Body.vue b/frontend/src/components/Body.vue index 23104813..b445e286 100644 --- a/frontend/src/components/Body.vue +++ b/frontend/src/components/Body.vue @@ -1,9 +1,8 @@ diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue index 2da80991..876dc824 100644 --- a/frontend/src/components/Footer.vue +++ b/frontend/src/components/Footer.vue @@ -1,9 +1,20 @@ diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue index cff94aaa..7b830f64 100644 --- a/frontend/src/components/Header.vue +++ b/frontend/src/components/Header.vue @@ -1,43 +1,112 @@ - \ No newline at end of file diff --git a/frontend/src/components/Title.vue b/frontend/src/components/Title.vue new file mode 100644 index 00000000..073de902 --- /dev/null +++ b/frontend/src/components/Title.vue @@ -0,0 +1,28 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/components/layout/BaseLayout.vue b/frontend/src/components/layout/BaseLayout.vue index c65aa909..10c341b5 100644 --- a/frontend/src/components/layout/BaseLayout.vue +++ b/frontend/src/components/layout/BaseLayout.vue @@ -6,19 +6,13 @@ import Footer from '@/components/Footer.vue'; diff --git a/frontend/src/composables/config.ts b/frontend/src/composables/configuration.ts similarity index 100% rename from frontend/src/composables/config.ts rename to frontend/src/composables/configuration.ts diff --git a/frontend/src/composables/services/courses.service.ts b/frontend/src/composables/services/courses.service.ts new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/config/environment.ts b/frontend/src/config/environment.ts index 313e0813..6f4659f2 100644 --- a/frontend/src/config/environment.ts +++ b/frontend/src/config/environment.ts @@ -1 +1,3 @@ -export const environment = {}; \ No newline at end of file +export const environment = { + +}; \ No newline at end of file diff --git a/frontend/src/main.scss b/frontend/src/main.scss index e5861c9e..7ab0f04c 100644 --- a/frontend/src/main.scss +++ b/frontend/src/main.scss @@ -1,5 +1,8 @@ +/* Package stylesheets */ @import '../node_modules/primeflex/primeflex.css'; @import '../node_modules/primeicons/primeicons.css'; + +/* Custom PrimeVue theme */ @import 'assets/scss/theme/theme.scss'; body { @@ -7,22 +10,6 @@ body { 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; } diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 1e0a038e..6dc752d2 100644 --- a/frontend/src/main.ts +++ b/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'); \ No newline at end of file diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue index c40b8dac..48f24a5e 100644 --- a/frontend/src/views/dashboard/DashboardView.vue +++ b/frontend/src/views/dashboard/DashboardView.vue @@ -2,18 +2,20 @@ import Button from 'primevue/button'; import BaseLayout from '@/components/layout/BaseLayout.vue'; import {PrimeIcons} from 'primevue/api'; +import Title from '@/components/Title.vue';