Migliorata UI

This commit is contained in:
2025-09-22 12:26:10 +02:00
parent c61093a942
commit ce56e9e57d
12 changed files with 230 additions and 220 deletions

View File

@@ -80,13 +80,12 @@
} }
.day { .day {
background: var(--mud-palette-surface);
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease; transition: background 0.3s ease, transform 0.2s ease;
font-size: 0.95rem; font-size: 0.95rem;
box-shadow: var(--custom-box-shadow); background: var(--mud-palette-background-gray);
width: 38px; width: 38px;
height: 38px; height: 38px;
display: flex; display: flex;
@@ -94,7 +93,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: var(--mud-palette-text-primary); color: var(--mud-palette-text-primary);
border: 1px solid var(--mud-palette-surface); border: 1px solid var(--mud-palette-background-gray);
margin: 0 auto; margin: 0 auto;
} }

View File

@@ -118,7 +118,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: -webkit-fill-available; width: -webkit-fill-available;
box-shadow: var(--custom-box-shadow); background: var(--light-card-background);
border-radius: 16px; border-radius: 16px;
overflow: clip; overflow: clip;
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -135,7 +135,6 @@
display: flex; display: flex;
position: relative; position: relative;
z-index: 1; z-index: 1;
background: var(--mud-palette-surface);
} }
/* la lineetta */ /* la lineetta */

View File

