Prima implementazione pagina "Attività"
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
@*<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>*@
|
||||
<MudThemeProvider />
|
||||
<MudPopoverProvider />
|
||||
<MudDialogProvider />
|
||||
<MudSnackbarProvider />
|
||||
|
||||
<div class="page">
|
||||
<NavMenu/>
|
||||
|
||||
<main>
|
||||
|
||||
@@ -7,71 +7,3 @@
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.top-row ::deep a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-row.auth ::deep a:first-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.top-row, article {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
<div class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span>Home</span>
|
||||
<i class="ri-home-5-line"/>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" id="workout">
|
||||
<span>Workout</span>
|
||||
<i class="ri-empathize-line"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" id="logbook">
|
||||
<span>Logbook</span>
|
||||
<i class="ri-health-book-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" id="settings">
|
||||
<span>Impostazioni</span>
|
||||
<i class="ri-settings-5-line"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: var(--ligther-color);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
border-radius: 40px 40px 0px 0px;
|
||||
box-shadow: rgb(50 50 93 / 25%) 0 50px 100px 10px,
|
||||
rgb(0 0 0 / 30%) 0 30px 60px -30px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
flex: 0 0 25%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav :where(li a) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
padding: 1em;
|
||||
line-height: 1.4;
|
||||
-webkit-transition: all .3s ease-out;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
nav ul li a i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
nav ul li a span {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* animations */
|
||||
|
||||
nav li.active a::before, nav li.active a::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: var(--primary-color);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
nav li.active a::before {
|
||||
top: 5%;
|
||||
width: calc(100% - 0px);
|
||||
height: 100%;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
nav li.active a {
|
||||
color: var(--ligther-color);
|
||||
}
|
||||
@@ -1,38 +1,22 @@
|
||||
<nav class="navbar navbar-expand justify-content-center">
|
||||
<div class="container-fluid">
|
||||
<ul class="navbar-nav nav-justified w-100 text-center">
|
||||
<nav class="bottom-nav">
|
||||
<NavLink class="nav-item" href="" Match="NavLinkMatch.All">
|
||||
<div class="nav-icon-wrap">
|
||||
<i class="ri-home-5-line"></i>
|
||||
</div>
|
||||
<span class="nav-label">Home</span>
|
||||
</NavLink>
|
||||
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link " href="workout" Match="NavLinkMatch.All">
|
||||
<div class="d-flex flex-column">
|
||||
<i class="ri-empathize-line"/>
|
||||
@* <span>Workout</span> *@
|
||||
</div>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<div class="d-flex flex-column">
|
||||
<i class="ri-home-5-line"/>
|
||||
@* <span>Home</span> *@
|
||||
</div>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="logbook" Match="NavLinkMatch.All">
|
||||
<div class="d-flex flex-column">
|
||||
<i class="ri-health-book-line"></i>
|
||||
@* <span>Log Book</span> *@
|
||||
</div>
|
||||
</NavLink>
|
||||
</li>
|
||||
@* <li class="nav-item"> *@
|
||||
@* <NavLink class="nav-link d-flex flex-column" href="settings" Match="NavLinkMatch.All"> *@
|
||||
@* <i class="ri-settings-5-line"/> *@
|
||||
@* <span>Impostazioni</span> *@
|
||||
@* </NavLink> *@
|
||||
@* </li> *@
|
||||
</ul>
|
||||
</div>
|
||||
<NavLink class="nav-item" href="scheda-viaggi" Match="NavLinkMatch.Prefix">
|
||||
<div class="nav-icon-wrap">
|
||||
<i class="ri-route-line"></i>
|
||||
</div>
|
||||
<span class="nav-label">Viaggi</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink class="nav-item" href="attivita" Match="NavLinkMatch.Prefix">
|
||||
<div class="nav-icon-wrap">
|
||||
<i class="ri-task-line"></i>
|
||||
</div>
|
||||
<span class="nav-label">Attività</span>
|
||||
</NavLink>
|
||||
</nav>
|
||||
@@ -1,50 +1,92 @@
|
||||
.navbar {
|
||||
background-color: var(--ligther-color);
|
||||
border-radius: 50px 50px 0 0;
|
||||
border: #eceff2 solid 1px;
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
NavMenu — bottom nav, soft UI
|
||||
I .nav-item sono <a> resi da NavLink (componente figlio): vanno
|
||||
raggiunti con ::deep perché non ricevono l'attributo di scope.
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
.bottom-nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
height: 4.5rem;
|
||||
padding: 0 0.4rem;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border: 1px solid rgba(31, 30, 90, 0.05);
|
||||
border-radius: 26px;
|
||||
box-shadow: 0 12px 34px rgba(31, 30, 90, 0.14), 0 2px 8px rgba(31, 30, 90, 0.06);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
.bottom-nav ::deep .nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
gap: 0.28rem;
|
||||
padding: 0.4rem 0;
|
||||
color: #9a9aae;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.nav-item ::deep a {
|
||||
color: var(--darker-color);
|
||||
.bottom-nav ::deep .nav-item:hover {
|
||||
color: #6b6b7b;
|
||||
}
|
||||
|
||||
.bottom-nav ::deep .nav-item.active {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.bottom-nav ::deep .nav-icon-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.4;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-item ::deep a > div {
|
||||
width: 4.3rem;
|
||||
height: 4.3rem;
|
||||
width: 3.2rem;
|
||||
height: 2.3rem;
|
||||
border-radius: 100px;
|
||||
background: transparent;
|
||||
transition: background 0.22s ease, transform 0.22s ease;
|
||||
}
|
||||
|
||||
.bottom-nav ::deep .nav-item.active .nav-icon-wrap {
|
||||
background: rgba(83, 82, 237, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.bottom-nav ::deep .nav-item:hover:not(.active) .nav-icon-wrap {
|
||||
background: rgba(31, 30, 90, 0.05);
|
||||
}
|
||||
|
||||
.bottom-nav ::deep .nav-item i {
|
||||
font-size: 1.45rem;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 0.1rem;
|
||||
-webkit-transition: all .3s ease-out;
|
||||
transition: all .3s ease-out;
|
||||
transition: transform 0.22s ease;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active > div {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
.bottom-nav ::deep .nav-item.active i {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/*.nav-item a:hover :not(.active) {*/
|
||||
/* background-color: rgba(255, 255, 255, 0.1);*/
|
||||
/* color: var(--primary-color);*/
|
||||
/*}*/
|
||||
|
||||
|
||||
.nav-item ::deep a i {
|
||||
font-size: 2rem;
|
||||
.bottom-nav ::deep .nav-label {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-item ::deep a span {
|
||||
font-size: 0.9rem;
|
||||
.bottom-nav ::deep .nav-item.active .nav-label {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user