deblan/budget-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

update ui

Browse source
This commit is contained in:
Simon Vieille 2025-03-23 17:44:30 +01:00
commit a6f3ed315b
Signed by: deblan
GPG key ID: 579388D585F70417
12 changed files with 108 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

4
backend/view/template/auth/login.templ
View file

@ -11,9 +11,9 @@ templ Page(hasError bool) {
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card text-white" style="border-radius: 1rem;">
<div class="card" style="border-radius: 1rem;">
<div class="card-body py-2 px-5">
<div class="mb-md-5 mt-md-4">
<div class="mb-5 mt-4">
<div class="text-center pb-4">
<span class="fs-4">
<i class="fa-solid fa-coins"></i>

2
backend/view/template/auth/login_templ.go
View file

@ -39,7 +39,7 @@ func Page(hasError bool) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<body><section class=\"vh-100\" id=\"login-form\"><div class=\"container py-5 h-100\"><div class=\"row d-flex justify-content-center align-items-center h-100\"><div class=\"col-12 col-md-8 col-lg-6 col-xl-5\"><div class=\"card text-white\" style=\"border-radius: 1rem;\"><div class=\"card-body py-2 px-5\"><div class=\"mb-md-5 mt-md-4\"><div class=\"text-center pb-4\"><span class=\"fs-4\"><i class=\"fa-solid fa-coins\"></i> <span id=\"app-name\">Budget</span></span></div><form action=\"/login\" method=\"POST\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<body><section class=\"vh-100\" id=\"login-form\"><div class=\"container py-5 h-100\"><div class=\"row d-flex justify-content-center align-items-center h-100\"><div class=\"col-12 col-md-8 col-lg-6 col-xl-5\"><div class=\"card\" style=\"border-radius: 1rem;\"><div class=\"card-body py-2 px-5\"><div class=\"mb-5 mt-4\"><div class=\"text-center pb-4\"><span class=\"fs-4\"><i class=\"fa-solid fa-coins\"></i> <span id=\"app-name\">Budget</span></span></div><form action=\"/login\" method=\"POST\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

9
frontend/js/App.vue
View file

@ -11,7 +11,7 @@ import {BNavItem} from 'bootstrap-vue-next'
>
<a
href="/"
class="mb-4 text-white text-decoration-none text-center"
class="mb-4 text-decoration-none text-center"
>
<span class="fs-4">
<i class="fa-solid fa-coins"></i>
@ -27,7 +27,7 @@ import {BNavItem} from 'bootstrap-vue-next'
'/bank_accounts',
'/saving_accounts',
'/files',
'users',
'/users',
]"
v-slot="{href, route, navigate, isActive, isExactActive}"
:to="url"
@ -36,7 +36,6 @@ import {BNavItem} from 'bootstrap-vue-next'
<BNavItem
:href="href"
:active="isActive"
:link-class="{'text-white': !isActive}"
>
<i
class="me-2"
@ -50,8 +49,8 @@ import {BNavItem} from 'bootstrap-vue-next'
href="/logout"
class="px-3 p-lg-0 text-decoration-none"
>
<i class="text-white fa-solid fa-arrow-right-from-bracket"></i>
<span class="text-white ps-2 d-none d-lg-inline">Déconnexion</span>
<i class="fa-solid fa-arrow-right-from-bracket"></i>
<span class="ps-2 d-none d-lg-inline">Déconnexion</span>
</a>
</div>
<RouterView id="body" />

11
frontend/js/components/crud/Header.vue
View file

@ -1,7 +1,12 @@
<template>
<div class="d-block d-md-flex justify-content-between p-3">
<h3>{{ title }}</h3>
<slot name="menu"></slot>
<div class="header d-block p-3 mb-3">
<div class="d-md-flex justify-content-between">
<h3>{{ title }}</h3>
<slot name="menu"></slot>
</div>
<div v-if="$slots.bottom" class="pt-3">
<slot name="bottom"></slot>
</div>
</div>
</template>

2
frontend/js/components/crud/Pager.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="d-flex justify-content-end gap-2 pe-3 pb-2">
<div class="d-flex justify-content-end gap-2">
<BPagination
:model-value="page"
:per-page="limit"

16
frontend/js/views/BankAccountsView.vue
View file

@ -13,20 +13,20 @@
>
</BButtonToolbar>
</template>
<template #bottom>
<Pager
v-model:page="page"
v-model:pages="pages"
v-model:limit="limit"
@update="refresh()"
/>
</template>
</Header>
<Pager
v-model:page="page"
v-model:pages="pages"
v-model:limit="limit"
@update="refresh()"
/>
<div class="crud-list">
<BTableSimple
v-if="data !== null"
caption-top
responsive
>
<BThead>
<BTr>

16
frontend/js/views/CategoriesView.vue
View file

@ -25,20 +25,20 @@
>
</BButtonToolbar>
</template>
<template #bottom>
<Pager
v-model:page="page"
v-model:pages="pages"
v-model:limit="limit"
@update="refresh()"
/>
</template>
</Header>
<Pager
v-model:page="page"
v-model:pages="pages"
v-model:limit="limit"
@update="refresh()"
/>
<div class="crud-list">
<BTableSimple
v-if="data !== null"
caption-top
responsive
>
<BThead>
<BTr>

7
frontend/js/views/DashboardView.vue
View file