@@ -1,5 +1,5 @@
.container-primary-info { .container-primary-info {
box-shadow: var(--custom-box-shadow); background: var(--light-card-background);
width: 100%; width: 100%;
margin-bottom: 2rem; margin-bottom: 2rem;
border-radius: 12px; border-radius: 12px;

View File

@@ -97,6 +97,7 @@ else
</div> </div>
</div> </div>
<div class="tab-section">
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab1" checked="@(ActiveTab == 0)"> <input type="radio" class="tab-toggle" name="tab-toggle" id="tab1" checked="@(ActiveTab == 0)">
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab2" checked="@(ActiveTab == 1)"> <input type="radio" class="tab-toggle" name="tab-toggle" id="tab2" checked="@(ActiveTab == 1)">
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab3" checked="@(ActiveTab == 2)"> <input type="radio" class="tab-toggle" name="tab-toggle" id="tab3" checked="@(ActiveTab == 2)">
@@ -133,9 +134,12 @@ else
} }
<div class="container-button"> <div class="container-button">
<div class="divider"></div>
<MudButton Class="button-settings infoText" <MudButton Class="button-settings infoText"
FullWidth="true" FullWidth="true"
Size="Size.Medium" Size="Size.Medium"
StartIcon="@Icons.Material.Rounded.Add"
OnClick="OpenPersRifForm" OnClick="OpenPersRifForm"
Variant="Variant.Outlined"> Variant="Variant.Outlined">
Aggiungi contatto Aggiungi contatto
@@ -156,11 +160,13 @@ else
else if (Commesse != null) else if (Commesse != null)
{ {
<!-- Filtri e ricerca --> <!-- Filtri e ricerca -->
<div class="input-card clearButton"> <div class="input-card clearButton custom-border-bottom">
<MudTextField T="string?" <MudTextField T="string?"
Placeholder="Cerca..." Placeholder="Cerca..."
Variant="Variant.Text" Variant="Variant.Text"
@bind-Value="SearchTermCommesse" @bind-Value="SearchTermCommesse"
AdornmentIcon="@Icons.Material.Rounded.Search"
Adornment="Adornment.Start"
OnDebounceIntervalElapsed="() => ApplyFiltersCommesse()" OnDebounceIntervalElapsed="() => ApplyFiltersCommesse()"
DebounceInterval="500"/> DebounceInterval="500"/>
</div> </div>
@@ -226,10 +232,12 @@ else
else if (ActivityList != null) else if (ActivityList != null)
{ {
<!-- Filtri e ricerca --> <!-- Filtri e ricerca -->
<div class="input-card clearButton"> <div class="input-card clearButton custom-border-bottom">
<MudTextField T="string?" <MudTextField T="string?"
Placeholder="Cerca..." Placeholder="Cerca..."
Variant="Variant.Text" Variant="Variant.Text"
AdornmentIcon="@Icons.Material.Rounded.Search"
Adornment="Adornment.Start"
@bind-Value="SearchTermActivity" @bind-Value="SearchTermActivity"
OnDebounceIntervalElapsed="() => ApplyFiltersActivity()" OnDebounceIntervalElapsed="() => ApplyFiltersActivity()"
DebounceInterval="500"/> DebounceInterval="500"/>
@@ -270,6 +278,7 @@ else
<MudFab Size="Size.Small" Color="Color.Primary" StartIcon="@Icons.Material.Rounded.KeyboardArrowUp"/> <MudFab Size="Size.Small" Color="Color.Primary" StartIcon="@Icons.Material.Rounded.KeyboardArrowUp"/>
</MudScrollToTop> </MudScrollToTop>
</div> </div>
</div>
} }
@code { @code {

View File

@@ -1,5 +1,11 @@
.tab-section {
width: 100%;
border-radius: var(--mud-default-borderradius);
background: var(--light-card-background);
}
.container-primary-info { .container-primary-info {
box-shadow: var(--custom-box-shadow); background: var(--light-card-background);
width: 100%; width: 100%;
margin-bottom: 2rem; margin-bottom: 2rem;
border-radius: 16px; border-radius: 16px;
@@ -85,8 +91,9 @@
.container-button { .container-button {
width: 100%; width: 100%;
box-shadow: var(--custom-box-shadow); background: var(--light-card-background);
padding: .25rem 0; padding: 0 !important;
padding-bottom: .5rem !;
border-radius: 16px; border-radius: 16px;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
@@ -138,8 +145,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
margin-bottom: 1rem; background: var(--light-card-background);
box-shadow: var(--custom-box-shadow);
border-radius: 16px; border-radius: 16px;
max-height: 32vh; max-height: 32vh;
overflow: auto; overflow: auto;
@@ -147,7 +153,12 @@
padding: 1rem 0; padding: 1rem 0;
} }
.container-pers-rif::-webkit-scrollbar { display: none; } .container-pers-rif::-webkit-scrollbar { width: 3px; }
.container-pers-rif::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 2px;
}
.container-pers-rif .divider { .container-pers-rif .divider {
margin: 0 0 0 3.5rem; margin: 0 0 0 3.5rem;
@@ -176,12 +187,14 @@
/*-------------- /*--------------
TabPanel TabPanel
----------------*/ ----------------*/
.box { .box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: -webkit-fill-available; width: -webkit-fill-available;
box-shadow: var(--custom-box-shadow); background: var(--light-card-background);
border-radius: 16px; border-radius: 20px 20px 0 0;
border-bottom: .1rem solid var(--card-border-color);
overflow: clip; overflow: clip;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -197,7 +210,6 @@
display: flex; display: flex;
position: relative; position: relative;
z-index: 1; z-index: 1;
background: var(--mud-palette-surface);
} }
/* la lineetta */ /* la lineetta */
@@ -268,9 +280,7 @@
#tab1:checked ~ .tab-container .tab-content:nth-child(1), #tab1:checked ~ .tab-container .tab-content:nth-child(1),
#tab2:checked ~ .tab-container .tab-content:nth-child(2), #tab2:checked ~ .tab-container .tab-content:nth-child(2),
#tab3:checked ~ .tab-container .tab-content:nth-child(3) { #tab3:checked ~ .tab-container .tab-content:nth-child(3) { display: block; }
display: block;
}
@keyframes fade { @keyframes fade {
from { from {
@@ -286,10 +296,6 @@
.custom-pagination ::deep ul { padding-left: 0 !important; } .custom-pagination ::deep ul { padding-left: 0 !important; }
.SelectedPageSize { .SelectedPageSize { width: 100%; }
width: 100%;
}
.FilterSection { .FilterSection { display: flex; }
display: flex;
}

View File

@@ -5,14 +5,23 @@
padding: .5rem .5rem; padding: .5rem .5rem;
border-radius: 12px; border-radius: 12px;
line-height: normal; line-height: normal;
box-shadow: var(--custom-box-shadow); /*box-shadow: var(--custom-box-shadow);*/
} }
.activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); } .activity-card.memo {
border-left: 5px solid var(--mud-palette-info-darken);
background-color: hsl(from var(--mud-palette-info-darken) h s 98%);
}
.activity-card.interna { border-left: 5px solid var(--mud-palette-success-darken); } .activity-card.interna {
border-left: 5px solid var(--mud-palette-success-darken);
background-color: hsl(from var(--mud-palette-success-darken) h s 98%);
}
.activity-card.commessa { border-left: 5px solid var(--mud-palette-warning); } .activity-card.commessa {
border-left: 5px solid var(--mud-palette-warning);
background-color: hsl(from var(--mud-palette-warning) h s 98%);
}
.activity-left-section { .activity-left-section {
display: flex; display: flex;

View File

@@ -5,7 +5,7 @@
padding: .5rem .5rem; padding: .5rem .5rem;
border-radius: 12px; border-radius: 12px;
line-height: normal; line-height: normal;
box-shadow: var(--custom-box-shadow); background: var(--light-card-background);
} }
.activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); } .activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }

View File

@@ -5,15 +5,11 @@
padding: .5rem .5rem; padding: .5rem .5rem;
border-radius: 12px; border-radius: 12px;
line-height: normal; line-height: normal;
box-shadow: var(--custom-box-shadow);
border-left: 5px solid var(--card-border-color);
background-color: hsl(from var(--card-border-color) h s 98%);
} }
.activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }
.activity-card.interna { border-left: 5px solid var(--mud-palette-success-darken); }
.activity-card.commessa { border-left: 5px solid var(--mud-palette-warning); }
.activity-left-section { .activity-left-section {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -2,8 +2,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0 .75rem; padding: 0 .5rem;
border-radius: 16px;
line-height: normal; line-height: normal;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;

View File

@@ -2,7 +2,6 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: var(--mud-default-borderradius); border-radius: var(--mud-default-borderradius);
box-shadow: var(--custom-box-shadow);
width: 100%; width: 100%;
} }
@@ -39,7 +38,7 @@
align-items: center; align-items: center;
padding: 12px; padding: 12px;
gap: 12px; gap: 12px;
background: var(--mud-palette-background); background: var(--light-card-background);
transition: transform .2s ease; transition: transform .2s ease;
touch-action: pan-y; touch-action: pan-y;
will-change: transform; will-change: transform;

