IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Mobile UX: Increasing hit area of like-count & post controls

Browse Source
This commit is contained in:
Kris 2018-04-27 17:15:29 -04:00
parent 0e5104fa70
commit 21cd973c67
1 changed files with 43 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -28,18 +28,56 @@ span.badge-posts {
.topic-post {
nav.post-controls {
clear: both;
color: dark-light-choose($primary-low-mid, $secondary-high);
.actions {
display: flex;
}
.like-button {
display: flex;
flex: 0 1 auto;
button {
&.like {
flex: 1 1 auto;
}
&.like-count {
padding: 8px 4px 8px 8px;
line-height: 1.2;
&.regular-likes {
margin-right: 0;
}
&.my-likes {
display: flex;
align-items: baseline;
max-width: unset;
margin-right: 0;
padding: 8px 9px 8px 8px;
i {
padding-left: 8px;
}
}
}
.d-icon {
line-height: $line-height-medium;
}
}
button.like-count + button.toggle-like {
padding: 8px 9px 8px 4px;
}
}
.d-icon {
opacity: 1.0;
}
button {
border: none;
font-size: $font-up-1;
padding: 8px 10px;
vertical-align: middle;
padding: 10px 8px;
background: transparent;
float: left;
flex: 1 1 auto;
max-width: 45px;
&.hidden {
display: none;
}
@ -50,8 +88,8 @@ span.badge-posts {
margin:10px 0 10px 0;
}
&.reply {
float: right;
color: $primary-high;
margin-left: auto;
}
&.has-like {
color: $love;
@ -61,31 +99,9 @@ span.badge-posts {
}
}
button.like-count {
font-size: $font-up-1;
padding: 8px 4px;
i.fa-heart, i.fa-heart-o {
padding-left: 8px;
color: dark-light-choose($primary-low-mid, $secondary-high);
}
&.my-likes {
margin-right: 5px;
}
&.regular-likes {
margin-right: -5px;
}
}
}
}
/* shift post reply button to the right and make it black */
.post-controls button.create {
float: right;
color: dark-light-choose($primary-high, $secondary-low);
}
.post-admin-menu {
background-color: $secondary;
width: 205px;