louis/targo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(approvals): work on list view, dashboard carousel and general layout

Browse Source
This commit is contained in:
Nicolas Drolet 2025-12-29 14:13:56 -05:00
parent 10511484fa
commit 29cff14e3b
7 changed files with 66 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/map_targo_banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
src/assets/targo_help_banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

7
src/i18n/en-ca/index.ts
View File

@ -1,6 +1,11 @@
export default {
dashboard: {
welcome: "Welcome to the Targo App!",
carousel: {
welcome_title: "Welcome to the new Targo Application!",
welcome_message: "Development is complete and the application is live! Things have remained mostly the same, but with a new coat of paint, a more streamlined user experience, and most importantly, drastically improved security and optimization!",
help_title: "We have a help page!",
help_message: "We did our best to keep the app intuitive with as few clicks and changes as possible, but it's not always perfect! We made this page to explain every part of the app if you any of it ever feels confusing.",
},
},
help: {
label: "Centre d'aide",

9
src/i18n/fr-ca/index.ts
View File

@ -1,6 +1,11 @@
export default {
dashboard: {
welcome: "Bienvenue dans l'application Targo!",
carousel: {
welcome_title: "Bienvenue dans la nouvelle application Targo!",
welcome_message: "Le développement est terminé et l'application est officiellement en ligne! Les fonctionnalités demeurent grandement intactes comparé à l'ancienne version, mise à part une nouvelle couche de peinture, une expérience utilisateur plus intuitive et surtout une sécurité et optimization drastiquement amélioriés!",
help_title: "Nous avons une page d'aide!",
help_message: "Nous avons fait notre possible pour rendre l'application plus intuitive et facile d'accès en suivant les tendances modernes, mais il y a toujours place à l'amélioration! La page d'aide est là pour vous si jamais nous avons raté la cible et qu'une partie du site semble nébuleux.",
},
},
help: {
label: "Centre d'aide",
@ -107,7 +112,7 @@ export default {
},
},
error :{
error: {
not_found_header: "page introuvable",
not_found_description: "Vous avez possiblement entré une mauvaise addresse URL, ou vous n'avez pas accès à cette section du site",
go_back: "retour en arrière",

2
src/modules/timesheets/components/timesheet-wrapper.vue
View File

@ -67,7 +67,7 @@
/>
<!-- label for approval mode to delimit that this is the timesheet -->
<span class="col-auto text-uppercase text-bold text-h5"> {{ $t('timesheet.page_header') }}</span>
<span v-if="mode === 'approval'" class="col-auto text-uppercase text-bold text-h5"> {{ $t('timesheet.page_header') }}</span>
<q-space v-if="$q.screen.width > $q.screen.height" />

80
src/pages/dashboard-page.vue
View File

@ -4,12 +4,6 @@
>
import { ref } from 'vue';
const LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et \
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu \
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia \
deserunt mollit anim id est laborum."
const slide = ref<string>('welcome');
</script>
@ -19,59 +13,87 @@
class="q-pa-md justify-center items-stretch"
:class="$q.platform.is.mobile ? 'column' : 'row'"
>
<!-- left column -->
<div class="column col flex-center q-pa-md">
</div>
<div class="column col-xs-12 col-md-8 col-xl-6 flex-center self-start q-pa-md">
<!-- center column -->
<div class="column col-xs-12 col-md-8 col-xl-6 flex-center q-pa-md">
<q-carousel
v-model="slide"
transition-prev="jump-right"
transition-next="jump-left"
swipeable
animated
control-color="accent"
navigation-icon="radio_button_unchecked"
navigation
infinite
:autoplay="9001"
control-color="accent"
class="col-auto bg-dark rounded-15 shadow-18"
:style="$q.platform.is.mobile ? 'height: 60vh;' : 'height: 50vh;'"
>
<!-- welcome slide -->
<q-carousel-slide
name="welcome"
class="column no-wrap flex-center q-pa-none q-pb-xl"
class="q-pa-none q-pb-xl fit"
>
<q-img
src="src/assets/targo_building.png"
height="25vh"
position="50% 25%"
>
<div class="absolute-bottom text-h5">
{{ $t('dashboard.welcome') }}
<div class="column fit">
<q-img
src="src/assets/targo_building.png"
height="30vh"
position="50% 25%"
fit="cover"
class="col-auto"
>
<div class="absolute-bottom text-h6 text-uppercase text-weight-light">
{{ $t('dashboard.carousel.welcome_title') }}
</div>
</q-img>
<div class="column col q-mt-md q-px-md flex-center">
<span class="col-auto">{{ $t('dashboard.carousel.welcome_message') }}</span>
</div>
</q-img>
<div class="q-mt-md text-center">
{{ LOREM_IPSUM }}
</div>
</q-carousel-slide>
<!-- help page slide -->
<q-carousel-slide
name="tv"
class="column no-wrap flex-center q-pa-none q-pb-xl"
class="q-pa-none q-pb-xl"
>
<q-icon
name="live_tv"
size="56px"
/>
<div class="q-mt-md text-center">
{{ LOREM_IPSUM }}
<div class="column fit">
<q-img
src="src/assets/targo_help_banner.png"
height="30vh"
position="50% 25%"
fit="none"
class="col-auto"
>
<div class="absolute-bottom text-h6 text-uppercase text-weight-light">
{{ $t('dashboard.carousel.help_title') }}
</div>
</q-img>
<div class="col column justify-center q-mt-md q-px-md">
<span class="col-auto">{{ $t('dashboard.carousel.help_message') }}</span>
</div>
</div>
</q-carousel-slide>
</q-carousel>
<div class="col column">
<span class="col-auto text-h6 text-uppercase"> </span>
</div>
</div>
<div class="column col items-center q-pl-md">
<div class="col-auto row justify-end full-width within-iframe" style="height: 50vh;">
<!-- right column -->
<div class="column col items-center">
<div
class="col-auto row full-width within-iframe"
:class="$q.platform.is.mobile ? 'justify-center' : 'justify-end q-pl-md'"
style="height: 50vh;"
>
<iframe
title="Environment Canada Weather"
height="400px"

2
src/pages/login-page.vue
View File

@ -4,7 +4,7 @@
<template>
<q-layout view="hHh lpR fFf">
<q-page-container class="bg-secondary">
<q-page-container class="bg-dark">
<q-page class="row">
<q-img src="src/assets/village.png" fit="cover" :class="$q.screen.lt.md ? 'absolute-bottom' : 'absolute-right'" />
<transition appear slow enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" class="col-xs-10 absolute-center">