- update gestione collassa menù sx
This commit is contained in:
Samuele Locatelli
2024-10-31 10:51:47 +01:00
parent 76d8628b2a
commit 882c68ff27
12 changed files with 304 additions and 114 deletions
+2 -2
View File
@@ -4,8 +4,8 @@
<TargetFramework>net6.0</TargetFramework>
<RootNamespace>MP.Stats</RootNamespace>
<UserSecretsId>826e877c-ba70-4253-84cb-d0b1cafd4440</UserSecretsId>
<Version>6.16.2410.3010</Version>
<Version>6.16.2410.3010</Version>
<Version>6.16.2410.3110</Version>
<Version>6.16.2410.3110</Version>
<GenerateDocumentationFile>true</GenerateDocumentationFile>
<NoWarn>$(NoWarn);1591</NoWarn>
</PropertyGroup>
+1 -1
View File
@@ -1,6 +1,6 @@
<body>
<i>Modulo statistiche MAPO</i>
<h4>Versione: 6.16.2410.3010</h4>
<h4>Versione: 6.16.2410.3110</h4>
<br />
Note di rilascio:
<ul>
+1 -1
View File
@@ -1 +1 @@
6.16.2410.3010
6.16.2410.3110
+1 -1
View File
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<item>
<version>6.16.2410.3010</version>
<version>6.16.2410.3110</version>
<url>https://nexus.steamware.net/repository/SWS/MP-STATS/stable/LAST/MP.Stats.zip</url>
<changelog>https://nexus.steamware.net/repository/SWS/MP-STATS/stable/LAST/ChangeLog.html</changelog>
<mandatory>false</mandatory>
+1 -1
View File
@@ -6,7 +6,7 @@
<div class="page">
<div class="@sideClass">
<NavMenu />
<NavMenu EC_compressUpdated="@UpdateNavDisplay" />
</div>
<CascadingValue Name="ShowSearch" Value=@ShowSearch>
+1
View File
@@ -61,5 +61,6 @@ namespace MP.Stats.Shared
private bool ShowSearch { get; set; } = false;
#endregion Private Properties
}
}
+75 -87
View File
@@ -1,102 +1,90 @@
.page {
position: relative;
display: flex;
flex-direction: column;
.page {
position: relative;
display: flex;
flex-direction: column;
}
main {
flex: 1;
flex: 1;
}
.sidebar, .sidebarSmall {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 20%, #3aa6ff 90%);
.sidebar,
.sidebarSmall {
background-image: -webkit-linear-gradient(180deg, #052767 20%, #3aa6ff 90%);
background-image: linear-gradient(180deg, #052767 20%, #3aa6ff 90%);
}
.top-row {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
height: 3.5rem;
align-items: center;
/*justify-content: space-evenly;
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
height: 3.5rem;
align-items: center;
/*justify-content: space-evenly;
display: flex;*/
}
.top-row ::deep a, .top-row .btn-link {
white-space: nowrap;
margin-left: 0.5rem;
}
.top-row a:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
.top-row ::deep a,
.top-row .btn-link {
white-space: nowrap;
margin-left: 0.5rem;
}
.top-row a:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row:not(.auth) {
display: none;
}
.top-row.auth {
justify-content: space-between;
}
.top-row a, .top-row .btn-link {
margin-left: 0;
}
.top-row:not(.auth) {
display: none;
}
.top-row.auth {
justify-content: space-between;
}
.top-row a,
.top-row .btn-link {
margin-left: 0;
}
}
.bottom-row {
color: #dedede;
background-color: #000000;
height: 1.6rem;
align-items: center;
color: #dedede;
background-color: #000000;
height: 1.6rem;
align-items: center;
}
@media (max-width: 640.99px) {
.main > div {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.main > div {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
}
@media (min-width: 641px) {
.page {
flex-direction: row;
}
.sidebar {
width: 230px;
height: 100vh;
position: sticky;
top: 0;
}
.sidebarSmall {
width: 80px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row {
position: sticky;
top: 0;
z-index: 1;
}
.top-row, article {
padding-left: 1rem !important;
padding-right: 1.0rem !important;
}
.bottom-row {
position: fixed;
bottom: 0;
z-index: 1;
}
.main > div {
/*padding-left: 0.5rem !important;
.page {
flex-direction: row;
}
.sidebar {
width: 13.5rem;
height: 100vh;
position: sticky;
top: 0;
}
.sidebarSmall {
width: 4.5rem;
height: 100vh;
position: sticky;
top: 0;
}
.top-row {
position: sticky;
top: 0;
z-index: 1;
}
.top-row,
article {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.bottom-row {
position: fixed;
bottom: 0;
z-index: 1;
}
.main > div {
/*padding-left: 0.5rem !important;
padding-right: 0.5rem !important;*/
}
}
}
}
+104
View File
@@ -0,0 +1,104 @@
.page {
position: relative;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
.sidebar,
.sidebarSmall {
background-image: -webkit-linear-gradient(180deg, rgb(5, 39, 103) 20%, #3aa6ff 90%);
background-image: linear-gradient(180deg, rgb(5, 39, 103) 20%, #3aa6ff 90%);
}
.top-row {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
height: 3.5rem;
align-items: center;
/*justify-content: space-evenly;
display: flex;*/
}
.top-row ::deep a, .top-row .btn-link {
white-space: nowrap;
margin-left: 0.5rem;
}
.top-row a:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row:not(.auth) {
display: none;
}
.top-row.auth {
justify-content: space-between;
}
.top-row a, .top-row .btn-link {
margin-left: 0;
}
}
.bottom-row {
color: #dedede;
background-color: #000000;
height: 1.6rem;
align-items: center;
}
@media (max-width: 640.99px) {
.main > div {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
}
@media (min-width: 641px) {
.page {
flex-direction: row;
}
.sidebar {
width: 13.5rem;
height: 100vh;
position: sticky;
top: 0;
}
.sidebarSmall {
width: 4.5rem;
height: 100vh;
position: sticky;
top: 0;
}
.top-row {
position: sticky;
top: 0;
z-index: 1;
}
.top-row, article {
padding-left: 1rem !important;
padding-right: 1.0rem !important;
}
.bottom-row {
position: fixed;
bottom: 0;
z-index: 1;
}
.main > div {
/*padding-left: 0.5rem !important;
padding-right: 0.5rem !important;*/
}
}
+1
View File
@@ -0,0 +1 @@
.page{position:relative;display:flex;flex-direction:column;}main{flex:1;}.sidebar,.sidebarSmall{background-image:-webkit-linear-gradient(180deg,#052767 20%,#3aa6ff 90%);background-image:linear-gradient(180deg,#052767 20%,#3aa6ff 90%);}.top-row{background-color:#f7f7f7;border-bottom:1px solid #d6d5d5;height:3.5rem;align-items:center;}.top-row ::deep a,.top-row .btn-link{white-space:nowrap;margin-left:.5rem;}.top-row a:first-child{overflow:hidden;text-overflow:ellipsis;}@media(max-width:640.98px){.top-row:not(.auth){display:none;}.top-row.auth{justify-content:space-between;}.top-row a,.top-row .btn-link{margin-left:0;}}.bottom-row{color:#dedede;background-color:#000;height:1.6rem;align-items:center;}@media(max-width:640.99px){.main>div{padding-left:.5rem!important;padding-right:.5rem!important;}}@media(min-width:641px){.page{flex-direction:row;}.sidebar{width:13.5rem;height:100vh;position:sticky;top:0;}.sidebarSmall{width:4.5rem;height:100vh;position:sticky;top:0;}.top-row{position:sticky;top:0;z-index:1;}.top-row,article{padding-left:1rem!important;padding-right:1rem!important;}.bottom-row{position:fixed;bottom:0;z-index:1;}}
+58 -21
View File
@@ -1,5 +1,12 @@
<div class="top-row ps-3 navbar navbar-dark">
<a class="navbar-brand" href="">MP-STATS</a>
@if (!showText)
{
<a class="navbar-brand p-0" @onclick="() => ToggleCompress()">MP.S <i class="fas fa-caret-square-right"></i></a>
}
else
{
<a class="navbar-brand" @onclick="() => ToggleCompress()">MP.STATS <i class="fas fa-caret-square-left"></i></a>
}
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
@@ -9,64 +16,94 @@
<ul class="nav flex-column">
<li class="nav-item px-2">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
<span class="oi oi-home" aria-hidden="true"></span>
@if (showText)
{
<span class="@hideText">Home</span>
}
</NavLink>
</li>
<li class="nav-item px-2">
<NavLink class="nav-link" href="Oee">
<span class="oi oi-monitor" aria-hidden="true"></span> TRS/OEE %
<span class="oi oi-monitor" aria-hidden="true"></span>
@if (showText)
{
<span class="@hideText">TRS/OEE %</span>
}
</NavLink>
</li>
<li class="nav-item px-2">
<NavLink class="nav-link" href="Energy">
<span class="oi oi-bar-chart" aria-hidden="true"></span> ENERGY
<span class="oi oi-bar-chart" aria-hidden="true"></span>
@if (showText)
{
<span class="@hideText">ENERGY</span>
}
</NavLink>
</li>
<li class="nav-item px-2">
<NavLink class="nav-link" href="ReportODL">
<span class="oi oi-book" aria-hidden="true" title="Dati di Produzione ODL"></span> Report ODL/Comm.
<span class="oi oi-book" aria-hidden="true" title="Dati di Produzione ODL"></span>
@if (showText)
{
<span class="@hideText">Report ODL/Comm.</span>
}
</NavLink>
</li>
<li class="nav-item px-2">
<NavLink class="nav-link" href="Diario">
<span class="oi oi-clipboard" aria-hidden="true" title="Dettaglio dati di Produzione"></span> Diario Produzione
<span class="oi oi-clipboard" aria-hidden="true" title="Dettaglio dati di Produzione"></span>
@if (showText)
{
<span class="@hideText">Diario Produzione</span>
}
</NavLink>
</li>
<li class="nav-item px-2">
<NavLink class="nav-link" href="UserLog">
<span class="oi oi-document" aria-hidden="true" title="Statistiche Controlli"></span> User ActionLog
<span class="oi oi-document" aria-hidden="true" title="Statistiche Controlli"></span>
@if (showText)
{
<span class="@hideText">User ActionLog</span>
}
</NavLink>
</li>
<li class="nav-item px-2">
<NavLink class="nav-link" href="Controlli">
<span class="oi oi-beaker" aria-hidden="true" title="Registro Controlli"></span> Registro Controlli
<span class="oi oi-beaker" aria-hidden="true" title="Registro Controlli"></span>
@if (showText)
{
<span class="@hideText">Registro Controlli</span>
}
</NavLink>
</li>
<li class="nav-item px-2">
<NavLink class="nav-link" href="Scarti">
<span class="oi oi-warning" aria-hidden="true" title="Registro Scarti"></span> Registro Scarti
<span class="oi oi-warning" aria-hidden="true" title="Registro Scarti"></span>
@if (showText)
{
<span class="@hideText">Registro Scarti</span>
}
</NavLink>
</li>
<li class="nav-item px-2">
<NavLink class="nav-link" href="TaskScheduler">
<span class="oi oi-clock" aria-hidden="true"></span> Task Scheduler
<span class="oi oi-clock" aria-hidden="true"></span>
@if (showText)
{
<span class="@hideText">Task Scheduler</span>
}
</NavLink>
</li>
<li class="nav-item px-2">
<NavLink class="nav-link" href="ForceReset">
<span class="oi oi-reload" aria-hidden="true"></span> Force Reset
<span class="oi oi-reload" aria-hidden="true"></span>
@if (showText)
{
<span class="@hideText">Force Reset</span>
}
</NavLink>
</li>
</ul>
</div>
@code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
+55
View File
@@ -0,0 +1,55 @@
using Microsoft.AspNetCore.Components;
namespace MP.Stats.Shared
{
public partial class NavMenu
{
#region Public Properties
[Parameter]
public EventCallback<bool> EC_compressUpdated { get; set; }
#endregion Public Properties
#region Protected Properties
protected string hideText { get => showText ? "" : "invisible"; }
protected bool showText { get; set; } = true;
#endregion Protected Properties
#region Protected Methods
protected void ToggleCompress()
{
showText = !showText;
EC_compressUpdated.InvokeAsync(showText);
}
#endregion Protected Methods
#region Private Fields
private bool collapseNavMenu = true;
private bool onlyIcon = false;
#endregion Private Fields
#region Private Properties
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private string? TextCss => onlyIcon ? "d-none" : "";
#endregion Private Properties
#region Private Methods
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
#endregion Private Methods
}
}
+4
View File
@@ -6,5 +6,9 @@
{
"outputFile": "wwwroot/css/site.css",
"inputFile": "wwwroot/css/site.less"
},
{
"outputFile": "Shared/MainLayout.razor.css",
"inputFile": "Shared/MainLayout.razor.less"
}
]