feat(zoya): Review the vote-button change map against the acceptance criteria
Outcome: done
Changed: none
Verified by: e2e run attempted (3 tests) but blocked at browser launch by missing libglib-2.0.so.0 (environment fault, not a result); breakage proven from Playwright source elementText() in driver coreBundle.js plus empty-button markup
Findings: REJECT - the implementation empties all four vote buttons (_post_votes.html:4,9; _comment.html:6,11) and moves glyphs into CSS ::before, so has_text="+" locators at tests/e2e/notifications/index.py:313, :799 and tests/e2e/leaderboard.py:42 match zero elements (Playwright text matching reads DOM text nodes, never ::before content) and those 3 tests time out
Findings: commit 625940a claimed "Changed: none" but deleted the glyph text from post-downvote and comment-upvote, leaving HEAD with two glyph-less vote buttons (regression only repaired by the uncommitted diff adding the ::before rules)
Findings: map line references are accurate for 625940a^ (text glyphs, no ::before rules) but stale for the working tree, where glyph rules are feed.css:193-217 and post.css:141-165
Findings: the voted cue itself satisfies the ticket - `+`->U+2295 and U+2212/U+002D->U+2296 under .voted (feed.css:211-217, post.css:159-165), non-color, consistent with the star precedent base.css:1319-1325, with aria-pressed synced client-side (VoteManager.js:60-62)
Findings: unvoted downvote glyphs remain inconsistent in touched rules: post U+2212 (feed.css:198) vs comment U+002D (post.css:146)
Open: fix the 3 e2e locators to class-based .vo
Typosaurus-Run: c36faeceb55d45b6bf38a45eec4f47ab
Typosaurus-Node: ebdbae6c04a84a239287bd62262cb254
Typosaurus-Agent: @zoya
Refs: #162
This commit is contained in:
parent
625940a017
commit
95c4233802
@ -190,6 +190,14 @@
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.post-action-btn.vote-up::before {
|
||||
content: "+";
|
||||
}
|
||||
|
||||
.post-action-btn.vote-down::before {
|
||||
content: "\2212";
|
||||
}
|
||||
|
||||
.post-action-btn.vote-up.voted {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
@ -200,6 +208,14 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.post-action-btn.vote-up.voted::before {
|
||||
content: "\2295";
|
||||
}
|
||||
|
||||
.post-action-btn.vote-down.voted::before {
|
||||
content: "\2296";
|
||||
}
|
||||
|
||||
.post-votes {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@ -138,6 +138,14 @@
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.comment-vote-btn.vote-up::before {
|
||||
content: "+";
|
||||
}
|
||||
|
||||
.comment-vote-btn.vote-down::before {
|
||||
content: "-";
|
||||
}
|
||||
|
||||
.comment-vote-btn.vote-up.voted {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
@ -148,6 +156,14 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.comment-vote-btn.vote-up.voted::before {
|
||||
content: "\2295";
|
||||
}
|
||||
|
||||
.comment-vote-btn.vote-down.voted::before {
|
||||
content: "\2296";
|
||||
}
|
||||
|
||||
.comment-vote-count {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
|
||||
@ -57,7 +57,9 @@ export class VoteManager extends OptimisticAction {
|
||||
});
|
||||
document.querySelectorAll(`form[action="${action}"] button[type="submit"]`).forEach((button) => {
|
||||
const formValue = parseInt(button.closest("form").querySelector('input[name="value"]').value, 10);
|
||||
button.classList.toggle("voted", result.value !== 0 && formValue === result.value);
|
||||
const isVoted = result.value !== 0 && formValue === result.value;
|
||||
button.classList.toggle("voted", isVoted);
|
||||
button.setAttribute("aria-pressed", String(isVoted));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,7 +66,7 @@ Do NOT hand-write the overlay/header markup. Use the shared macro in `templates/
|
||||
Reuse these via `{% set _x = ... %}{% include %}` (the `_avatar_link.html` convention) instead of copy-pasting markup:
|
||||
|
||||
- `_post_composer_form.html` - the create-post form (topic selector, content/title, project select, attachments, poll builder, footer). Locals: `_composer_topic` (preselected topic, default `random`), `_composer_project` (preselected project uid or `""`). Wrapped in the `modal()` macro by `feed.html` (Create New Post) and `project_detail.html` (owner-only Post an update, preset to `devlog` + the project). Never fork a second copy of this form.
|
||||
- `_post_votes.html` - post +/- vote bar. Locals: `_uid`, `_my_vote`, `_count`.
|
||||
- `_post_votes.html` - post +/- vote bar. Locals: `_uid`, `_my_vote`, `_count`. The +/- glyphs come from the vote CSS classes via `::before` (`feed.css` for `.post-action-btn`, `post.css` for `.comment-vote-btn`), swapping to `\u2295`/`\u2296` when `.voted` - do not put literal glyphs in markup.
|
||||
- `_star_vote.html` - project/gist star button. Locals: `_type` (`project`|`gist`), `_uid`, `_my_vote`, `_count`, `_btn_class`, optional `_stop` (adds `data-stop-propagation`). The star glyph (`☆`→`★` when `.voted`) comes from the `vote-star` CSS class via `::before` (`base.css`) - do not put a literal star in markup.
|
||||
- `_post_header.html` - post author/avatar/time header (`.post-header`). Locals: `_author`, `_time`.
|
||||
- `_topic_selector.html` - topic radio group. Locals: `_topics`, `_selected`.
|
||||
@ -89,3 +89,4 @@ The three public listings (`/feed`, `/gists`, `/projects`) share one search box:
|
||||
## Modal pattern
|
||||
|
||||
`Application.js` `initModals()` toggles a `.visible` CSS class on `.modal-overlay`; the CSS rule `.modal-overlay.visible { display: flex; }` handles visibility. Triggers usually have `href="#"`, so call `e.preventDefault()` in click handlers. `.modal-close` is wired generically - no inline JS needed.
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<span class="comment-vote-count" data-vote-count="{{ item.comment['uid'] }}">{{ item.votes.up - item.votes.down }}</span>
|
||||
<form method="POST" action="/votes/comment/{{ item.comment['uid'] }}">
|
||||
<input type="hidden" name="value" value="-1">
|
||||
<button type="submit" class="comment-vote-btn vote-down{% if item.my_vote == -1 %} voted{% endif %}" aria-label="Downvote" title="Downvote" aria-pressed="{% if item.my_vote == -1 %}true{% else %}false{% endif %}"{{ guest_disabled(user) }}>-</button>
|
||||
<button type="submit" class="comment-vote-btn vote-down{% if item.my_vote == -1 %} voted{% endif %}" aria-label="Downvote" title="Downvote" aria-pressed="{% if item.my_vote == -1 %}true{% else %}false{% endif %}"{{ guest_disabled(user) }}></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<span class="post-vote-count" data-vote-count="{{ _uid }}">{{ _count }}</span>
|
||||
<form method="POST" action="/votes/post/{{ _uid }}" class="inline-form">
|
||||
<input type="hidden" name="value" value="1">
|
||||
<button type="submit" class="post-action-btn vote-up{% if _my_vote == 1 %} voted{% endif %}" aria-label="Upvote" title="Upvote" aria-pressed="{% if _my_vote == 1 %}true{% else %}false{% endif %}"{{ guest_disabled(user) }}>+</button>
|
||||
<button type="submit" class="post-action-btn vote-up{% if _my_vote == 1 %} voted{% endif %}" aria-label="Upvote" title="Upvote" aria-pressed="{% if _my_vote == 1 %}true{% else %}false{% endif %}"{{ guest_disabled(user) }}></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user