barbercollie/ReadMeABook
1
0
Fork 1
mirror of https://github.com/kikootwo/ReadMeABook.git synced 2026-06-03 04:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add square cover toggle and UI support

Browse Source 
Introduce a SquareCoversToggle component and wire cover-aspect switching throughout the app. PreferencesContext now stores and persists a new squareCovers flag (with cross-tab sync), and pages (Home, Search) expose the toggle and pass the squareCovers prop to AudiobookGrid/AudiobookCard. AudiobookCard/Grid and skeletons were updated to respect square vs 2:3 aspect ratios and include smoother transitions. Also update app icons/manifest references to RMAB_1024x1024_ICON.png and make header/branding responsive (truncate titles, adjust version badge placement and logo usage). Minor UI/UX tweaks added for accessibility and visual polish.
This commit is contained in:
kikootwo
2026-02-04 19:50:39 -05:00
parent 1cb77dc989
commit fe39831ada
10 changed files with 138 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Header.tsx
+16 -9
View File
@@ -118,18 +118,21 @@ export function Header() {
<div className="container mx-auto px-4 py-3 md:py-4 max-w-7xl">
<div className="flex items-center justify-between">
{/* Logo and Version Badge */}
<div className="flex items-center gap-3">
<Link href="/" className="flex items-center gap-2">
<div className="flex items-center gap-2 md:gap-3 min-w-0">
<Link href="/" className="flex items-center gap-2 min-w-0">
<img
src="/rmab_32x32.png"
src="/RMAB_1024x1024_ICON.png"
alt="ReadMeABook Logo"
className="w-8 h-8"
className="w-8 h-8 flex-shrink-0"
/>
<span className="text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100">
<span className="text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100 truncate">
ReadMeABook
</span>
</Link>
<VersionBadge />
{/* Hide version badge on mobile to prevent overlap */}
<div className="hidden sm:block flex-shrink-0">
<VersionBadge />
</div>
</div>
{/* Desktop Navigation */}
@@ -203,7 +206,7 @@ export function Header() {
</button>
{user ? (
<div className="relative" ref={containerRef}>
<div className="relative flex-shrink-0" ref={containerRef}>
<button
onClick={() => setShowUserMenu(!showUserMenu)}
className="flex items-center gap-2 hover:opacity-80 transition-opacity"
@@ -212,10 +215,10 @@ export function Header() {
<img
src={user.avatarUrl}
alt={user.username}
className="w-8 h-8 rounded-full"
className="w-8 h-8 rounded-full flex-shrink-0"
/>
) : (
<div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-medium">
<div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-medium flex-shrink-0">
{user.username.charAt(0).toUpperCase()}
</div>
)}
@@ -278,6 +281,10 @@ export function Header() {
</Link>
)}
</nav>
{/* Version badge in mobile menu */}
<div className="sm:hidden mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 px-3">
<VersionBadge />
</div>
</div>
)}
</div>