Styling the Forum Vote Buttons #388

giomhern · 2023-12-03T03:50:38Z

Purpose

Fix the rather clunky looking visuals of the forum like and dislike buttons. The intended result is to have buttons that fit the theme of the machina forum.

bburgess19

Review

Great work overall!

I like the placement of the buttons, and it looks great even on large bodies of text:

Suggestion

Let me know what you think about adding a larger gap between the items in the flex box.

Here's the current gap-1 on the .vote-container:

and here's gap-3:

src/templates/forum_conversation/topic_detail.html

bburgess19

These are changes bringing machina changes into our templates. The code and the buttons looks good to me!

…ote-buttons-css Need to style the correct buttons

bburgess19

Report

I like the stylings! Just implement the styles based on the user vote then resubmit!

bburgess19 · 2023-12-05T19:27:37Z

src/templates/forum_conversation/topic_detail.html

+                          value="like">
+                    <i class="fas fa-thumbs-up"></i> Like
+                  </button>
+                  <span class="like-count fas">{{ post.rating }}</span>


Color like button text

As noted by @joshuamonroe mentioned here, we should have some color indicator based the user's vote.

e.g. the user disliked:

the user liked:

The colors used here are the same colors from the buttons:

#3579F6 // blue #CB444A // red

I have instead just changed the color of the icon as opposed to the number because I figured it would be somewhat convulated for sake of people like me who are colorblind LOL. Attached are photos of the changes instead.

To add onto this, the deselecting when the other one is selected is not completely working. It works from like --> unlike but not the opposite way, but this can be a minor PR.

…like button stylings

majorsylvie

Running on firefox I do not see the graphics:

Even after force refreshing the cache (mac: cmd + shift + r), the thumbs up/down don't appear.

would be good to have this working in a way that is supported on other/older browsers!

majorsylvie

Looks better!

FYI, the placement of the buttons shifts depending on the width of the current vote count:

Screen.Recording.2023-12-05.at.6.41.00.PM.mov

This is not a problem for this PR, something you might want to make a separate issue if this behaviour is not desired.

joshuamonroe

This looks great and everything seems to be working as intended on my end. One very small housekeeping request in the code comments and then I'll be happy to approve it.

joshuamonroe · 2023-12-06T01:10:52Z

src/templates/forum/board_base.html

@@ -19,7 +19,7 @@
  <link rel="stylesheet" href="{% static 'machina/custom-styling.css' %}" />
 {% endblock css %}
 {% block body %}
-  <div class="my-5 container" id="main_container">
+  <div class="my-5 container " id="main_container">


Very minor, but lets get rid of this extra space to keep the PR clean.

joshuamonroe

Thanks for cleaning that up, good to go now. Approved!

bburgess19

The buttons look great to me! I added a min-width to the buttons at the end to make sure changing the vote count doesn't move the buttons around until the vote count is ridiculously large (>100,000)

bburgess19 · 2023-12-08T01:00:53Z

Closing comment

We added styles to the barebones like buttons, and ensured they behaved properly when toggling and switching between button clicks.

Detailed notes

We faced some issues with the voting icons not appearing for Firefox, but that was solved by using FA5 class names for those icons, i.e. fas instead of fa-solid. (credits: @majorsylvie)

We made sure the user's vote was clear by choosing to fill an icon instead of solely changing the icon's color. This helped with accessibility. (credits: @giomhern )

We added a bit of extra space around the vote counter so the button placement would shift so much with every vote. (credits: @majorsylvie)

Thank you to @joshuamonroe and @majorsylvie for reviewing, and @giomhern for spear-heading this!

majorsylvie · 2023-12-08T18:00:32Z

Issue Score: Excellent

giomhern linked an issue Dec 3, 2023 that may be closed by this pull request

Fix CSS for Like and Dislike Buttons in Forums #360

Closed

4 tasks

giomhern requested a review from bburgess19 December 3, 2023 03:50

giomhern self-assigned this Dec 3, 2023

giomhern added the x/forums label Dec 3, 2023

giomhern added this to the 2023/Sprint 3 milestone Dec 3, 2023

giomhern requested a review from majorsylvie December 3, 2023 03:51

bburgess19 reviewed Dec 3, 2023

View reviewed changes

src/templates/forum_conversation/topic_detail.html Outdated Show resolved Hide resolved

src/templates/forum_conversation/topic_detail.html Outdated Show resolved Hide resolved

src/templates/forum_conversation/topic_detail.html Outdated Show resolved Hide resolved

bburgess19 approved these changes Dec 3, 2023

View reviewed changes

giomhern force-pushed the forums/vote-buttons-css branch from 4f029a4 to 675ba5f Compare December 5, 2023 04:04

giomhern closed this Dec 5, 2023

giomhern force-pushed the forums/vote-buttons-css branch from 675ba5f to 4e1f6c9 Compare December 5, 2023 04:16

Small push -- helping to fix merge conflict

0b3f9c5

majorsylvie reopened this Dec 5, 2023

