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

feat: hide main content when sidepanes open on mobile for single-pane view

Browse Source
This commit is contained in:
Gigi
2025-10-10 17:11:26 +01:00
parent e6d2920c27
commit 33cee9c0c2
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ThreePaneLayout.tsx
View File

@@ -201,7 +201,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
return ( return (
<> <>
{/* Mobile bookmark button */} {/* Mobile bookmark button - only show when viewing article */}
{isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && ( {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
<button <button
className="mobile-hamburger-btn" className="mobile-hamburger-btn"
@@ -213,7 +213,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
</button> </button>
)} )}
{/* Mobile highlights button */} {/* Mobile highlights button - only show when viewing article */}
{isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && ( {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
<button <button
className="mobile-highlights-btn" className="mobile-highlights-btn"
@@ -259,7 +259,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
isMobile={isMobile} isMobile={isMobile}
/> />
</div> </div>
<div className="pane main"> <div className={`pane main ${isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'mobile-hidden' : ''}`}>
{props.showSettings ? ( {props.showSettings ? (
<Settings <Settings
settings={props.settings} settings={props.settings}

7
src/index.css
View File

@@ -619,6 +619,13 @@ body.mobile-sidebar-open {
grid-row: 1; grid-row: 1;
padding: 0.5rem; padding: 0.5rem;
max-width: 100%; max-width: 100%;
transition: opacity 0.2s ease;
}
/* Hide main content when sidepanes are open on mobile */
.three-pane .pane.main.mobile-hidden {
opacity: 0;
pointer-events: none;
} }
.pane.highlights { .pane.highlights {