michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-24 03:43:42 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve voting buttons for mobile

Browse source
This commit is contained in:
Soheb 2024-03-29 10:39:00 +00:00
parent 8c9f91467b
commit e0a45759e8
2 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/static/structure.css
View file

@ -920,6 +920,8 @@ fieldset legend {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
min-width: 44px;
min-height: 44px;
} }
.voting_buttons_new .upvote_button.digits_4, .voting_buttons_new .downvote_button.digits_4 { .voting_buttons_new .upvote_button.digits_4, .voting_buttons_new .downvote_button.digits_4 {
width: 68px; width: 68px;
@ -987,7 +989,7 @@ fieldset legend {
.voting_buttons { .voting_buttons {
float: right; float: right;
display: block; display: block;
width: 55px; min-width: 54px;
padding: 0 0 5px 5px; padding: 0 0 5px 5px;
line-height: 30px; line-height: 30px;
font-size: 14px; font-size: 14px;
@ -1002,9 +1004,13 @@ fieldset legend {
} }
.voting_buttons .upvote_button, .voting_buttons .downvote_button { .voting_buttons .upvote_button, .voting_buttons .downvote_button {
position: relative; position: relative;
padding-left: 3px; padding: 0 3px;
min-height: 44px;
min-width: 44px;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
} }
.voting_buttons .upvote_button.digits_4, .voting_buttons .downvote_button.digits_4 { .voting_buttons .upvote_button.digits_4, .voting_buttons .downvote_button.digits_4 {
width: 68px; width: 68px;

12
app/static/structure.scss
View file

@ -5,6 +5,8 @@ nav, etc which are used site-wide */
@import "scss/typography"; @import "scss/typography";
@import "scss/controls"; @import "scss/controls";
$min-touch-target: 44px;
html { html {
@include breakpoint(phablet) { @include breakpoint(phablet) {
scroll-padding-top: 80px; scroll-padding-top: 80px;
@ -553,6 +555,8 @@ html {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)); color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
min-width: $min-touch-target;
min-height: $min-touch-target;
&.digits_4 { &.digits_4 {
width: 68px; width: 68px;
@ -625,7 +629,7 @@ html {
.voting_buttons { .voting_buttons {
float: right; float: right;
display: block; display: block;
width: 55px; min-width: $min-touch-target + 10;
padding: 0 0 5px 5px; padding: 0 0 5px 5px;
line-height: 30px; line-height: 30px;
font-size: 14px; font-size: 14px;
@ -640,9 +644,13 @@ html {
.upvote_button, .downvote_button { .upvote_button, .downvote_button {
position: relative; position: relative;
padding-left: 3px; padding: 0 3px;
min-height: $min-touch-target;
min-width: $min-touch-target;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
&.digits_4 { &.digits_4 {
width: 68px; width: 68px;