SnitchItaly/frontend
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: minor fixes on styling and UI related stuff

Browse Source
This commit is contained in:
gabdevele
2026-06-13 13:04:40 +02:00 Unverified
parent 1dbbfbaa2e
commit 31dac98b48
12 changed files with 293 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -22,3 +22,6 @@ logs
.env
.env.*
!.env.example
pnpm-*.yaml
AGENTS.md
app/assets/css/style.css
+254 -1
View File
@@ -1,7 +1,260 @@
:root {
--visione-primary: #06c;
--visione-primary-dark: #17324d;
--visione-text-muted: #455b71;
--visione-text-body: #17324d;
--visione-text-soft: #455b71;
--visione-success: #008758;
--visione-warning: #a66300;
--visione-danger: #d9364f;
--visione-info: #2f80ed;
--visione-light-bg: #f0f6fc;
--visione-home-hero-bg: var(--visione-light-bg);
--visione-font-sans: "Titillium Web", Arial, sans-serif;
--visione-font-mono: "Roboto Mono", monospace;
}
html,
body {
color: var(--visione-text-body);
font-family: var(--visione-font-sans);
font-size: 1rem;
line-height: 1.5;
}
button,
input,
select,
textarea {
font-family: var(--visione-font-sans);
}
code,
kbd,
pre,
samp {
font-family: var(--visione-font-mono);
}
a {
text-decoration: none!important;
text-decoration: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-title,
.callout-title {
color: var(--visione-primary-dark);
font-family: var(--visione-font-sans);
line-height: 1.2;
}
p,
li,
td,
th,
label,
small,
.card-text,
.card .card-body .card-text,
.callout p,
.form-text {
color: inherit;
font-family: var(--visione-font-sans) !important;
}
.lead {
color: var(--visione-text-soft);
font-size: 1.125rem;
line-height: 1.55;
}
.text-muted,
.text-secondary {
color: var(--visione-text-soft) !important;
}
.text-dark {
color: var(--visione-text-body) !important;
}
.text-primary,
.category.text-primary {
color: var(--visione-primary) !important;
}
.text-success,
.category.text-success {
color: var(--visione-success) !important;
}
.text-warning {
color: var(--visione-warning) !important;
}
.text-danger {
color: var(--visione-danger) !important;
}
.text-info {
color: var(--visione-info) !important;
}
.display-1 {
font-size: clamp(3rem, 5vw, 4.75rem);
line-height: 1;
}
.display-3 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
line-height: 1;
}
.display-6 {
font-size: clamp(1.75rem, 2.4vw, 2.25rem);
line-height: 1.1;
}
.bg-light {
background-color: var(--visione-home-hero-bg) !important;
}
html body .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link[data-focus-mouse="true"], .navbar .navbar-collapsable .navbar-nav li.nav-item button.nav-link[data-focus-mouse="true"] {
border-color: inherit !important
}
.it-hero-wrapper.it-primary,
.it-hero-wrapper.it-primary-bg {
background: var(--visione-primary) !important;
color: #fff;
}
.it-hero-wrapper.it-primary h1,
.it-hero-wrapper.it-primary p,
.it-hero-wrapper.it-primary-bg h1,
.it-hero-wrapper.it-primary-bg p {
color: #fff !important;
}
.it-hero-wrapper .container {
min-height: 240px;
display: flex;
align-items: center;
}
.it-hero-wrapper .container > .row {
width: 100%;
justify-content: center;
}
.it-hero-wrapper .it-hero-text-wrapper {
max-width: 820px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.it-hero-wrapper .it-hero-text-wrapper h1,
.it-hero-wrapper .it-hero-text-wrapper p {
width: 100%;
}
.it-hero-wrapper.bg-light .it-hero-text-wrapper p {
font-size: 1.3rem;
}
.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-light h5,
.bg-light h6 {
color: var(--visione-primary-dark) !important;
}
.bg-light p,
.bg-light .lead,
.bg-light .text-muted,
.bg-light .text-secondary {
color: var(--visione-text-soft) !important;
}
.icon {
color: currentColor;
fill: currentColor;
flex-shrink: 0;
}
.icon-primary {
color: var(--visione-primary) !important;
fill: var(--visione-primary) !important;
}
.icon-success {
color: var(--visione-success) !important;
fill: var(--visione-success) !important;
}
.icon-warning {
color: var(--visione-warning) !important;
fill: var(--visione-warning) !important;
}
.icon-danger {
color: var(--visione-danger) !important;
fill: var(--visione-danger) !important;
}
.icon-info {
color: var(--visione-info) !important;
fill: var(--visione-info) !important;
}
.btn-primary .icon:not([class*="icon-"]),
.badge[class*="bg-"] .icon:not([class*="icon-"]),
.rounded-circle[class*="bg-"] .icon:not([class*="icon-"]) {
color: #fff;
fill: #fff;
}
.it-header-wrapper .header-slim-right-zone .btn .rounded-icon,
.it-header-wrapper .header-slim-right-zone .btn .rounded-icon .icon {
}
.it-footer,
.it-footer a,
.it-footer h2,
.it-footer h3,
.it-footer h4,
.it-footer .it-brand-text,
.it-footer .it-brand-text h2,
.it-footer .it-brand-text h3,
.it-footer .member-name,
.it-footer .icon {
color: #fff !important;
fill: #fff !important;
}
@media (max-width: 767.98px) {
.it-hero-wrapper .container {
min-height: 220px;
}
.it-hero-wrapper .it-hero-text-wrapper {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
app/components/BIIcon.vue
+17 -2
View File
@@ -1,9 +1,24 @@
<script setup lang="ts">
defineProps<{
const iconAliases: Record<string, string> = {
'it-bell': 'it-info-circle',
'it-grid': 'it-list',
'it-history': 'it-clock',
'it-home': 'it-pa',
'it-image': 'it-file-image',
'it-location': 'it-map-marker-circle',
'it-map': 'it-map-marker-circle',
'it-piu': 'it-plus',
'it-star': 'it-star-full',
'it-write': 'it-pencil',
}
const props = defineProps<{
name: string
size?: 'xs' | 'sm' | 'lg' | 'xl'
color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'white'
}>()
const resolvedName = computed(() => iconAliases[props.name] || props.name)
</script>
<template>
@@ -15,6 +30,6 @@ defineProps<{
]"
aria-hidden="true"
>
<use :href="`/sprites.svg#${name}`"></use>
<use :href="`/sprites.svg#${resolvedName}`"></use>
</svg>
</template>
app/components/Footer.vue
-1
View File
@@ -50,7 +50,6 @@ const { sortedMembers } = useMembers();
<li class="list-inline-item"><a href="/note-legali">Note legali</a></li>
<li class="list-inline-item"><a href="/privacy">Privacy policy</a></li>
<li class="list-inline-item"><a href="/sitemap.xml">Mappa del sito</a></li>
<li class="list-inline-item"><a href="https://form.agid.gov.it/view/xyz">Dichiarazione di accessibilità <span class="visually-hidden">(link esterno su sito AgID)</span></a></li>
</ul>
</div>
</div>
app/components/Header.vue
+3 -3
View File
@@ -48,7 +48,7 @@ const { isAuthenticated, user, logout } = useAuth()
<NuxtLink class="btn btn-primary btn-icon btn-full" to="/dashboard"
data-element="personal-area-dashboard" data-focus-mouse="false">
<span class="rounded-icon" aria-hidden="true">
<BIIcon name="it-user" />
<BIIcon name="it-user" color="black" />
</span>
<span class="d-none d-lg-block">{{ user?.first_name }}</span>
</NuxtLink>
@@ -56,7 +56,7 @@ const { isAuthenticated, user, logout } = useAuth()
<button class="btn btn-primary btn-icon btn-full border-0" @click="logout"
data-element="personal-area-logout" data-focus-mouse="false">
<span class="rounded-icon" aria-hidden="true">
<BIIcon name="it-logout" /> <!-- usa it-unlocked se it-logout non è presente -->
<BIIcon name="it-logout" color="white" />
</span>
<span class="d-none d-lg-block">Esci</span>
</button>
@@ -66,7 +66,7 @@ const { isAuthenticated, user, logout } = useAuth()
<NuxtLink v-else class="btn btn-primary btn-icon btn-full" to="/auth/login"
data-element="personal-area-login" data-focus-mouse="false">
<span class="rounded-icon" aria-hidden="true">
<BIIcon name="it-user" />
<BIIcon name="it-user" color="black" />
</span>
<span class="d-none d-lg-block">Login</span>
</NuxtLink>
app/components/dashboard/CitizenDashboard.vue
-1
View File
@@ -245,7 +245,6 @@ const formatDate = (dateString?: string): string => {
</template>
<style scoped>
.display-6 { font-size: 2.2rem; line-height: 1; }
.table-hover tbody tr:hover { background-color: rgba(0, 111, 157, 0.03); }
.btn-group .btn { min-width: 80px; }
</style>
app/pages/dashboard/index.vue
+1 -8
View File
@@ -39,7 +39,7 @@ const heroSubtitle = computed(() => {
<div class="it-hero-wrapper it-primary">
<div class="container">
<div class="row">
<div class="col-12">
<div class="col-12 text-center">
<div class="it-hero-text-wrapper p-4">
<h1 class="text-white font-weight-bold">{{ heroTitle }}</h1>
<p class="text-white mt-2 lead">
@@ -71,10 +71,3 @@ const heroSubtitle = computed(() => {
</div>
</div>
</template>
<style scoped>
/* Il gradiente originale della pagina rotta */
.it-primary {
background: linear-gradient(135deg, #006f9d 0%, #003d5c 100%);
}
</style>
app/pages/index.vue
+4 -4
View File
@@ -19,10 +19,10 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
<div class="it-hero-wrapper bg-light">
<div class="container">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2 text-center">
<div class="col-12 col-lg-8 mx-auto text-center">
<div class="it-hero-text-wrapper p-4">
<h1 class="no_toc font-weight-bold text-dark">Miglioriamo insieme la città</h1>
<p class="d-none d-lg-block mt-3 mb-4 text-secondary">
<h1 class="no_toc font-weight-bold">Miglioriamo insieme la città</h1>
<p class="d-none d-lg-block mt-3 mb-4 text-muted">
Il portale ufficiale nazionale per segnalare disservizi urbani. Scatta una foto, invia la segnalazione
e monitora l'intervento in totale trasparenza.
</p>
@@ -68,7 +68,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
</div>
</div>
<div class="bg-light py-5 border-top border-bottom">
<div class="bg-light py-5">
<div class="container my-4">
<h2 class="text-center mb-5 font-weight-bold">I numeri del nostro Comune</h2>
<div class="row text-center">
app/pages/me.vue
-6
View File
@@ -246,14 +246,8 @@ const handleLogout = () => {
border-color: #ffc107;
}
.display-3 {
font-size: 3.5rem;
line-height: 1;
}
.table-hover tbody tr:hover {
background-color: rgba(0, 111, 157, 0.05);
}
</style>
app/pages/open-data.vue
+1 -1
View File
@@ -47,7 +47,7 @@ const getStatusBadge = (status: string) => {
<div class="it-hero-wrapper it-primary">
<div class="container">
<div class="row">
<div class="col-12">
<div class="col-12 text-center">
<div class="it-hero-text-wrapper p-4">
<h1 class="text-white font-weight-bold">Open Data Interventi</h1>
<p class="text-white mt-2 lead">
app/pages/reports/create.vue
+1 -7
View File
@@ -76,7 +76,7 @@ const handleReportSubmit = async (reportData: CreateReportRequest, mediaFiles: F
<div class="it-hero-wrapper it-primary-bg">
<div class="container">
<div class="row">
<div class="col-12">
<div class="col-12 text-center">
<div class="it-hero-text-wrapper p-4">
<h1 class="text-white font-weight-bold">Segnala un problema</h1>
<p class="text-white mt-2 lead">
@@ -141,9 +141,3 @@ const handleReportSubmit = async (reportData: CreateReportRequest, mediaFiles: F
</div>
</template>
<style scoped>
.it-primary-bg {
background: linear-gradient(135deg, #006f9d 0%, #003d5c 100%);
}
</style>
nuxt.config.ts
+2 -2
View File
@@ -45,8 +45,8 @@ export default defineNuxtConfig({
},
css: [
'@/assets/css/style.css',
'bootstrap-italia/dist/css/bootstrap-italia.min.css'
'bootstrap-italia/dist/css/bootstrap-italia.min.css',
'@/assets/css/style.css'
],
fonts: {