Add Greatest of All Time manga dashboard
This commit is contained in:
Codex committed
1 parent
c8dd46d0fb
commit
5df94db9a3
16 files changed
+2717
-1
No files matched your search
@@ -34,6 +34,7 @@ label { display: block; }
|
||||
padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); background: rgba(18, 18, 20, .94); border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.brand { font-weight: 800; text-decoration: none; font-size: 17px; letter-spacing: .2px; }
|
||||
.nav-greatest { border-color: #5b3c46; color: #f0b9a0; }
|
||||
.bell-wrap { position: relative; }
|
||||
.bell .count { background: var(--accent); color: #fff; border-radius: 9px; font-size: 12px; font-weight: 700; padding: 0 6px; }
|
||||
.panel {
|
||||
@@ -100,6 +101,11 @@ main { max-width: 1200px; margin: 0 auto; padding: 16px; }
|
||||
.toolbar select { flex: 1; }
|
||||
.grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
|
||||
.nav { padding-left: 12px; padding-right: 12px; }
|
||||
.nav { gap: 5px; }
|
||||
.nav .brand { font-size: 14px; }
|
||||
.nav .btn { padding-left: 7px; padding-right: 7px; font-size: 12px; }
|
||||
.nav-greatest { font-size: 0 !important; }
|
||||
.nav-greatest::after { content: 'GOAT'; font-size: 12px; }
|
||||
.reading-summary { grid-template-columns: 1fr; gap: 5px; }
|
||||
.reading-summary-links { justify-content: flex-start; }
|
||||
}
|
||||
|
||||
@@ -96,6 +96,7 @@ function topNav(me) {
|
||||
document.addEventListener('click', () => { panel.hidden = true; });
|
||||
const nav = h('header', { class: 'nav' },
|
||||
h('a', { class: 'brand', href: './' }, 'MangaCircus'),
|
||||
h('a', { class: 'btn nav-greatest', href: 'greatest.html', title: 'Shijō Saikō no Manga · Greatest of All Time' }, 'Greatest'),
|
||||
h('div', { class: 'grow' }),
|
||||
h('div', { class: 'bell-wrap' }, bell, panel),
|
||||
h('a', { class: 'btn', href: 'settings.html' }, 'Settings'),
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
.greatest-intro { padding: 18px 0 14px; max-width: 750px; }
|
||||
.greatest-intro h1 { font-size: clamp(28px, 5vw, 42px); letter-spacing: -.03em; }
|
||||
.greatest-intro p { margin: 7px 0; }
|
||||
.greatest-eyebrow { color: #e9a47d; text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: 800; }
|
||||
.greatest-toolbar { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; }
|
||||
.greatest-toolbar > input { flex: 1; min-width: 0; }
|
||||
.greatest-sort, .greatest-filters { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.greatest-filters { margin: 10px 0 12px; }
|
||||
.greatest-periods { margin-top: 12px; }
|
||||
.greatest-period { padding: 20px 0 28px; border-top: 2px solid #48404a; }
|
||||
.greatest-period-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
|
||||
.greatest-period-heading h2 { margin: 0; font-size: 21px; }
|
||||
.greatest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px 16px; }
|
||||
.greatest-tile { min-width: 0; }
|
||||
.greatest-open { position: relative; display: block; width: 100%; padding: 0; border: 0; text-align: left; color: inherit; background: none; cursor: pointer; font: inherit; }
|
||||
.greatest-open:hover .greatest-cover img { transform: scale(1.035); }
|
||||
.greatest-open:focus-visible, .greatest-vote:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
|
||||
.greatest-cover { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 9px; background: linear-gradient(150deg, #49343c, #282c38 60%, #18181d); box-shadow: 0 4px 17px #0007; }
|
||||
.greatest-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
|
||||
.greatest-cover-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: #dbc8bd; font: 700 80px/1 Georgia, serif; opacity: .6; }
|
||||
.greatest-owned { position: absolute; top: 7px; right: 7px; padding: 2px 7px; border-radius: 9px; background: #183d34; color: #a7f0d1; font-size: 11px; font-weight: 700; box-shadow: 0 1px 8px #0008; }
|
||||
.greatest-name { display: block; margin-top: 8px; font-weight: 700; line-height: 1.25; }
|
||||
.greatest-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
|
||||
.greatest-votes { display: flex; gap: 8px; margin-top: 12px; }
|
||||
.greatest-votes.compact { gap: 3px; margin-top: 6px; }
|
||||
.greatest-vote { display: inline-grid; place-items: center; flex: 1; min-width: 0; min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); cursor: pointer; font: inherit; }
|
||||
.greatest-vote:hover { background: var(--card2); }
|
||||
.greatest-vote.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 25%, var(--card)); }
|
||||
.greatest-vote:disabled { opacity: .5; cursor: wait; }
|
||||
.greatest-dialog { width: min(780px, calc(100vw - 24px)); max-height: min(850px, calc(100vh - 30px)); overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--fg); box-shadow: 0 18px 70px #000a; }
|
||||
.greatest-dialog::backdrop { background: #000b; }
|
||||
.greatest-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
|
||||
.greatest-dialog-body { display: grid; grid-template-columns: minmax(130px, 230px) minmax(0, 1fr); gap: 22px; }
|
||||
.greatest-dialog-body h2 { margin: 0 0 8px; font-size: 25px; }
|
||||
.greatest-dialog-body p { margin: 9px 0; }
|
||||
.greatest-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px 0; }
|
||||
@media (max-width: 680px) {
|
||||
.greatest-toolbar { align-items: stretch; flex-direction: column; }
|
||||
.greatest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
|
||||
.greatest-dialog-body { grid-template-columns: 1fr; }
|
||||
.greatest-dialog-body > .greatest-cover { width: min(160px, 42vw); }
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Shijō Saikō no Manga · MangaCircus</title>
|
||||
<link rel="stylesheet" href="app.css">
|
||||
<link rel="stylesheet" href="greatest.css">
|
||||
<link rel="icon" href="icon.svg">
|
||||
<meta name="theme-color" content="#121214">
|
||||
<script src="common.js" defer></script>
|
||||
<script src="greatest.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<main><p class="loading">Loading the collection…</p></main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,146 @@
|
||||
'use strict';
|
||||
/* Curated catalog UI. Rating is the only write; the library and scraper are untouched. */
|
||||
(async function () {
|
||||
let me, data;
|
||||
try { [me, data] = await Promise.all([api('api/me'), api('api/greatest')]); } catch (error) { return showError(error); }
|
||||
topNav(me);
|
||||
const main = $('main'); main.textContent = '';
|
||||
let sortMode = store.get('greatest-sort') === 'all' ? 'all' : 'mine';
|
||||
let filterMode = 'all';
|
||||
const query = h('input', { type: 'search', placeholder: 'Search the collection…', 'aria-label': 'Search Greatest of All Time' });
|
||||
const count = h('span', { class: 'muted small', 'aria-live': 'polite' });
|
||||
const mine = h('button', { type: 'button', class: 'btn small' }, 'Rank by my vote');
|
||||
const everyone = h('button', { type: 'button', class: 'btn small' }, 'Rank by everyone');
|
||||
const filterBar = h('div', { class: 'greatest-filters', 'aria-label': 'Filter by your rating' });
|
||||
const filters = [
|
||||
['all', 'All'], ['rated', 'Rated'], ['flame', '🔥 Flame'], ['good', '👍 Looks good'],
|
||||
['neutral', '● Neutral'], ['skip', '💀 Not for me'], ['unrated', 'Unrated'], ['owned', '📚 In library'],
|
||||
];
|
||||
const filterButtons = new Map();
|
||||
for (const [value, label] of filters) {
|
||||
const button = h('button', { type: 'button', class: 'filter-chip' }, label);
|
||||
button.onclick = () => { filterMode = value; render(); };
|
||||
filterButtons.set(value, button); filterBar.append(button);
|
||||
}
|
||||
const results = h('div', { class: 'greatest-periods' });
|
||||
const dialog = h('dialog', { class: 'greatest-dialog', 'aria-label': 'Manga details' });
|
||||
document.body.append(dialog);
|
||||
mine.onclick = () => { sortMode = 'mine'; store.set('greatest-sort', sortMode); render(); };
|
||||
everyone.onclick = () => { sortMode = 'all'; store.set('greatest-sort', sortMode); render(); };
|
||||
query.oninput = render;
|
||||
main.append(
|
||||
h('div', { class: 'greatest-intro' },
|
||||
h('p', { class: 'greatest-eyebrow' }, 'Greatest of All Time'),
|
||||
h('h1', {}, data.title || 'Shijō Saikō no Manga'),
|
||||
h('p', { class: 'muted' }, '史上最高の漫画 · A curated journey through manga history. Your votes are private to your account; the community ranking combines everyone’s votes.'),
|
||||
h('p', { class: 'muted small' }, '🔥 Definitely want · 👍 Looks good · ● Neutral · 💀 Not for me · 📚 Already in your library')),
|
||||
h('div', { class: 'greatest-toolbar' }, query, h('div', { class: 'greatest-sort' }, mine, everyone)),
|
||||
filterBar, count, results);
|
||||
|
||||
function ratingButtons(item, compact = false) {
|
||||
const bar = h('div', { class: 'greatest-votes' + (compact ? ' compact' : ''), 'aria-label': `Rate ${item.title}` });
|
||||
for (const [value, symbol, label] of [
|
||||
['flame', '🔥', 'Definitely want'], ['good', '👍', 'Looks good'],
|
||||
['neutral', '●', 'Neutral'], ['skip', '💀', 'Not for me'],
|
||||
]) {
|
||||
const selected = item.myRating === value;
|
||||
const button = h('button', { type: 'button', class: 'greatest-vote' + (selected ? ' selected' : ''),
|
||||
'aria-label': `${label}: ${item.title}`, 'aria-pressed': String(selected), title: label }, symbol);
|
||||
button.onclick = async event => {
|
||||
event.stopPropagation(); button.disabled = true;
|
||||
try {
|
||||
const next = selected ? null : value;
|
||||
const saved = await api('api/greatest/rating', { id: item.id, rating: next });
|
||||
Object.assign(item, saved);
|
||||
render();
|
||||
if (dialog.open) openDetails(item);
|
||||
} catch (error) { alert(error.message || String(error)); button.disabled = false; }
|
||||
};
|
||||
bar.append(button);
|
||||
}
|
||||
return bar;
|
||||
}
|
||||
|
||||
function cover(item) {
|
||||
const box = h('span', { class: 'greatest-cover' }, h('span', { class: 'greatest-cover-fallback', 'aria-hidden': 'true' }, item.title.slice(0, 1)));
|
||||
if (item.cover && safeHref(item.cover)) {
|
||||
const image = h('img', { src: item.cover, alt: '', loading: 'lazy' });
|
||||
image.onerror = () => image.remove();
|
||||
box.append(image);
|
||||
}
|
||||
return box;
|
||||
}
|
||||
|
||||
function tile(item) {
|
||||
const open = h('button', { type: 'button', class: 'greatest-open', 'aria-label': `Details for ${item.title}` },
|
||||
cover(item),
|
||||
item.library ? h('span', { class: 'greatest-owned', title: 'Already in your library' }, '📚 In library') : null,
|
||||
h('span', { class: 'greatest-name' }, item.title),
|
||||
h('span', { class: 'greatest-meta' }, `${item.year} · ${item.chapters == null ? 'Chapters unknown' : `${item.chapters} chapters`}`),
|
||||
h('span', { class: 'greatest-meta' }, statusLabel(item.status)));
|
||||
open.onclick = () => openDetails(item);
|
||||
return h('article', { class: 'greatest-tile' }, open, ratingButtons(item, true));
|
||||
}
|
||||
|
||||
function statusLabel(status) {
|
||||
return status === 'ongoing' ? 'Ongoing' : status === 'completed' ? 'Completed' : 'Status unknown';
|
||||
}
|
||||
|
||||
function openDetails(item) {
|
||||
dialog.textContent = '';
|
||||
const close = h('button', { type: 'button', class: 'btn small', onclick: () => dialog.close() }, 'Close');
|
||||
const links = h('div', { class: 'greatest-links' });
|
||||
if (item.library) links.append(h('a', { class: 'btn primary', href: mangaUrl(item.library.id) }, 'Open in library'));
|
||||
if (safeHref(item.source?.url)) links.append(h('a', { class: 'btn', href: item.source.url, target: '_blank', rel: 'noopener noreferrer' },
|
||||
`Official ${item.source.kind || 'source'} ↗`));
|
||||
if (safeHref(item.metadata?.url)) links.append(h('a', { class: 'btn', href: item.metadata.url, target: '_blank', rel: 'noopener noreferrer' }, 'AniList metadata ↗'));
|
||||
const votes = item.votes || {};
|
||||
dialog.append(
|
||||
h('div', { class: 'greatest-dialog-head' }, h('span', { class: 'muted small' }, `${item.period} · curator #${item.rank}`), close),
|
||||
h('div', { class: 'greatest-dialog-body' }, cover(item), h('div', {},
|
||||
h('h2', {}, item.title),
|
||||
h('p', { class: 'muted' }, `${item.year} · ${item.chapters == null ? 'Chapter count unknown' : `${item.chapters} chapters`} · ${statusLabel(item.status)}`),
|
||||
h('p', {}, String(item.note || '').replace(/\*/g, '')),
|
||||
h('p', { class: 'muted small' }, `Community votes: 🔥 ${votes.flame || 0} · 👍 ${votes.good || 0} · ● ${votes.neutral || 0} · 💀 ${votes.skip || 0}`),
|
||||
ratingButtons(item), links,
|
||||
h('p', { class: 'muted small' }, 'Chapter counts and status come from public catalog metadata, or from your local library when present. Availability may vary by region.'))));
|
||||
if (!dialog.open) dialog.showModal();
|
||||
}
|
||||
|
||||
function matches(item, q) {
|
||||
if (q && !`${item.title} ${item.note || ''}`.toLowerCase().includes(q)) return false;
|
||||
if (filterMode === 'rated') return !!item.myRating;
|
||||
if (filterMode === 'unrated') return !item.myRating;
|
||||
if (filterMode === 'owned') return !!item.library;
|
||||
if (['flame', 'good', 'neutral', 'skip'].includes(filterMode)) return item.myRating === filterMode;
|
||||
return true;
|
||||
}
|
||||
|
||||
function render() {
|
||||
mine.classList.toggle('on', sortMode === 'mine'); everyone.classList.toggle('on', sortMode === 'all');
|
||||
mine.setAttribute('aria-pressed', String(sortMode === 'mine'));
|
||||
everyone.setAttribute('aria-pressed', String(sortMode === 'all'));
|
||||
for (const [value, button] of filterButtons) {
|
||||
button.classList.toggle('on', filterMode === value);
|
||||
button.setAttribute('aria-pressed', String(filterMode === value));
|
||||
}
|
||||
results.textContent = '';
|
||||
const q = query.value.trim().toLowerCase();
|
||||
let visible = 0;
|
||||
for (const period of data.periods) {
|
||||
const items = data.entries.filter(item => item.period === period && matches(item, q));
|
||||
if (!items.length) continue;
|
||||
items.sort((a, b) => sortMode === 'all'
|
||||
? b.score - a.score || a.rank - b.rank
|
||||
: (ratingScore(b.myRating) - ratingScore(a.myRating)) || a.rank - b.rank);
|
||||
visible += items.length;
|
||||
results.append(h('section', { class: 'greatest-period' },
|
||||
h('div', { class: 'greatest-period-heading' }, h('h2', {}, period), h('span', { class: 'muted small' }, `${items.length} manga`)),
|
||||
h('div', { class: 'greatest-grid' }, items.map(tile))));
|
||||
}
|
||||
count.textContent = `${visible} of ${data.entries.length} manga · ${sortMode === 'all' ? 'community score' : 'your vote'} within each period`;
|
||||
if (!visible) results.append(h('p', { class: 'empty muted' }, 'No manga match these filters.'));
|
||||
}
|
||||
function ratingScore(value) { return { flame: 3, good: 1, neutral: 0, skip: -2 }[value] ?? -3; }
|
||||
render();
|
||||
})();
|
||||
Reference in new issue
Block a user