vinny/iptv-stream-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete 3.3.3: Mobile Navigation - Implement bottom navigation pattern for mobile with chat controls

Browse source
This commit is contained in:
VinnyNC 2025-09-29 21:29:03 -04:00
parent a7fa21d3fa
commit 91a5c81a25
3 changed files with 188 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

119
static/css/components.css
View file

@ -1401,3 +1401,122 @@
font-size: 20px;
background: rgba(0,90,156,0.9);
}
/* =================================================================
MOBILE BOTTOM NAVIGATION
================================================================= */
.mobile-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, var(--dodgers-blue-700), var(--dodgers-blue-600));
border-top: 1px solid rgba(255,255,255,0.2);
box-shadow: var(--elevation-8);
backdrop-filter: blur(10px);
padding: var(--spacing-3) var(--spacing-4);
display: none; /* Hidden by default, shown only on mobile */
z-index: var(--z-fixed);
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.mobile-nav.active {
display: flex;
}
.mobile-nav-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-1);
padding: var(--spacing-2) var(--spacing-1);
min-height: var(--min-tap-target-size, 44px);
min-width: var(--min-tap-target-size, 44px);
border: none;
background: transparent;
color: rgba(255,255,255,0.9);
border-radius: var(--border-radius-lg);
cursor: pointer;
transition: all var(--transition-fast);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
text-align: center;
}
.mobile-nav-btn:active {
transform: scale(0.95);
background: rgba(255,255,255,0.1);
}
.mobile-nav-btn:hover {
color: white;
background: rgba(255,255,255,0.15);
}
.mobile-nav-btn.active {
background: rgba(255,255,255,0.2);
color: white;
}
.mobile-nav-btn .icon {
font-size: 20px;
width: 24px;
height: 24px;
}
.mobile-nav-btn span {
font-size: 10px;
line-height: 1;
opacity: 0.9;
}
/* Mobile navigation responsive behavior */
@media (max-width: calc(var(--breakpoint-md) - 1px)) {
.mobile-nav {
display: flex;
}
}
@media (max-width: calc(var(--breakpoint-sm) - 1px)) {
.mobile-nav {
padding: var(--spacing-2) var(--spacing-3);
gap: var(--spacing-3);
}
.mobile-nav-btn {
padding: var(--spacing-1);
gap: 2px;
min-width: 48px;
}
.mobile-nav-btn .icon {
width: 20px;
height: 20px;
font-size: 18px;
}
.mobile-nav-btn span {
font-size: 9px;
}
}
/* Safe area support for devices with notches */
@supports (padding-bottom: max(0px)) {
.mobile-nav {
padding-bottom: max(var(--spacing-3), env(safe-area-inset-bottom));
}
body.mobile-nav-active {
padding-bottom: 80px; /* Space for bottom nav */
}
@media (max-width: calc(var(--breakpoint-md) - 1px)) {
body.mobile-nav-active {
padding-bottom: max(70px, calc(70px + env(safe-area-inset-bottom)));
}
}
}