netcracker/ai-for-dummies
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(motion): add strict animations and fix layout properties

Browse Source 
- 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
2026-09-05 23:13:59 +00:00
parent 71c74fb7f1
commit 9ca3f48def
10 changed files with 66 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills-review/vote.js
+4 -4
View File
@@ -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); }
};