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 afea2423..fd19115c 100644
--- a/devplacepy/templates/_comment.html
+++ b/devplacepy/templates/_comment.html
@@ -3,12 +3,12 @@
@@ -70,3 +70,4 @@
{{ render_comment_flat(child, depth, item.author) }}
{% endfor %}
{% endmacro %}
+
diff --git a/devplacepy/templates/_post_votes.html b/devplacepy/templates/_post_votes.html
index 6cd72bc3..c9369e77 100644
--- a/devplacepy/templates/_post_votes.html
+++ b/devplacepy/templates/_post_votes.html
@@ -1,11 +1,12 @@
{{ _count }}
+
diff --git a/tests/conftest.py b/tests/conftest.py
index 30f95638..c9a82dbb 100644
--- a/tests/conftest.py
+++ b/tests/conftest.py
@@ -340,6 +340,14 @@ def assert_share_copies(page, expected_fragment):
)
+def vote_glyph(locator):
+ value = locator.evaluate("el => getComputedStyle(el, '::before').content")
+ value = value.strip().strip('"').strip("'")
+ if value.startswith("\\") and len(value) == 5 and value[1:].isdigit():
+ value = chr(int(value[1:], 16))
+ return value
+
+
def assert_no_horizontal_overflow(page, layout):
report = page.evaluate(
"""(selector) => {
diff --git a/tests/e2e/leaderboard.py b/tests/e2e/leaderboard.py
index b7c4499f..0633cdca 100644
--- a/tests/e2e/leaderboard.py
+++ b/tests/e2e/leaderboard.py
@@ -39,7 +39,7 @@ def test_leaderboard_ranks_after_upvote(app_server, browser, seeded_db):
pa.goto(post_url, wait_until="domcontentloaded")
pa.wait_for_timeout(1000)
- vote_btn = pa.locator("button.post-action-btn").filter(has_text="+").first
+ vote_btn = pa.locator("button.post-action-btn.vote-up").first
vote_btn.wait_for(state="visible", timeout=10000)
vote_btn.click()
pa.wait_for_timeout(1500)
diff --git a/tests/e2e/notifications/index.py b/tests/e2e/notifications/index.py
index 9634ba38..e24834fa 100644
--- a/tests/e2e/notifications/index.py
+++ b/tests/e2e/notifications/index.py
@@ -310,7 +310,7 @@ def test_vote_notification_on_post(app_server, browser, seeded_db):
pa.goto(post_url, wait_until="domcontentloaded")
pa.wait_for_timeout(1000)
- vote_btn = pa.locator("button.post-action-btn").filter(has_text="+").first
+ vote_btn = pa.locator("button.post-action-btn.vote-up").first
vote_btn.wait_for(state="visible", timeout=10000)
vote_btn.click()
pa.wait_for_timeout(1500)
@@ -796,7 +796,7 @@ def test_vote_notification_click_opens_target(app_server, browser, seeded_db):
pa.goto(f"{BASE_URL}{post_path}", wait_until="domcontentloaded")
pa.wait_for_timeout(1000)
- vote_btn = pa.locator("button.post-action-btn").filter(has_text="+").first
+ vote_btn = pa.locator("button.post-action-btn.vote-up").first
vote_btn.wait_for(state="visible", timeout=10000)
vote_btn.click()
pa.wait_for_timeout(1500)
diff --git a/tests/e2e/post.py b/tests/e2e/post.py
index 814c1b92..4729f598 100644
--- a/tests/e2e/post.py
+++ b/tests/e2e/post.py
@@ -2,7 +2,7 @@
import re
from playwright.sync_api import expect
-from tests.conftest import BASE_URL, assert_share_copies
+from tests.conftest import BASE_URL, assert_share_copies, vote_glyph
def create_post(page, topic="random", content="Test post content", title=None):
page.goto(f"{BASE_URL}/feed", wait_until="domcontentloaded")
page.locator(".feed-fab").first.wait_for(state="visible", timeout=10000)
@@ -74,35 +74,57 @@ def test_post_vote_increment(alice):
def test_post_upvote_voted_state_persists(alice):
page, _ = alice
create_post(page, "showcase", "Upvote persistence test")
+ vote_up = page.locator(".post-action-btn.vote-up").first
+ assert vote_glyph(vote_up) == "+"
with page.expect_response(
lambda r: "/votes/" in r.url and r.request.method == "POST"
):
- page.locator(".post-action-btn.vote-up").first.click()
+ vote_up.click()
expect(page.locator(".post-vote-count").first).to_have_text("1")
+ expect(vote_up).to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(vote_up) == "\u2295"
page.reload(wait_until="domcontentloaded")
- expect(page.locator(".post-action-btn.vote-up").first).to_have_class(
- re.compile(r"\bvoted\b")
- )
- assert "voted" not in (
- page.locator(".post-action-btn.vote-down").first.get_attribute("class") or ""
- )
+ vote_up = page.locator(".post-action-btn.vote-up").first
+ expect(vote_up).to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(vote_up) == "\u2295"
+ vote_down = page.locator(".post-action-btn.vote-down").first
+ assert "voted" not in (vote_down.get_attribute("class") or "")
+ assert vote_glyph(vote_down) == "\u2212"
+ with page.expect_response(
+ lambda r: "/votes/" in r.url and r.request.method == "POST"
+ ):
+ vote_up.click()
+ expect(page.locator(".post-vote-count").first).to_have_text("0")
+ expect(vote_up).not_to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(vote_up) == "+"
def test_post_downvote_voted_state_persists(alice):
page, _ = alice
create_post(page, "showcase", "Downvote persistence test")
+ vote_down = page.locator(".post-action-btn.vote-down").first
+ assert vote_glyph(vote_down) == "\u2212"
with page.expect_response(
lambda r: "/votes/" in r.url and r.request.method == "POST"
):
- page.locator(".post-action-btn.vote-down").first.click()
+ vote_down.click()
expect(page.locator(".post-vote-count").first).to_have_text("-1")
+ expect(vote_down).to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(vote_down) == "\u2296"
page.reload(wait_until="domcontentloaded")
- expect(page.locator(".post-action-btn.vote-down").first).to_have_class(
- re.compile(r"\bvoted\b")
- )
- assert "voted" not in (
- page.locator(".post-action-btn.vote-up").first.get_attribute("class") or ""
- )
+ vote_down = page.locator(".post-action-btn.vote-down").first
+ expect(vote_down).to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(vote_down) == "\u2296"
+ vote_up = page.locator(".post-action-btn.vote-up").first
+ assert "voted" not in (vote_up.get_attribute("class") or "")
+ assert vote_glyph(vote_up) == "+"
+ with page.expect_response(
+ lambda r: "/votes/" in r.url and r.request.method == "POST"
+ ):
+ vote_down.click()
+ expect(page.locator(".post-vote-count").first).to_have_text("0")
+ expect(vote_down).not_to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(vote_down) == "\u2212"
def test_comment_voted_state_persists(alice):
@@ -114,17 +136,25 @@ def test_comment_voted_state_persists(alice):
expect(
page.locator(".comment-text:has-text('Comment whose vote should persist')")
).to_be_visible()
+ comment_vote = page.locator(".comment-vote-btn.vote-up").first
+ assert vote_glyph(comment_vote) == "+"
with page.expect_response(
lambda r: "/votes/" in r.url and r.request.method == "POST"
):
- page.locator(".comment-vote-btn").first.click()
- expect(page.locator(".comment-vote-btn").first).to_have_class(
- re.compile(r"\bvoted\b")
- )
+ comment_vote.click()
+ expect(comment_vote).to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(comment_vote) == "\u2295"
page.reload(wait_until="domcontentloaded")
- expect(page.locator(".comment-vote-btn").first).to_have_class(
- re.compile(r"\bvoted\b")
- )
+ comment_vote = page.locator(".comment-vote-btn.vote-up").first
+ expect(comment_vote).to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(comment_vote) == "\u2295"
+ with page.expect_response(
+ lambda r: "/votes/" in r.url and r.request.method == "POST"
+ ):
+ comment_vote.click()
+ expect(page.locator(".comment-vote-count").first).to_have_text("0")
+ expect(comment_vote).not_to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(comment_vote) == "+"
def test_mention_first_match_highlighted(alice):
diff --git a/tests/e2e/posts/index.py b/tests/e2e/posts/index.py
index 17a03294..c0e053ef 100644
--- a/tests/e2e/posts/index.py
+++ b/tests/e2e/posts/index.py
@@ -14,7 +14,7 @@ def _create_plain_post_engagement_ui(page, content):
page.wait_for_url(f"{BASE_URL}/posts/*", wait_until="domcontentloaded")
from uuid import uuid4
from datetime import datetime, timedelta, timezone
-from tests.conftest import BASE_URL, assert_share_copies
+from tests.conftest import BASE_URL, assert_share_copies, vote_glyph
from devplacepy.database import get_table
from devplacepy.utils import make_combined_slug
def _seed_posts(count):
@@ -404,15 +404,19 @@ def test_feed_vote_voted_state_persists(alice):
card = page.locator(
".post-card", has_text="Feed vote persistence test content"
).first
- card.locator(".post-action-btn.vote-up").click()
+ vote_up = card.locator(".post-action-btn.vote-up")
+ assert vote_glyph(vote_up) == "+"
+ vote_up.click()
expect(card.locator(".post-vote-count")).to_have_text("1")
+ expect(vote_up).to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(vote_up) == "\u2295"
page.goto(f"{BASE_URL}/feed", wait_until="domcontentloaded")
card = page.locator(
".post-card", has_text="Feed vote persistence test content"
).first
- expect(card.locator(".post-action-btn.vote-up")).to_have_class(
- re.compile(r"\bvoted\b")
- )
+ vote_up = card.locator(".post-action-btn.vote-up")
+ expect(vote_up).to_have_class(re.compile(r"\bvoted\b"))
+ assert vote_glyph(vote_up) == "\u2295"
def test_feed_card_share_button(alice):