Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Refactoring topic statuses for consistent icon sizes & colors

This commit is contained in:
Kris 2018-12-06 19:22:04 -05:00
parent cf2e86c763
commit db32d29eaa
17 changed files with 56 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -159,7 +159,6 @@
.topic-status {
margin-right: 4px;
padding: 0;
font-size: 1.071em;
&:last-of-type {
margin-right: 0;
}
@ -257,14 +256,6 @@ ol.category-breadcrumb {
.d-icon-thumbtack.unpinned {
@include fa-rotate(180deg, 1);
color: $primary;
/* because it is rotated, right becomes left! */
padding-left: 3px;
padding-right: 0 !important;
}
.topic-statuses .fa {
padding-right: 3px;
}
.top-title-buttons {

20
app/assets/stylesheets/common/base/discourse.scss
View File

@ -668,3 +668,23 @@ select {
}
}
}
.topic-statuses {
float: left;
padding: 0;
line-height: $line-height-medium;
color: $primary-medium;
.topic-status {
margin: 0;
.d-icon {
height: 0.75em;
width: 0.75em;
margin-right: 0.15em;
}
}
.d-icon-envelope {
color: $danger;
}
}

13
app/assets/stylesheets/common/base/header.scss
View File

@ -231,21 +231,12 @@
text-overflow: ellipsis;
}
.topic-statuses {
margin-top: -2px;
float: left;
padding: 0;
i {
color: $header_primary;
.d-icon {
color: $header_primary-medium;
}
.d-icon-envelope {
color: $danger;
}
.d-icon-lock {
padding-top: 0.15em;
}
.unpinned {
color: $header_primary;
}
}
h1 {
margin: 0 0 0.25em 0;

15
app/assets/stylesheets/common/base/search-menu.scss
View File

@ -57,6 +57,10 @@
.main-results {
display: flex;
flex: 1 1 auto;
.topic-statuses {
line-height: 1;
color: $primary-medium;
}
}
.main-results + .secondary-results {
@ -190,16 +194,5 @@
.topic-title {
margin-right: 0.25em;
}
.topic-statuses {
float: none;
display: inline-block;
color: dark-light-choose($primary-medium, $secondary-medium);
margin: 0;
.fa {
margin: 0;
}
}
}
}

13
app/assets/stylesheets/common/base/search.scss
View File

@ -220,17 +220,18 @@
color: $tertiary-high;
}
.search-link {
.topic-statuses,
.topic-title {
font-size: $font-up-2;
line-height: $line-height-large;
line-height: $line-height-medium;
}
.topic-statuses {
float: none;
display: inline-block;
color: dark-light-choose($primary-medium, $secondary-medium);
font-size: $font-0;
font-size: 1.3em;
line-height: 1;
color: $primary-medium;
span {
line-height: 1;
}
}
}
.blurb {

6
app/assets/stylesheets/common/base/topic.scss
View File

@ -66,6 +66,12 @@
a.topic-featured-link {
display: inline-block;
}
.topic-statuses {
line-height: 0.9;
.d-icon {
color: $primary-medium;
}
}
}
h1 {

6
app/assets/stylesheets/common/components/badges.scss
View File

@ -31,8 +31,9 @@
overflow: hidden;
}
.d-icon {
padding-left: 1px; // prevents lock icon from being cut off on the left
margin-right: 3px;
width: 0.7em;
height: 0.7em;
}
}
@ -63,6 +64,9 @@
width: 5px;
}
}
.d-icon {
color: $primary-medium;
}
}
// ----- Box

5
app/assets/stylesheets/common/components/svg.scss
View File

@ -9,11 +9,6 @@
fill: currentColor;
flex-shrink: 0; // Prevent the icon from shrinking if it's in a flexbox
overflow: visible;
&.d-icon-lock {
height: 0.9em;
width: 0.9em;
}
}
// Stacked Icons

3
app/assets/stylesheets/desktop/category-list.scss
View File

@ -70,9 +70,6 @@
font-size: $font-down-1;
color: dark-light-choose($primary-medium, $secondary-high);
}
.topic-statuses .fa {
color: dark-light-choose($primary-medium, $secondary-high);
}
.title {
white-space: nowrap;
overflow: hidden;

19
app/assets/stylesheets/desktop/discourse.scss
View File

@ -13,25 +13,6 @@ body.widget-dragging {
height: 100%;
}
.topic-statuses {
float: left;
padding: 0;
.topic-status {
padding: 0 2px 0 0;
margin: 0;
line-height: $line-height-small;
.d-icon {
font-size: $font-down-1;
}
}
.d-icon-envelope {
color: $danger;
}
}
.form-vertical {
.control-group {
margin-bottom: 24px;

16
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -6,11 +6,6 @@
margin-left: 0;
}
h1 .topic-statuses .topic-status .d-icon {
font-size: 0.857em;
vertical-align: middle;
}
.topic-body {
// this ensures consistent top margin on topic posts even if the first line of a post
// is a top-margin-less element like a list or image.
@ -509,17 +504,11 @@ video {
}
.topic-statuses {
.d-icon {
color: $header_primary;
color: $header_primary-medium;
}
.d-icon-envelope {
color: $danger;
}
.d-icon-lock {
padding-top: 0.15em;
}
.unpinned {
color: $header_primary;
}
}
.topic-link {
color: $header_primary;
@ -542,9 +531,6 @@ video {
line-height: $line-height-large;
width: 100%;
}
.topic-statuses {
margin-top: -2px;
}
}
/* override docked header CSS for topics with categories */

3
app/assets/stylesheets/desktop/topic.scss
View File

@ -33,9 +33,6 @@
color: $primary;
}
}
.topic-statuses {
margin-top: -2px;
}
.private-message-glyph {
display: none;
}

4
app/assets/stylesheets/mobile/components/user-stream-item.scss
View File

@ -28,8 +28,4 @@
vertical-align: inherit;
}
}
.topic-statuses {
float: left;
}
}

14
app/assets/stylesheets/mobile/discourse.scss
View File

@ -44,20 +44,6 @@ blockquote {
margin-bottom: 9px;
}
.topic-statuses {
display: inline-block;
.topic-status {
.d-icon {
color: $secondary-high;
}
}
&:empty {
display: none;
}
}
// categories should not be bold on mobile; they fight with the topic title too much
.badge-wrapper {
font-weight: normal;

4
app/assets/stylesheets/mobile/header.scss
View File

@ -71,7 +71,3 @@
.search-link .badge-category {
display: none;
}
.search-link .topic-statuses .topic-status .d-icon {
font-size: $font-0;
}

7
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -152,6 +152,13 @@
color: $primary;
padding: 0.5em 0.667em 1.2em 0;
}
.topic-statuses {
line-height: 0.95;
a {
line-height: 0.8;
color: $primary-medium;
}
}
}
.badge-notification,

4
app/assets/stylesheets/mobile/topic.scss
View File

@ -202,6 +202,10 @@ sub sub {
width: 100%;
margin-top: 0;
}
.topic-statuses {
line-height: $line-height-small;
}
}
// make mobile timeline top and bottom dates easier to select