nate/study-bible-project
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

My Studies: show studies as a grid or a list
Build and Push Docker Image / build-and-push (push) Failing after 19s
Details

Browse Source 
A Grid / List toggle beside the sort and tag filters. List is one compact
row per study (small book cover, title with Rename, passage, tags, date,
Resume and Delete). The choice is remembered on the device.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed 2026-10-06 10:00:30 -04:00
1 parent a0971eab29
commit dc825f0112
3 files changed
+57 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/BookCover.jsx
+16 -7
View File
@@ -1,13 +1,13 @@
// The picture on a study's card: a coloured cover for the kind of book, with the book's name.
import { coverFor } from '../utils/bookCovers.js';
export default function BookCover({ summary, className = '' }) {
export default function BookCover({ summary, className = '', compact = false }) {
const { group, name, extra } = coverFor(summary);
const [from, to] = group.colors;
const id = `cover-${group.id}`;
return (
<div className={`relative overflow-hidden rounded-xl ${className}`} role="img" aria-label={`${name}${extra ? ` and ${extra} more` : ''}, ${group.label}`}>
<svg viewBox="0 0 400 120" preserveAspectRatio="xMidYMid slice" className="block h-full w-full" aria-hidden="true">
<svg viewBox={compact ? '0 0 200 120' : '0 0 400 120'} preserveAspectRatio="xMidYMid slice" className="block h-full w-full" aria-hidden="true">
<defs>
<linearGradient id={id} x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor={from} /><stop offset="1" stopColor={to} /></linearGradient>
</defs>
@@ -16,11 +16,20 @@ export default function BookCover({ summary, className = '' }) {
<circle cx="360" cy="20" r="70" /><circle cx="360" cy="20" r="50" /><circle cx="360" cy="20" r="30" />
<circle cx="30" cy="120" r="60" /><circle cx="30" cy="120" r="40" />
</g>
<rect x="20" y="22" width="28" height="3" rx="1.5" fill="#fff" fillOpacity="0.7" />
<text x="20" y="62" fill="#fff" fontFamily="Georgia, 'Times New Roman', serif" fontSize={name.length > 13 ? 26 : 32} fontWeight="600">{name}</text>
<text x="20" y="90" fill="#fff" fillOpacity="0.8" fontFamily="-apple-system, 'Segoe UI', Helvetica, Arial, sans-serif" fontSize="13" letterSpacing="1.5">
{group.label.toUpperCase()}{extra ? ` · +${extra} MORE` : ''}
</text>
<rect x={compact ? 14 : 20} y="22" width="28" height="3" rx="1.5" fill="#fff" fillOpacity="0.7" />
{compact ? (
<>
<text x="14" y="70" fill="#fff" fontFamily="Georgia, 'Times New Roman', serif" fontSize={name.length > 11 ? 21 : name.length > 8 ? 25 : 30} fontWeight="600">{name}</text>
{extra > 0 && <text x="14" y="98" fill="#fff" fillOpacity="0.85" fontFamily="-apple-system, 'Segoe UI', Helvetica, Arial, sans-serif" fontSize="14" letterSpacing="1">+{extra} MORE</text>}
</>
) : (
<>
<text x="20" y="62" fill="#fff" fontFamily="Georgia, 'Times New Roman', serif" fontSize={name.length > 13 ? 26 : 32} fontWeight="600">{name}</text>
<text x="20" y="90" fill="#fff" fillOpacity="0.8" fontFamily="-apple-system, 'Segoe UI', Helvetica, Arial, sans-serif" fontSize="13" letterSpacing="1.5">
{group.label.toUpperCase()}{extra ? ` · +${extra} MORE` : ''}
</text>
</>
)}
</svg>
</div>
);