ok comportamento close su fade offcanvas

This commit is contained in:
zaccaria.majid
2023-06-01 08:51:08 +02:00
parent 2f6f728be4
commit e3dcbe2b61
4 changed files with 44 additions and 43 deletions
@@ -3,7 +3,7 @@
}
.customFade {
position: fixed;
z-index: 9999;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
@@ -25,6 +25,7 @@
padding-top: 60px;
animation: slideRight 0.5s;
background: #EFEFEF;
z-index: 9999;
}
.sidenav a {
padding: 8px 8px 8px 32px;
@@ -4,7 +4,7 @@
.customFade {
position: fixed;
z-index: 9999;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
@@ -27,6 +27,7 @@
padding-top: 60px;
animation: slideRight .5s;
background: #EFEFEF;
z-index: 9999;
}
.sidenav a {
@@ -1 +1 @@
body{font-family:"Lato",sans-serif;}.customFade{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4);}.sidenav{height:100%;width:20%;position:fixed;z-index:1;top:0;right:0;background-color:#111;overflow-x:hidden;transition:.5s;padding-top:60px;animation:slideRight .5s;background:#efefef;}.sidenav a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:#818181;display:block;transition:.3s;cursor:pointer;}.sidenav a:hover{color:#515151;}.sidenav .closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px;}#main{transition:margin-left .5s;padding:16px;}@media screen and (max-height:450px){.sidenav{padding-top:15px;}.sidenav a{font-size:18px;}}@keyframes slideRight{0%{width:0%;}100%{width:20%;}}
body{font-family:"Lato",sans-serif;}.customFade{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4);}.sidenav{height:100%;width:20%;position:fixed;z-index:1;top:0;right:0;background-color:#111;overflow-x:hidden;transition:.5s;padding-top:60px;animation:slideRight .5s;background:#efefef;z-index:9999;}.sidenav a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:#818181;display:block;transition:.3s;cursor:pointer;}.sidenav a:hover{color:#515151;}.sidenav .closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px;}#main{transition:margin-left .5s;padding:16px;}@media screen and (max-height:450px){.sidenav{padding-top:15px;}.sidenav a{font-size:18px;}}@keyframes slideRight{0%{width:0%;}100%{width:20%;}}
@@ -1,55 +1,54 @@
@if (isMenuShow)
{
<div class="customFade">
<div id="mySidenav" class="sidenav">
<a class="closebtn" @onclick="()=>closeMenu()">&times;</a>
<span class="fs-3">ORDER FILTERS</span>
<AuthorizeView Roles="SuperAdmin, DcaAdmin, DcaProj, DcaOrdMan, CompAdmin">
<Authorized>
<div class="p-2">
<div class="form-floating col ps-1">
@if (listCompanies != null)
<div class="customFade" @onclick="()=>closeMenu()">
</div>
<div id="mySidenav" class="sidenav">
<a class="closebtn" @onclick="()=>closeMenu()">&times;</a>
<span class="fs-3">ORDER FILTERS</span>
<AuthorizeView Roles="SuperAdmin, DcaAdmin, DcaProj, DcaOrdMan, CompAdmin">
<Authorized>
<div class="p-2">
<div class="form-floating col ps-1">
@if (listCompanies != null)
{
@if (listCompanies.Count > 1)
{
@if (listCompanies.Count > 1)
{
<select @bind="userCurrCompany" class="form-select form-select-sm">
<option value="0">-- All COMPANIES --</option>
@foreach (var item in listCompanies)
{
<option value="@item.CompanyId">@item.CompanyName</option>
}
</select>
}
else
{
@if (compToShow != null)
<select @bind="userCurrCompany" class="form-select form-select-sm">
<option value="0">-- All COMPANIES --</option>
@foreach (var item in listCompanies)
{
<input class="form-control form-control-sm" value="@compToShow.CompanyName" disabled />
<option value="@item.CompanyId">@item.CompanyName</option>
}
</select>
}
else
{
@if (compToShow != null)
{
<input class="form-control form-control-sm" value="@compToShow.CompanyName" disabled />
}
}
<label for="company">Company</label>
</div>
}
<label for="company">Company</label>
</div>
</Authorized>
</AuthorizeView>
<div class="p-2">
<div class="form-floating col ps-1">
<input id="dateFrom" @bind="@dateFrom" type="date" class="form-control" />
<label for="dateFrom">Date From</label>
</div>
</div>
<div class="p-2">
<div class="form-floating col ps-1">
<input id="dateTo" @bind="@dateTo" type="date" class="form-control" />
<label for="dateTo">Date To</label>
</div>
</div>
</Authorized>
</AuthorizeView>
<div class="p-2">
<div class="form-floating col ps-1">
<input id="dateFrom" @bind="@dateFrom" type="date" class="form-control" />
<label for="dateFrom">Date From</label>
</div>
</div>
<div class="p-2">
<div class="form-floating col ps-1">
<input id="dateTo" @bind="@dateTo" type="date" class="form-control" />
<label for="dateTo">Date To</label>
</div>
</div>
</div>
}