View File

@@ -8,4 +8,6 @@
--mud-default-borderradius: 20px !important; --mud-default-borderradius: 20px !important;
--m-page-x: 1rem; --m-page-x: 1rem;
--mh-header: 4rem; --mh-header: 4rem;
--light-card-background: hsl(from var(--mud-palette-background-gray) h s 97%);
} }

View File

@@ -5,13 +5,9 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.customDialog-form.disable-safe-area .mud-dialog-content { .customDialog-form.disable-safe-area .mud-dialog-content { margin-top: unset !important; }
margin-top: unset !important;
}
.customDialog-form.disable-safe-area .content { .customDialog-form.disable-safe-area .content { height: 100% !important; }
height: 100% !important;
}
.customDialog-form .content { .customDialog-form .content {
height: calc(100vh - (.6rem + 40px)); height: calc(100vh - (.6rem + 40px));
@@ -21,17 +17,11 @@
} }
@supports (-webkit-touch-callout: none) { @supports (-webkit-touch-callout: none) {
.customDialog-form .content { .customDialog-form .content { height: calc(100vh - (.6rem + 40px) - env(safe-area-inset-top)) !important; }
height: calc(100vh - (.6rem + 40px) - env(safe-area-inset-top)) !important;
}
.customDialog-form.disable-safe-area .content { .customDialog-form.disable-safe-area .content { height: 100% !important; }
height: 100% !important;
}
.customDialog-form.disable-safe-area .mud-dialog-content { .customDialog-form.disable-safe-area .mud-dialog-content { margin-top: unset !important; }
margin-top: unset !important;
}
} }
.customDialog-form .header { padding: 0 !important; } .customDialog-form .header { padding: 0 !important; }
@@ -53,6 +43,8 @@
padding: .4rem 1rem !important; padding: .4rem 1rem !important;
} }
.input-card.clearButton.custom-border-bottom { border-bottom: .1rem solid var(--card-border-color); }
.input-card > .divider { margin: 0 !important; } .input-card > .divider { margin: 0 !important; }
.form-container { .form-container {
@@ -114,7 +106,7 @@
.container-button { .container-button {
width: 100%; width: 100%;
box-shadow: var(--custom-box-shadow); background: var(--light-card-background);
padding: .5rem 0; padding: .5rem 0;
border-radius: 12px; border-radius: 12px;
margin-bottom: 2rem; margin-bottom: 2rem;