style(motion): add strict animations and fix layout properties
- Change ReadingProgress and RouteTable to use transform (scaleX/scaleY) instead of width/height - Convert existing easing functions to 200ms cubic-bezier(.2,0,0,1) - Document animation purpose with CSS comments - Add guide panel swap, review desk detail swap, and tally pop animations - Implement prefers-reduced-motion for all new states
This commit is contained in:
Marcos Paulo
@@ -437,10 +437,14 @@ function previewMarkup(entry, available) {
|
||||
function renderDetail() {
|
||||
const entry = state.selected;
|
||||
const available = packageFiles(entry);
|
||||
$('#detail').innerHTML =
|
||||
const detailPanel = $('#detail');
|
||||
detailPanel.innerHTML =
|
||||
`<header><div><span class="status">${escape(entry.status)}</span><h2>${escape(entry.title)}</h2><p>Submitted by <a class="author-link" href="?author=${encodeURIComponent(entry.author)}">${escape(entry.author)}</a> · <a class="share-link" href="?author=${encodeURIComponent(entry.author)}&skill=${encodeURIComponent(entry.id)}&view=${state.preview}">share review ↗</a></p></div><div class="switch" role="group" aria-label="Preview version"><button class="${state.preview === 'original' ? 'active' : ''}" data-preview="original">Original</button><button class="${state.preview === 'improved' ? 'active' : ''}" data-preview="improved">Improved draft</button></div></header><div class="purpose"><span>THE JOB</span><p>${escape(entry.focus)}</p></div><div id="vote-widget"></div><div class="review-grid"><section><span>WHAT'S ALREADY WORKING</span><ul>${entry.wins.map((item) => `<li>${escape(item)}</li>`).join('')}</ul></section><section><span>HIGHEST-VALUE IMPROVEMENTS</span><ul>${entry.improve.map((item) => `<li>${escape(item)}</li>`).join('')}</ul></section></div><aside class="extras"><span>GOOD NEXT ADDITION</span><p>${escape(entry.extras)}</p></aside>${previewMarkup(entry, available)}`;
|
||||
detailPanel.classList.remove('is-swapping');
|
||||
void detailPanel.offsetWidth;
|
||||
detailPanel.classList.add('is-swapping');
|
||||
renderVoteWidget($('#vote-widget'), entry.id);
|
||||
$('#detail')
|
||||
detailPanel
|
||||
.querySelectorAll('[data-file]')
|
||||
.forEach((button) =>
|
||||
button.addEventListener('click', () => {
|
||||
|
||||
@@ -15,3 +15,4 @@
|
||||
.markdown-preview{max-height:540px;overflow:auto;padding:24px;color:#d6e1e4;background:#0c1a25}.markdown-preview>:first-child{margin-top:0}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4,.markdown-preview h5,.markdown-preview h6{margin:1.5em 0 .5em;color:#fff;line-height:1.15}.markdown-preview h1{font-size:1.8em}.markdown-preview h2{font-size:1.45em}.markdown-preview h3{font-size:1.2em}.markdown-preview p,.markdown-preview li{max-width:78ch}.markdown-preview li+li{margin-top:.35em}.markdown-preview a{color:var(--gold)}.markdown-preview code{padding:.12em .3em;color:#fff;background:#29455a;white-space:break-spaces}.markdown-preview pre{max-height:none;margin:1em 0;padding:14px;border:1px solid #486175}.markdown-preview pre code{padding:0;background:transparent}.markdown-preview blockquote{margin:1em 0;padding:.3em 1em;border-left:3px solid var(--gold);color:#b9c8d0}.markdown-preview hr{border:0;border-top:1px solid #486175}.markdown-frontmatter{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:0 0 24px;padding:12px;border:1px solid #486175;font:11px/1.5 var(--font-mono)}.markdown-frontmatter dt{color:var(--gold)}.markdown-frontmatter dd{margin:0}.markdown-table-wrap{max-width:100%;overflow:auto;margin:1em 0;border:1px solid #486175}.markdown-preview table{width:100%;min-width:460px;border-collapse:collapse;font-size:13px}.markdown-preview th,.markdown-preview td{padding:9px 11px;border:1px solid #486175;text-align:left;vertical-align:top}.markdown-preview th{color:var(--gold);background:#173046}
|
||||
|
||||
.markdown-toc{margin:0 0 24px;padding:12px 14px;border:1px solid #486175;background:#102b3a}.markdown-toc>span{color:var(--gold);font:700 10px var(--font-mono);letter-spacing:.1em}.markdown-toc ol{display:flex;flex-wrap:wrap;gap:7px 13px;margin:9px 0 0;padding:0;list-style:none}.markdown-toc li.level-2{margin-left:10px}.markdown-toc li.level-3{margin-left:20px}.markdown-toc a{font:12px/1.3 var(--font-sans);text-decoration:none}.markdown-toc a:hover{text-decoration:underline}
|
||||
.detail.is-swapping > * { /* purpose: review-desk detail swap on selection (state change) */ animation: detail-swap 200ms cubic-bezier(.2,0,0,1) both; } @keyframes detail-swap { from { opacity: 0.15; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .vote-buttons button b { display: inline-block; } .vote-buttons button b.is-updating { /* purpose: vote widget tally update (feedback) */ animation: tally-pop 200ms cubic-bezier(.2,0,0,1) both; } @keyframes tally-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .detail.is-swapping > *, .vote-buttons button b.is-updating { animation: none; } }
|
||||
|
||||
@@ -19,15 +19,15 @@ async function api(path, options = {}) {
|
||||
return response.json();
|
||||
}
|
||||
|
||||
function widgetMarkup(skillId, tally, you, unavailable) {
|
||||
function widgetMarkup(skillId, tally, you, unavailable, isUpdate = false) {
|
||||
const total = (tally.original || 0) + (tally.improved || 0);
|
||||
const share = (count) => total ? Math.round((count / total) * 100) : 0;
|
||||
if (unavailable) return `<section class="vote-widget" aria-label="Vote unavailable"><span>READER VOTE</span><p>Voting is offline right now — the vote service is not configured or unreachable.</p></section>`;
|
||||
return `<section class="vote-widget" aria-label="Vote on this review" data-skill="${escape(skillId)}">
|
||||
<span>WHICH DRAFT WOULD YOU SHIP?</span>
|
||||
<div class="vote-buttons" role="group" aria-label="Cast your vote">
|
||||
<button data-vote="original" aria-pressed="${you === 'original'}">Original<b>${tally.original || 0} · ${share(tally.original || 0)}%</b></button>
|
||||
<button data-vote="improved" aria-pressed="${you === 'improved'}">Improved draft<b>${tally.improved || 0} · ${share(tally.improved || 0)}%</b></button>
|
||||
<button data-vote="original" aria-pressed="${you === 'original'}">Original<b${isUpdate ? ' class="is-updating"' : ''}>${tally.original || 0} · ${share(tally.original || 0)}%</b></button>
|
||||
<button data-vote="improved" aria-pressed="${you === 'improved'}">Improved draft<b${isUpdate ? ' class="is-updating"' : ''}>${tally.improved || 0} · ${share(tally.improved || 0)}%</b></button>
|
||||
</div>
|
||||
<p class="vote-note">${you ? `You voted ${you === 'original' ? 'original' : 'improved draft'}. Pick the other option to change it.` : 'One vote per visitor, tracked by network source.'}</p>
|
||||
</section>`;
|
||||
@@ -40,7 +40,7 @@ export async function renderVoteWidget(container, skillId) {
|
||||
container.innerHTML = widgetMarkup(skillId, {}, null, false);
|
||||
try {
|
||||
const result = await api('/api/votes', { method: 'POST', body: JSON.stringify({ skillId, choice }) });
|
||||
container.innerHTML = widgetMarkup(skillId, { original: result.original, improved: result.improved }, result.you, false);
|
||||
container.innerHTML = widgetMarkup(skillId, { original: result.original, improved: result.improved }, result.you, false, true);
|
||||
bind();
|
||||
} catch { container.innerHTML = widgetMarkup(skillId, {}, null, true); }
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user