mirror of
https://github.com/dergigi/boris.git
synced 2026-01-20 15:24:58 +01:00
feat: make relay status indicator circular FAB on mobile
- Default to collapsed (icon only) on mobile - Expand to show details when tapped on mobile - Circular 56px FAB when collapsed, matching highlight button style - Desktop always shows expanded with details - Hide on scroll via showOnMobile prop (matches sidepanel buttons)
This commit is contained in:
@@ -70,8 +70,12 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
|
||||
}
|
||||
}
|
||||
|
||||
// On mobile, default to collapsed (icon only). On desktop, always show details.
|
||||
const showDetails = !isMobile || isExpanded
|
||||
|
||||
// On mobile when collapsed, make it circular like the highlight button
|
||||
const isCollapsedOnMobile = isMobile && !isExpanded
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relay-status-indicator ${isConnecting ? 'connecting' : ''} ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''} ${isMobile && !showOnMobile ? 'hidden' : 'visible'}`}
|
||||
@@ -92,12 +96,14 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
|
||||
zIndex: 1000,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
padding: showDetails ? '0.75rem 1rem' : '0.75rem',
|
||||
gap: showDetails ? '0.5rem' : '0',
|
||||
padding: isCollapsedOnMobile ? '0.875rem' : (showDetails ? '0.75rem 1rem' : '0.75rem'),
|
||||
width: isCollapsedOnMobile ? '56px' : 'auto',
|
||||
height: isCollapsedOnMobile ? '56px' : 'auto',
|
||||
backgroundColor: 'rgba(39, 39, 42, 0.9)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
border: '1px solid rgb(82, 82, 91)',
|
||||
borderRadius: '12px',
|
||||
borderRadius: isCollapsedOnMobile ? '50%' : '12px',
|
||||
color: 'rgb(228, 228, 231)',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 500,
|
||||
@@ -106,7 +112,8 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
|
||||
opacity: isMobile && !showOnMobile ? 0 : 1,
|
||||
visibility: isMobile && !showOnMobile ? 'hidden' : 'visible',
|
||||
transition: 'all 0.3s ease',
|
||||
userSelect: 'none'
|
||||
userSelect: 'none',
|
||||
justifyContent: isCollapsedOnMobile ? 'center' : 'flex-start'
|
||||
}}
|
||||
>
|
||||
<div className="relay-status-icon">
|
||||
|
||||
Reference in New Issue
Block a user