diff --git a/devplacepy/static/css/feed.css b/devplacepy/static/css/feed.css index 954e7785..603cc363 100644 --- a/devplacepy/static/css/feed.css +++ b/devplacepy/static/css/feed.css @@ -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; diff --git a/devplacepy/static/css/post.css b/devplacepy/static/css/post.css index 937e99b3..043a0231 100644 --- a/devplacepy/static/css/post.css +++ b/devplacepy/static/css/post.css @@ -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; diff --git a/devplacepy/static/js/VoteManager.js b/devplacepy/static/js/VoteManager.js index 2692cc3d..d44f8085 100644 --- a/devplacepy/static/js/VoteManager.js +++ b/devplacepy/static/js/VoteManager.js @@ -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)); }); } } diff --git a/devplacepy/templates/CLAUDE.md b/devplacepy/templates/CLAUDE.md index d9e5ab31..545bf028 100644 --- a/devplacepy/templates/CLAUDE.md +++ b/devplacepy/templates/CLAUDE.md @@ -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. + diff --git a/devplacepy/templates/_comment.html b/devplacepy/templates/_comment.html index 5836217e..fd19115c 100644 --- a/devplacepy/templates/_comment.html +++ b/devplacepy/templates/_comment.html @@ -8,7 +8,7 @@ {{ item.votes.up - item.votes.down }}
diff --git a/devplacepy/templates/_post_votes.html b/devplacepy/templates/_post_votes.html index 8ae3063d..c9369e77 100644 --- a/devplacepy/templates/_post_votes.html +++ b/devplacepy/templates/_post_votes.html @@ -6,7 +6,7 @@ {{ _count }}