aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-19 07:34:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: make mobile sidebar buttons more subtle and refined

Browse Source
This commit is contained in:
Gigi
2025-10-13 22:40:01 +02:00
parent 3a28160ae8
commit bdbc08fdf1
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ThreePaneLayout.tsx
View File

@@ -224,42 +224,42 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
{/* Mobile bookmark button - only show when viewing article */} {/* Mobile bookmark button - only show when viewing article */}
{isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && ( {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
<button <button
className={`fixed z-[900] bg-[#2a2a2a] border border-[#444] rounded-lg text-[#ddd] flex items-center justify-center transition-all duration-300 active:scale-95 md:hidden ${ className={`fixed z-[900] bg-[#2a2a2a]/70 border border-[#444]/40 rounded-lg text-[#ddd] flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
showMobileButtons ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none' showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
}`} }`}
style={{ style={{
top: 'calc(1rem + env(safe-area-inset-top))', top: 'calc(1rem + env(safe-area-inset-top))',
left: 'calc(1rem + env(safe-area-inset-left))', left: 'calc(1rem + env(safe-area-inset-left))',
width: 'var(--min-touch-target)', width: '40px',
height: 'var(--min-touch-target)' height: '40px'
}} }}
onClick={props.onToggleSidebar} onClick={props.onToggleSidebar}
aria-label="Open bookmarks" aria-label="Open bookmarks"
aria-expanded={props.isSidebarOpen} aria-expanded={props.isSidebarOpen}
> >
<FontAwesomeIcon icon={faBookmark} /> <FontAwesomeIcon icon={faBookmark} size="sm" />
</button> </button>
)} )}
{/* Mobile highlights button - only show when viewing article */} {/* Mobile highlights button - only show when viewing article */}
{isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && ( {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
<button <button
className={`fixed z-[900] border border-[#444] rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 md:hidden ${ className={`fixed z-[900] border border-[#444]/40 rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
showMobileButtons ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none' showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
}`} }`}
style={{ style={{
top: 'calc(1rem + env(safe-area-inset-top))', top: 'calc(1rem + env(safe-area-inset-top))',
right: 'calc(1rem + env(safe-area-inset-right))', right: 'calc(1rem + env(safe-area-inset-right))',
width: 'var(--min-touch-target)', width: '40px',
height: 'var(--min-touch-target)', height: '40px',
backgroundColor: props.settings.highlightColorMine || '#ffff00', backgroundColor: `${props.settings.highlightColorMine || '#ffff00'}B3`,
color: '#000' color: '#000'
}} }}
onClick={props.onToggleHighlightsPanel} onClick={props.onToggleHighlightsPanel}
aria-label="Open highlights" aria-label="Open highlights"
aria-expanded={!props.isHighlightsCollapsed} aria-expanded={!props.isHighlightsCollapsed}
> >
<FontAwesomeIcon icon={faHighlighter} /> <FontAwesomeIcon icon={faHighlighter} size="sm" />
</button> </button>
)} )}