giomhern and others added 3 commits December 5, 2023 11:53

Merge branch 'dev' into forums/vote-buttons-css

a29b8d1

Merge remote-tracking branch 'origin/forums/like-posts' into forums/v…

bfe0a79

…ote-buttons-css Need to style the correct buttons

Redid the vote buttons

95b22e0

giomhern requested a review from bburgess19 December 5, 2023 18:24

Small syntax error fix

7b118e6

bburgess19 requested changes Dec 5, 2023

View reviewed changes

giomhern and others added 5 commits December 5, 2023 14:56

Active selecting on buttons

21e9b1c

Active selecting on buttons

f2dacee

Active selecting on buttons

e2d63de

Fixing merge conflicts

116b681

Merge branch 'dev' into forums/vote-buttons-css

d03f070

giomhern requested a review from bburgess19 December 5, 2023 21:05

giomhern and others added 5 commits December 5, 2023 15:29

Merge branch 'dev' into forums/vote-buttons-css

22d8072

Merge branch 'dev' into forums/vote-buttons-css

04d8225

Merge branch 'forums/like-posts' into forums/vote-buttons-css -- add …

334a73a

…like button stylings

Remove and add button stylings when toggled and changed

a183028

Merge branch 'dev' into forums/vote-buttons-css

df4ef08

majorsylvie requested changes Dec 6, 2023

View reviewed changes

giomhern and others added 3 commits December 5, 2023 18:31

Merge branch 'dev' into forums/vote-buttons-css

3c2e863

Use FA5 icons for Firefox compatability

da437c1

Merge branch 'dev' into forums/vote-buttons-css

753d84f

majorsylvie self-requested a review December 6, 2023 00:41

bburgess19 removed their request for review December 6, 2023 00:42

majorsylvie approved these changes Dec 6, 2023

View reviewed changes

joshuamonroe self-requested a review December 6, 2023 01:05

joshuamonroe requested changes Dec 6, 2023

View reviewed changes

joshuamonroe assigned bburgess19 Dec 6, 2023

bburgess19 force-pushed the forums/vote-buttons-css branch 2 times, most recently from c1d83ff to d2968ce Compare December 6, 2023 01:24

Prevent like buttons from shifting (for reasonable vote numbers)

6b50ffc

bburgess19 force-pushed the forums/vote-buttons-css branch from d2968ce to 6b50ffc Compare December 6, 2023 01:26

Merge branch 'dev' into forums/vote-buttons-css

2720206

joshuamonroe self-requested a review December 6, 2023 01:27

joshuamonroe approved these changes Dec 6, 2023

View reviewed changes

majorsylvie requested review from bburgess19 and removed request for bburgess19 December 6, 2023 01:30

bburgess19 removed their request for review December 6, 2023 01:31

bburgess19 approved these changes Dec 6, 2023

View reviewed changes

majorsylvie merged commit b1fe3f7 into dev Dec 6, 2023
2 checks passed

majorsylvie deleted the forums/vote-buttons-css branch December 6, 2023 01:33

majorsylvie assigned bburgess19 and unassigned bburgess19 Dec 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Styling the Forum Vote Buttons #388

Styling the Forum Vote Buttons #388

giomhern commented Dec 3, 2023 •

edited by bburgess19

Loading

bburgess19 left a comment

bburgess19 left a comment

bburgess19 left a comment

bburgess19 Dec 5, 2023

giomhern Dec 5, 2023

giomhern Dec 5, 2023

majorsylvie left a comment

majorsylvie left a comment

joshuamonroe left a comment

joshuamonroe Dec 6, 2023

joshuamonroe left a comment

bburgess19 left a comment

bburgess19 commented Dec 8, 2023

majorsylvie commented Dec 8, 2023

Styling the Forum Vote Buttons #388

Styling the Forum Vote Buttons #388

Conversation

giomhern commented Dec 3, 2023 • edited by bburgess19 Loading

Purpose

bburgess19 left a comment

Choose a reason for hiding this comment

Review

Suggestion

bburgess19 left a comment

Choose a reason for hiding this comment

bburgess19 left a comment

Choose a reason for hiding this comment

Report

bburgess19 Dec 5, 2023

Choose a reason for hiding this comment

Color like button text

giomhern Dec 5, 2023

Choose a reason for hiding this comment

giomhern Dec 5, 2023

Choose a reason for hiding this comment

majorsylvie left a comment

Choose a reason for hiding this comment

majorsylvie left a comment

Choose a reason for hiding this comment

joshuamonroe left a comment

Choose a reason for hiding this comment

joshuamonroe Dec 6, 2023

Choose a reason for hiding this comment

joshuamonroe left a comment

Choose a reason for hiding this comment

bburgess19 left a comment

Choose a reason for hiding this comment

bburgess19 commented Dec 8, 2023

Closing comment

Detailed notes

majorsylvie commented Dec 8, 2023

giomhern commented Dec 3, 2023 •

edited by bburgess19

Loading