UX: post action spacing refactor & consistency (#15403)
This commit is contained in:
Kris
GitHub
parent
be599513e3
commit
c4e8ba3965
|
|
@ -227,6 +227,133 @@ $quote-share-maxwidth: 150px;
|
|||
}
|
||||
}
|
||||
|
||||
nav.post-controls {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--primary-low-mid);
|
||||
|
||||
.actions {
|
||||
display: inline-flex;
|
||||
text-align: right;
|
||||
margin-left: auto;
|
||||
|
||||
// Some buttons can be doubled up, like likes or flags
|
||||
.double-button {
|
||||
display: inline-flex;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
button {
|
||||
// It looks really confusing when one half a double button has an inner shadow on click.
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
&.my-likes,
|
||||
&.read-indicator,
|
||||
&.regular-likes {
|
||||
// Like count on posts
|
||||
.d-icon {
|
||||
color: var(--primary-low-mid);
|
||||
padding-left: 0.45em;
|
||||
}
|
||||
}
|
||||
&.has-like {
|
||||
// Like button after I've liked
|
||||
.d-icon {
|
||||
color: var(--love);
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
// Disabled like button
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&.button-count {
|
||||
// Like count button
|
||||
height: 100%; // sometimes the font might be shorter than the icon
|
||||
&:not(.my-likes) {
|
||||
padding-right: 0;
|
||||
}
|
||||
+ .toggle-like {
|
||||
// Like button when like count is present
|
||||
padding-left: 0.45em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a,
|
||||
button {
|
||||
color: var(--primary-low-mid-or-secondary-high);
|
||||
.d-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 0 1 auto;
|
||||
font-size: var(--font-up-1);
|
||||
padding: 8px 10px;
|
||||
vertical-align: top;
|
||||
background: transparent;
|
||||
border: none;
|
||||
&.d-hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
background: var(--primary-low);
|
||||
color: var(--primary);
|
||||
}
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
&.admin {
|
||||
position: relative;
|
||||
}
|
||||
&.delete.d-hover,
|
||||
&.delete:hover,
|
||||
&.delete:focus {
|
||||
background: var(--danger);
|
||||
color: var(--secondary);
|
||||
.d-icon {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
&.bookmarked .d-icon {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
&.create {
|
||||
margin-right: 0;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
.d-icon {
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-replies {
|
||||
font-size: var(--font-up-1);
|
||||
font-size: inherit;
|
||||
padding: 10px;
|
||||
color: var(--primary-medium);
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: var(--primary);
|
||||
background: var(--primary-low);
|
||||
}
|
||||
.d-icon {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
.d-button-label + .d-icon {
|
||||
margin-left: 0.45em;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deleted {
|
||||
.regular > .cooked {
|
||||
background-color: var(--danger-low-mid);
|
||||
|
|
|
|||
|
|
@ -48,26 +48,22 @@ section.post-menu-area {
|
|||
}
|
||||
|
||||
nav.post-controls {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
// for consistency, try to control spacing by editing these variables
|
||||
--control-margin: 0.33em;
|
||||
--control-icon-space: 0.33em;
|
||||
.actions {
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
|
||||
.more-actions {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
button {
|
||||
margin-left: var(--control-margin);
|
||||
&.create {
|
||||
margin-left: calc(var(--control-margin) * 1.52);
|
||||
.d-icon {
|
||||
margin-right: var(--control-icon-space);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Some buttons can be doubled up, like likes or flags
|
||||
.double-button {
|
||||
display: inline-flex;
|
||||
color: var(--primary-low-mid);
|
||||
margin-right: 0.15em;
|
||||
margin-left: var(--control-margin);
|
||||
&:hover {
|
||||
button {
|
||||
background: var(--primary-low);
|
||||
|
|
@ -75,21 +71,8 @@ nav.post-controls {
|
|||
}
|
||||
}
|
||||
button {
|
||||
// It looks really confusing when one half a double button has an inner shadow on click.
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
&.my-likes,
|
||||
&.read-indicator,
|
||||
&.regular-likes {
|
||||
// Like count on posts
|
||||
.d-icon {
|
||||
color: var(--primary-low-mid);
|
||||
padding-left: 0.45em;
|
||||
}
|
||||
}
|
||||
&.like {
|
||||
// Like button with 0 likes
|
||||
&.d-hover {
|
||||
|
|
@ -101,9 +84,6 @@ nav.post-controls {
|
|||
}
|
||||
&.has-like {
|
||||
// Like button after I've liked
|
||||
.d-icon {
|
||||
color: var(--love);
|
||||
}
|
||||
&.d-hover {
|
||||
background: var(--primary-low);
|
||||
.d-icon {
|
||||
|
|
@ -111,21 +91,13 @@ nav.post-controls {
|
|||
}
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
// Disabled like button
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&.button-count {
|
||||
// Like count button
|
||||
&:not(.my-likes) {
|
||||
padding-right: 0;
|
||||
}
|
||||
&.d-hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
+ .toggle-like {
|
||||
// Like button when like count is present
|
||||
padding-left: 0.45em;
|
||||
&.d-hover {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
|
|
@ -133,92 +105,11 @@ nav.post-controls {
|
|||
}
|
||||
}
|
||||
}
|
||||
a,
|
||||
button {
|
||||
color: var(--primary-low-mid-or-secondary-high);
|
||||
.d-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
margin-right: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
a.toggle-likes {
|
||||
padding: 8px 0;
|
||||
margin-right: -3px;
|
||||
}
|
||||
span.badge-posts {
|
||||
margin-right: 5px;
|
||||
transition: all linear 0.15s;
|
||||
}
|
||||
|
||||
button.create {
|
||||
margin-right: 0;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
margin-left: 10px;
|
||||
.d-icon {
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
}
|
||||
}
|
||||
.create .d-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
button {
|
||||
font-size: $font-up-1;
|
||||
padding: 8px 10px;
|
||||
vertical-align: top;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-left: 3px;
|
||||
&.d-hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
background: var(--primary-low);
|
||||
color: var(--primary);
|
||||
}
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
&.admin {
|
||||
position: relative;
|
||||
}
|
||||
&.delete.d-hover,
|
||||
&.delete:hover,
|
||||
&.delete:focus {
|
||||
background: var(--danger);
|
||||
color: var(--secondary);
|
||||
.d-icon {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
&.bookmark {
|
||||
padding: 8px 11px;
|
||||
&.bookmarked .d-icon {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-replies {
|
||||
font-size: $font-up-1;
|
||||
margin-left: -10px;
|
||||
font-size: inherit;
|
||||
padding: 10px;
|
||||
color: var(--primary-medium);
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: var(--primary);
|
||||
background: var(--primary-low);
|
||||
}
|
||||
margin-left: -11px; // negates padding-left on .cooked, for visual alignment
|
||||
.d-icon {
|
||||
margin-right: 5px;
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
.d-button-label + .d-icon {
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
margin-right: var(--control-icon-space);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,100 +28,64 @@ span.badge-posts {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.topic-post {
|
||||
nav.post-controls {
|
||||
color: var(--primary-low-mid-or-secondary-high);
|
||||
&.expanded {
|
||||
// on small devices with many buttons this can overflow
|
||||
overflow-x: scroll;
|
||||
nav.post-controls {
|
||||
// for consistency, try to control spacing by editing these variables
|
||||
--control-space: 0.58em;
|
||||
--control-space-small: calc(var(--control-space) / 2);
|
||||
--control-space-large: calc(var(--control-space) * 1.3);
|
||||
&.expanded {
|
||||
// on small devices with many buttons this can overflow
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.actions {
|
||||
// using an auto margin on first-child instead of justify-content on the parent
|
||||
// because justify-content breaks overflow scrolling
|
||||
:first-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
// using an auto margin on first-child instead of justify-content on the parent
|
||||
// because justify-content breaks overflow scrolling
|
||||
:first-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Handles the like and flag buttons in the post menu.
|
||||
.double-button {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
button {
|
||||
&.like,
|
||||
&.read-indicator,
|
||||
&.create-flag {
|
||||
flex: 1 1 auto;
|
||||
// Some buttons can be doubled up, like likes or flags
|
||||
.double-button {
|
||||
button {
|
||||
&.button-count {
|
||||
padding: var(--control-space);
|
||||
+ .toggle-like,
|
||||
+ .create-flag {
|
||||
padding: var(--control-space) var(--control-space-large)
|
||||
var(--control-space) var(--control-space-small);
|
||||
}
|
||||
&.button-count {
|
||||
padding: 8px 4px 8px 8px;
|
||||
+ .toggle-like,
|
||||
+ .create-flag {
|
||||
padding: 8px 8px 8px 4px;
|
||||
}
|
||||
&.my-likes,
|
||||
&.regular-likes {
|
||||
display: flex;
|
||||
max-width: unset;
|
||||
padding: 8px;
|
||||
.d-icon {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
&.regular-likes {
|
||||
padding: var(--control-space) var(--control-space-small)
|
||||
var(--control-space) var(--control-space-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
padding: var(--control-space) var(--control-space-large);
|
||||
&.expand-post {
|
||||
margin: var(--control-space) 0 var(--control-space) 0;
|
||||
}
|
||||
&.has-like {
|
||||
.d-icon {
|
||||
color: var(--love);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.replies-button-visible {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.show-replies {
|
||||
display: flex;
|
||||
+ .reply {
|
||||
margin-left: 0;
|
||||
}
|
||||
.d-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
font-size: $font-up-1;
|
||||
padding: 10px 8px;
|
||||
background: transparent;
|
||||
flex: 1 1 auto;
|
||||
max-width: 45px;
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
&.admin {
|
||||
position: relative;
|
||||
}
|
||||
&.expand-post {
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
&.has-like {
|
||||
.d-icon {
|
||||
color: var(--love);
|
||||
}
|
||||
}
|
||||
&.bookmarked {
|
||||
.d-icon {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
padding-left: var(--control-space);
|
||||
}
|
||||
}
|
||||
&.replies-button-visible {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.show-replies {
|
||||
display: flex;
|
||||
font-size: $font-up-1;
|
||||
padding: 10px 8px;
|
||||
+ .reply {
|
||||
margin-left: 0;
|
||||
}
|
||||
.d-icon {
|
||||
padding-left: 8px;
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
}
|
||||
.actions {
|
||||
flex-grow: 2;
|
||||
}
|
||||
.actions {
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue