rDrama
/
rDrama
9
10
Fork 7
Code Issues Pull Requests Packages Releases Wiki Activity

post: fix post vote horizontal content reflow (#131) 

Kindly,

Currently, the vote count at the top left of any post reserves too little space leading to many reflow situations when we vote on it:
* only happens on desktop version, considering the mobile website uses different layout/code
* happens whenever our vote changes the count between 9 to 10 (?), 99 to 100, 999 to 1000. Also happens in more common situations like 81 to 82 and :marseymanysuchcases:

I did a minimalist approach by removing the margin, reserving just enough width (values between -XXX and XXXX) and lowering the vote buttons to minimize hat collision. Arguably, the vote buttons look better with the PR, because they are centered with flairs (WPD) and less off-center on rdrama with post rewards, pfp, ...
Net excess of ~10px, which I feel is borderline too much

Thanks,
granny

Reviewed-on: #131
Co-authored-by: mummified-corroding-granny <mummified-corroding-granny@noreply.fsdfsd.net>
Co-committed-by: mummified-corroding-granny <mummified-corroding-granny@noreply.fsdfsd.net>
pull/132/head
mummified-corroding-granny 2023-02-22 06:27:11 +00:00 committed by Aevann
parent ec5fe67f08
commit 3b261a76ba
2 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
files/assets/css/main.css
View File

@ -3946,9 +3946,8 @@ small, .small {
justify-content: center;
}
#thread .voting {
min-width: 10px;
margin-right: 10px;
overflow-wrap: normal;
min-width: 32px;
margin-right: 1px;
}
#frontpage .voting, #search .voting, #userpage .voting {
margin: auto 0;

4
files/templates/submission.html
View File

@ -224,7 +224,7 @@
</div>
{% if v %}
<div id="voting" class="voting d-mob-none mb-auto">
<div id="voting" class="voting d-mob-none mb-auto mt-1">
<div tabindex="0" data-nonce="{{g.nonce}}" data-onclick="vote('post', '{{p.id}}', '1')" class="post-{{p.id}}-up mx-auto arrow-up upvote-button post-{{p.id}}-up {% if voted==1 %}active{% endif %}"></div>
<span class="post-score-{{p.id}} score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}{% if p.controversial %} controversial{% endif %}" data-bs-toggle="tooltip" data-bs-placement="right" title="+{{ups}} | -{{downs}}" style="cursor: default">{{score}}</span>
@ -233,7 +233,7 @@
{% else %}
<div id="voting" class="voting d-mob-none mb-auto">
<div id="voting" class="voting d-mob-none mb-auto mt-1">
<a tabindex="0" class="post-{{p.id}}-up arrow-up mx-auto" href="/login?redirect={{request.full_path | urlencode}}">
</a>
<span class="post-{{p.id}}-score-none score text-muted{% if p.controversial %} controversial{% endif %}"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="+{{ups}} | -{{downs}}"{% endif %}style="cursor: default">{{score}}</span>