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

refactor(layout): migrate mobile buttons to Tailwind utilities

Browse Source 
- Convert mobile hamburger and highlights buttons to Tailwind
- Migrate mobile backdrop to Tailwind utilities
- Remove 60+ lines of CSS from app.css and sidebar.css
- Maintain responsive behavior and z-index layering
- Keep dynamic color support for highlight button
This commit is contained in:
Gigi
2025-10-13 21:58:50 +02:00
parent bd0b4e848f
commit f3f80449a6
3 changed files with 24 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/ThreePaneLayout.tsx
View File

@@ -224,7 +224,15 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
{/* Mobile bookmark button - only show when viewing article */}
{isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
<button
className={`mobile-hamburger-btn ${showMobileButtons ? 'visible' : 'hidden'}`}
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 ${
showMobileButtons ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
}`}
style={{
top: 'calc(1rem + env(safe-area-inset-top))',
left: 'calc(1rem + env(safe-area-inset-left))',
width: 'var(--min-touch-target)',
height: 'var(--min-touch-target)'
}}
onClick={props.onToggleSidebar}
aria-label="Open bookmarks"
aria-expanded={props.isSidebarOpen}
@@ -236,14 +244,20 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
{/* Mobile highlights button - only show when viewing article */}
{isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
<button
className={`mobile-highlights-btn ${showMobileButtons ? 'visible' : 'hidden'}`}
onClick={props.onToggleHighlightsPanel}
aria-label="Open highlights"
aria-expanded={!props.isHighlightsCollapsed}
className={`fixed z-[900] border border-[#444] rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 md:hidden ${
showMobileButtons ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
}`}
style={{
top: 'calc(1rem + env(safe-area-inset-top))',
right: 'calc(1rem + env(safe-area-inset-right))',
width: 'var(--min-touch-target)',
height: 'var(--min-touch-target)',
backgroundColor: props.settings.highlightColorMine || '#ffff00',
color: '#000'
}}
onClick={props.onToggleHighlightsPanel}
aria-label="Open highlights"
aria-expanded={!props.isHighlightsCollapsed}
>
<FontAwesomeIcon icon={faHighlighter} />
</button>
@@ -252,7 +266,9 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
{/* Mobile backdrop */}
{isMobile && (
<div
className={`mobile-sidebar-backdrop ${(props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'visible' : ''}`}
className={`fixed inset-0 bg-black/45 z-[999] transition-opacity duration-300 ${
(props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'block opacity-100' : 'hidden opacity-0'
}`}
onClick={handleBackdropClick}
aria-hidden="true"
/>