danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): improve mobile layout and spacing for document list and gallery views

Browse source 
- Adjust GalleryView container structure and paddings for better mobile scrolling
- Refine document preview and details sizing for smaller screens
- Update ListView grid columns and icon sizing for improved mobile fit
- Ensure icons do not shrink and maintain alignment on all devices

These changes enhance usability and visual consistency of document views on mobile devices.
This commit is contained in:
Richard R 2026-05-30 17:59:16 -06:00
parent 3daf4b6453
commit e6df984646
2 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/doclist/views/GalleryView.tsx
View file

@ -174,10 +174,11 @@ export function GalleryView({
return ( return (
<div className="flex-1 min-h-0 flex flex-col"> <div className="flex-1 min-h-0 flex flex-col">
<div className="flex-1 min-h-0 flex items-center justify-center p-6 bg-background"> <div className="flex-1 min-h-0 overflow-y-auto bg-background">
<div className="min-h-full flex items-center justify-center p-3 sm:p-6">
{activeDoc ? ( {activeDoc ? (
<div className="w-full max-w-[920px] flex flex-col md:flex-row items-center md:items-start justify-center gap-4 md:gap-6"> <div className="w-full max-w-[920px] flex flex-col md:flex-row items-center md:items-start justify-center gap-4 md:gap-6">
<div className="flex flex-col items-center gap-3 w-[260px] sm:w-[320px] shrink-0"> <div className="flex flex-col items-center gap-3 w-[180px] sm:w-[260px] md:w-[320px] shrink-0">
<div className="w-full aspect-[3/4] rounded-lg overflow-hidden border border-offbase shadow-lg"> <div className="w-full aspect-[3/4] rounded-lg overflow-hidden border border-offbase shadow-lg">
<DocumentPreview doc={activeDoc} /> <DocumentPreview doc={activeDoc} />
</div> </div>
@ -206,7 +207,7 @@ export function GalleryView({
</button> </button>
</div> </div>
</div> </div>
<dl className="w-full max-w-[360px] md:max-w-[340px] grid grid-cols-2 gap-x-2 gap-y-1 rounded-md border border-offbase bg-base px-3 py-2 text-[11px] md:self-center"> <dl className="w-full max-w-[280px] sm:max-w-[360px] md:max-w-[340px] grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 rounded-md border border-offbase bg-base px-3 py-2 text-[11px] md:self-center">
<dt className="text-muted">Type</dt> <dt className="text-muted">Type</dt>
<dd className="text-foreground text-right uppercase tracking-wide">{activeDoc.type}</dd> <dd className="text-foreground text-right uppercase tracking-wide">{activeDoc.type}</dd>
<dt className="text-muted">Size</dt> <dt className="text-muted">Size</dt>
@ -234,6 +235,7 @@ export function GalleryView({
) : ( ) : (
<p className="text-[12px] text-muted">No documents to show</p> <p className="text-[12px] text-muted">No documents to show</p>
)} )}
</div>
</div> </div>
<div className="shrink-0 border-t border-offbase bg-gradient-to-b from-base to-offbase/30"> <div className="shrink-0 border-t border-offbase bg-gradient-to-b from-base to-offbase/30">

10
src/components/doclist/views/ListView.tsx
View file

@ -29,9 +29,9 @@ function formatDate(ms: number): string {
} }
function KindIcon({ doc }: { doc: DocumentListDocument }) { function KindIcon({ doc }: { doc: DocumentListDocument }) {
if (doc.type === 'pdf') return <PDFIcon className="w-4 h-4 text-red-500" />; if (doc.type === 'pdf') return <PDFIcon className="w-4 h-4 shrink-0 text-red-500" />;
if (doc.type === 'epub') return <EPUBIcon className="w-4 h-4 text-blue-500" />; if (doc.type === 'epub') return <EPUBIcon className="w-4 h-4 shrink-0 text-blue-500" />;
return <FileIcon className="w-4 h-4 text-muted" />; return <FileIcon className="w-4 h-4 shrink-0 text-muted" />;
} }
function HeaderCell({ function HeaderCell({
@ -131,7 +131,7 @@ function DocRow({
data-doc-tile data-doc-tile
aria-selected={isSelected} aria-selected={isSelected}
className={ className={
'grid grid-cols-[minmax(0,1fr)_72px_88px_120px_28px] sm:grid-cols-[minmax(0,1fr)_88px_96px_140px_32px] items-center text-[12px] border-b border-offbase transition-colors duration-200 ease-out ' + 'grid grid-cols-[minmax(0,1fr)_44px_72px_104px_28px] sm:grid-cols-[minmax(0,1fr)_56px_96px_140px_32px] items-center text-[12px] border-b border-offbase transition-colors duration-200 ease-out ' +
(isSelected (isSelected
? 'bg-offbase text-accent' ? 'bg-offbase text-accent'
: 'text-foreground hover:bg-offbase') + : 'text-foreground hover:bg-offbase') +
@ -198,7 +198,7 @@ export function ListView({
return ( return (
<div onClick={handleBackgroundClick} className="flex-1 min-h-0 overflow-y-auto"> <div onClick={handleBackgroundClick} className="flex-1 min-h-0 overflow-y-auto">
<div className="sticky top-0 z-10 bg-base border-b border-offbase grid grid-cols-[minmax(0,1fr)_72px_88px_120px_28px] sm:grid-cols-[minmax(0,1fr)_88px_96px_140px_32px]"> <div className="sticky top-0 z-10 bg-base border-b border-offbase grid grid-cols-[minmax(0,1fr)_44px_72px_104px_28px] sm:grid-cols-[minmax(0,1fr)_56px_96px_140px_32px]">
<HeaderCell label="Name" field="name" sortBy={sortBy} sortDirection={sortDirection} onSortChange={onSortChange} /> <HeaderCell label="Name" field="name" sortBy={sortBy} sortDirection={sortDirection} onSortChange={onSortChange} />
<HeaderCell label="Kind" field="type" sortBy={sortBy} sortDirection={sortDirection} onSortChange={onSortChange} /> <HeaderCell label="Kind" field="type" sortBy={sortBy} sortDirection={sortDirection} onSortChange={onSortChange} />
<HeaderCell label="Size" field="size" sortBy={sortBy} sortDirection={sortDirection} onSortChange={onSortChange} align="right" /> <HeaderCell label="Size" field="size" sortBy={sortBy} sortDirection={sortDirection} onSortChange={onSortChange} align="right" />