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

fix: improve mobile bookmark button visibility across all pages

Browse Source 
- Bookmark button now visible on all pages except settings
- Only hides when scrolling down while reading an article
- Fixes issue where button was hidden on /p/ (profile) and other pages
- Highlights button only shows when viewing article content
- Prevents users from getting stuck without navigation options
This commit is contained in:
Gigi
2025-10-15 12:10:30 +02:00
parent 90af87339c
commit 8ef1f775f9
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ThreePaneLayout.tsx
View File

@@ -106,10 +106,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
const mainPaneRef = useRef<HTMLDivElement>(null) const mainPaneRef = useRef<HTMLDivElement>(null)
// Detect scroll direction to hide/show mobile buttons // Detect scroll direction to hide/show mobile buttons
// Now using window scroll (document scroll) instead of pane scroll // Only hide on scroll down when viewing article content
const isViewingArticle = !!(props.selectedUrl)
const scrollDirection = useScrollDirection({ const scrollDirection = useScrollDirection({
threshold: 10, threshold: 10,
enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && isViewingArticle
}) })
const showMobileButtons = scrollDirection !== 'down' const showMobileButtons = scrollDirection !== 'down'
@@ -229,8 +230,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
return ( return (
<> <>
{/* Mobile bookmark button - only show when viewing article or explore (not on settings/me/profile/support) */} {/* Mobile bookmark button - always show except on settings page */}
{isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showMe && !props.showProfile && !props.showSupport && ( {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && (
<button <button
className={`fixed z-[900] bg-zinc-800/70 border border-zinc-600/40 rounded-lg text-zinc-200 flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${ className={`fixed z-[900] bg-zinc-800/70 border border-zinc-600/40 rounded-lg text-zinc-200 flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none' showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
@@ -249,8 +250,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
</button> </button>
)} )}
{/* Mobile highlights button - only show when viewing article or explore (not on settings/me/profile/support) */} {/* Mobile highlights button - only show when viewing article content */}
{isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showMe && !props.showProfile && !props.showSupport && ( {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && isViewingArticle && (
<button <button
className={`fixed z-[900] border border-zinc-600/40 rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${ className={`fixed z-[900] border border-zinc-600/40 rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none' showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'