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 2024-11-13 17:56:10 +01:00
commit 997df7cf7c
5 changed files with 21 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/js/App.vue
View file

@ -5,7 +5,7 @@ import { BNavItem } from 'bootstrap-vue-next'
<template>
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark bg-body-tertiary" id="nav">
<div class="d-flex flex-column flex-shrink-0 p-3" id="nav">
<a href="/" class="mb-4 text-white text-decoration-none text-center">
<span class="fs-4">
<i class="fa-solid fa-coins"></i>

1
frontend/js/chart/monthThreshold.js
View file

@ -16,6 +16,7 @@ const getDate = (value) => {
const compute = (transactions, cats, dateFrom, dateTo) => {
let categories = {}
let datas = {}
transactions = transactions.reverse()
cats.forEach((value) => {
if (value.month_threshold > 0) {

16
frontend/scss/main.scss
View file

@ -12,7 +12,7 @@ $theme-colors: (
);
$pagination-active-bg: map-get($theme-colors, 'secondary');
$nav-pills-link-active-bg: map-get($theme-colors, 'secondary');
$nav-pills-link-active-bg: darken(map-get($theme-colors, 'primary'), 5%);
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-vue-next/dist/bootstrap-vue-next.css";
@ -21,15 +21,15 @@ $nav-pills-link-active-bg: map-get($theme-colors, 'secondary');
$light-grey: #e9ecef;
#app-name {
padding-left: 5px;
padding-left: 8px;
}
.bg-body-tertiary {
background-color: map-get($theme-colors, 'primary') !important;
}
#login-form {
background: linear-gradient(-45deg, map-get($theme-colors, 'primary') 50%, map-get($theme-colors, 'secondary') 100%);
.gradient-custom {
background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
.card {
background: linear-gradient(-45deg, darken(map-get($theme-colors, 'primary'), 10%) 50%, map-get($theme-colors, 'secondary') 100%);
}
}
.cursor {
@ -47,6 +47,7 @@ $nav-size-sm: 50px;
#nav {
width: $nav-size;
background: map-get($theme-colors, 'primary');
i {
width: 20px;
@ -61,7 +62,6 @@ $nav-size-sm: 50px;
transition: transform .2s, box-shadow .2s;
&:hover {
transform: scale(1.005);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
}

14
web/view/template/auth/login.templ
View file

@ -7,13 +7,19 @@ templ Page(hasError bool) {
<html>
@template.Head("Login")
<body>
<section class="vh-100 gradient-custom">
<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 bg-dark text-white" style="border-radius: 1rem;">
<div class="card-body p-5">
<div class="mb-md-5 mt-md-4 pb-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">
if hasError {
<div class="alert alert-danger">

2
web/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 gradient-custom\"><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 bg-dark text-white\" style=\"border-radius: 1rem;\"><div class=\"card-body p-5\"><div class=\"mb-md-5 mt-md-4 pb-5\"><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 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\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}