mirror of
https://github.com/dergigi/boris.git
synced 2026-01-29 19:54:39 +01:00
feat: compact relay status indicator on mobile
- Show only icon on mobile (44x44px touch target) - Tap to expand for full details - Smooth transition between compact and expanded states - Maintains full display on desktop - Reduces screen clutter on mobile while keeping info accessible Flight mode notice now just shows airplane icon on mobile. Tap it to see full connection details.
This commit is contained in:
@@ -2909,6 +2909,34 @@ body.mobile-sidebar-open {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Mobile compact mode - just show icon */
|
||||
@media (max-width: 768px) {
|
||||
.relay-status-indicator.mobile {
|
||||
padding: 0.5rem;
|
||||
width: var(--min-touch-target);
|
||||
height: var(--min-touch-target);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.relay-status-indicator.mobile.expanded {
|
||||
width: auto;
|
||||
padding: 0.75rem 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.relay-status-indicator.mobile .relay-status-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.relay-status-indicator.mobile:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.relay-status-indicator.connecting {
|
||||
background: rgba(100, 108, 255, 0.15);
|
||||
border: 1px solid rgba(100, 108, 255, 0.25);
|
||||
|
||||
Reference in New Issue
Block a user