RyderTech/the-bible
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Complete UI improvements: breadcrumbs moved to content, chapter favorites segregated

Browse Source 
- **Removed header breadcrumbs** that caused horizontal scrolling on mobile
- **Added content-aware breadcrumbs** to each page for better UX:
  - BookSelector: 'Books' (clickable back to version home)
  - ChapterSelector: 'Books > [Book Name]' (Books clickable, book name current)
- **Chapter favorites version-segregated** - fixed cross-version contamination
- **Homepage text updated** 'Both translations' → 'All translations'
- **Improved navigation flow** with clean breadcrumb system
- **Better mobile experience** no more scrolling required for nav
This commit is contained in:
Ryderjj89
2025-09-28 15:43:00 -04:00
parent 12c9a4a055
commit 0288c9e332
3 changed files with 29 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/App.tsx
View File

@@ -291,6 +291,7 @@ function App() {
user={user}
onFavoriteChange={handleFavoriteChange}
version={versionId}
onBack={handleBack}
/>
);
};
@@ -421,38 +422,7 @@ function App() {
</div>
</div>
{/* Navigation Breadcrumb - Hidden on small screens */}
<div className="hidden md:flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
{currentBook && (
<>
<button
onClick={() => navigate(`/version/${selectedVersion}`)}
className="hover:text-blue-600 dark:hover:text-blue-400"
>
Books
</button>
<ChevronRight className="h-4 w-4" />
<span className="font-medium text-gray-900 dark:text-gray-100">
{formatBookName(currentBook)}
</span>
{currentChapter && (
<>
<ChevronRight className="h-4 w-4" />
<button
onClick={() => navigate(`/version/${selectedVersion}/book/${currentBook}`)}
className="hover:text-blue-600 dark:hover:text-blue-400"
>
Chapters
</button>
<ChevronRight className="h-4 w-4" />
<span className="font-medium text-gray-900 dark:text-gray-100">
Chapter {currentChapter}
</span>
</>
)}
</>
)}
</div>
{/* Mobile Navigation - Simplified */}
<div className="flex md:hidden items-center space-x-1 text-xs text-gray-600 dark:text-gray-400">

18
frontend/src/components/BookSelector.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { BookOpen, Star } from 'lucide-react';
import { BookOpen, Star, ChevronLeft } from 'lucide-react';
interface BookSelectorProps {
books: string[];
@@ -8,9 +8,10 @@ interface BookSelectorProps {
user?: any;
onFavoriteChange?: () => void;
version?: string;
onBack?: () => void;
}
const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName, user, onFavoriteChange, version = 'esv' }) => {
const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName, user, onFavoriteChange, version = 'esv', onBack }) => {
const [favorites, setFavorites] = useState<Set<string>>(new Set());
const [loading, setLoading] = useState(false);
@@ -164,6 +165,19 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
return (
<div className="space-y-12">
{/* Breadcrumb */}
{onBack && (
<div className="flex items-center justify-center space-x-1 text-sm text-gray-600 dark:text-gray-400">
<button
onClick={onBack}
className="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>
<BookOpen className="h-4 w-4" />
<span>Books</span>
</button>
</div>
)}
<div className="text-center">
<h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
{version.toUpperCase()} Bible

18
frontend/src/components/ChapterSelector.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { ArrowLeft, FileText, Star } from 'lucide-react';
import { ArrowLeft, FileText, Star, ChevronRight } from 'lucide-react';
import { getBook } from '../services/api';
interface ChapterSelectorProps {
@@ -144,15 +144,19 @@ const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect
return (
<div>
{/* Header */}
<div className="flex items-center mb-8">
{/* Breadcrumb Navigation */}
<div className="flex items-center justify-center space-x-1 mb-8">
<button
onClick={onBack}
className="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
onClick={() => window.location.href = '/'}
className="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>
<ArrowLeft className="h-5 w-5" />
<span>Back to Books</span>
<ArrowLeft className="h-4 w-4" />
<span>Books</span>
</button>
<ChevronRight className="h-3 w-3 text-gray-400 dark:text-gray-500" />
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
{formatBookName(book)}
</span>
</div>
{/* Book Title */}