@ -101,7 +101,10 @@
</transition-group>
</Draggable>
</div>
<div v-else>Chargement...</div>
<div v-else class="text-center p-5">
<p>Chargement...</p>
<BSpinner />
</div>
</div>
</template>
@ -109,7 +112,7 @@
import {ref, onMounted, watch} from 'vue'
import {compute as monthThresholds} from '../chart/monthThreshold'
import {getStorage, saveStorage} from '../lib/storage'
import {BButtonGroup, BButton} from 'bootstrap-vue-next'
import {BButtonGroup, BButton, BSpinner} from 'bootstrap-vue-next'
import Filters from './../components/dashboard/Filters.vue'
import Capital from './../components/dashboard/Capital.vue'
import SavingAccounts from './../components/dashboard/SavingAccounts.vue'

16
frontend/js/views/SavingAccountsView.vue
View file

@ -13,20 +13,20 @@
>
</BButtonToolbar>
</template>
<template #bottom>
<Pager
v-model:page="page"
v-model:pages="pages"
v-model:limit="limit"
@update="refresh()"
/>
</template>
</Header>
<Pager
v-model:page="page"
v-model:pages="pages"
v-model:limit="limit"
@update="refresh()"
/>
<div class="crud-list">
<BTableSimple
v-if="data !== null"
caption-top
responsive
>
<BThead>
<BTr>

15
frontend/js/views/TransactionsView.vue
View file

@ -19,15 +19,16 @@
>
</BButtonToolbar>
</template>
<template #bottom>
<Pager
v-model:page="page"
v-model:pages="pages"
v-model:limit="limit"
@update="refresh()"
/>
</template>
</Header>
<Pager
v-model:page="page"
v-model:pages="pages"
v-model:limit="limit"
@update="refresh()"
/>
<BModal
v-if="filtersShow"
v-model="filtersShow"

16
frontend/js/views/UsersView.vue
View file

@ -13,20 +13,20 @@
>
</BButtonToolbar>
</template>
<template #bottom>
<Pager
v-model:page="page"
v-model:pages="pages"
v-model:limit="limit"
@update="refresh()"
/>
</template>
</Header>
<Pager
v-model:page="page"
v-model:pages="pages"
v-model:limit="limit"
@update="refresh()"
/>
<div class="crud-list">
<BTableSimple
v-if="data !== null"
caption-top
responsive
>
<BThead>
<BTr>

70
frontend/scss/main.scss
View file

@ -1,10 +1,16 @@
$white: #ffffff;
$theme-colors: (
'light': #bfecf8,
'navBg': #f5f6f7,
'navText': #47516B,
'navActiveBg': #3072c7,
'headerText': #47516B,
'headerBg': #fff,
'light': #f1c3a2,
'dark': #07070b,
'primary': #293e5b,
'secondary': #4e76ac,
'primary': #3072c7,
'secondary': #a2c7e7,
'header': #d6c52e,
'info': #abca41,
'success': #1eaa62,
'warning': #e5cc1d,
@ -12,13 +18,13 @@ $theme-colors: (
);
$pagination-active-bg: map-get($theme-colors, 'secondary');
$nav-pills-link-active-bg: darken(map-get($theme-colors, 'primary'), 5%);
$nav-pills-link-active-bg: map-get($theme-colors, 'navActiveBg');
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue-next/dist/bootstrap-vue-next.css';
@import '~@fortawesome/fontawesome-free/css/all.css';
$light-grey: #e9ecef;
$light-grey: #f5f6f7;
#app-name {
padding-left: 8px;
@ -27,21 +33,19 @@ $light-grey: #e9ecef;
#login-form {
background: linear-gradient(
-45deg,
map-get($theme-colors, 'primary') 50%,
map-get($theme-colors, 'secondary') 100%
#f1f1f1 50%,
#e1e1e1 100%
);
.card {
background: linear-gradient(
-45deg,
darken(map-get($theme-colors, 'primary'), 10%) 50%,
map-get($theme-colors, 'secondary') 100%
#f1f1f1 50%,
#e1e1e1 100%
);
}
}
* {
overscroll-behavior: contain !important;
color: #47516B;
}
.cursor {
@ -60,7 +64,11 @@ $nav-size-sm: 50px;
#nav {
width: $nav-size;
background: map-get($theme-colors, 'primary');
background: map-get($theme-colors, 'navBg');
a:not(.active) {
color: map-get($theme-colors, 'navText');
}
i {
width: 20px;
@ -77,7 +85,7 @@ $nav-size-sm: 50px;
box-shadow 0.2s;
&:hover {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
canvas {
@ -92,17 +100,28 @@ $nav-size-sm: 50px;
.crud {
&-list {
width: calc(100vw - $nav-size - 30px);
padding: 20px;
background: $light-grey;
border-radius: 10px;
margin-left: 15px;
margin-right: 15px;
width: 100%;
th,
td {
background: $light-grey;
vertical-align: middle;
padding-top: 1rem;
padding-bottom: 1rem;
transition: background 0.5s;
}
tr {
td:first-child, th:first-child {
padding-left: 1rem;
}
td:last-child, th:last-child {
padding-right: 1rem;
}
&:hover td {
background: $light-grey;
}
}
thead th {
@ -171,7 +190,7 @@ $nav-size-sm: 50px;
.crud {
&-list {
width: calc(100vw - $nav-size-sm - 30px);
width: calc(100vw - $nav-size-sm);
overflow: scroll;
}
}
@ -180,3 +199,8 @@ $nav-size-sm: 50px;
width: calc(100vw - $nav-size-sm);
}
}
.header {
background: map-get($theme-colors, 'headerBg');
color: map-get($theme-colors, 'headerText');
}