IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-28 19:53:53 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: New style for staff highlight

Browse Source 
Moved highlight to cooked content, also highlighting primary name (with shield) and title (if applicable). 

**Before**:
![image](https://user-images.githubusercontent.com/1681963/33724323-2269e79e-db3d-11e7-8c93-75b9dc9a1ab7.png)


**After**:
<img width="809" alt="screen shot 2017-12-06 at 3 55 31 pm" src="https://user-images.githubusercontent.com/1681963/33724287-09eb66de-db3d-11e7-8e02-0062ed2b8716.png">
This commit is contained in:
Kris 2017-12-07 12:40:39 -05:00 committed by GitHub
parent 282633bc97
commit ef0d9d631c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -23,7 +23,7 @@
span {
font-size: 0.929em;
padding-right: 8px;
margin-right: 8px;
display: inline-block;
max-width: 280px;
white-space: nowrap;
@ -38,7 +38,7 @@
margin-left: 3px;
color: dark-light-choose($primary-medium, $secondary-medium);
}
.new_user a, .user-title, .user-title a {
.new_user a, .user-title, .user-title a {
color: dark-light-choose($primary-medium, $secondary-medium);
}
}
@ -53,7 +53,6 @@
del { background-color: dark-light-choose($danger-low, scale-color($danger, $lightness: -60%)); }
}
.cooked, .d-editor-preview {
video {
max-width: 100%;
@ -62,6 +61,27 @@
top: 0;
}
}
// add staff color
.moderator {
.cooked {
background-color: dark-light-choose($highlight-low, $highlight-medium);
padding: 10px;
img:not(.thumbnail) {
max-width: 100%;
height: auto;
}
}
.names {
span.user-title, .first {
background-color: dark-light-choose($highlight-low, $highlight-medium);
color: dark-light-choose($primary-high, $secondary-low);
padding-left: 4px;
padding-right: 4px;
}
}
}
// we use aside to hold expandable quotes (versus, say, static blockquotes)
aside.quote {
margin-top: 1em;
@ -459,3 +479,19 @@ a.mention, a.mention-group {
font-size: 32px;
padding: 16px;
}
/* below standard tablet portrait ----------- */
@media all
and (max-width : 767px) {
.reply-to-tab {
span {display: none;}
}
.names {
span {display: block;}
}
.user-title {
float: left;
clear: left;
}
}

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

@ -572,11 +572,6 @@ video {
position: relative;
}
.moderator {
.topic-body {
background-color: dark-light-choose($highlight-low, $highlight-medium);
}
}
.deleted {
.topic-body {
@ -970,19 +965,3 @@ and (max-width : 870px) {
}
}
/* below standard tablet portrait ----------- */
@media all
and (max-width : 767px) {
.reply-to-tab {
span {display: none;}
}
.names {
span {display: block;}
}
}

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

@ -133,7 +133,6 @@ a.reply-to-tab {
z-index: 400;
right: 80px;
color: dark-light-choose($primary-medium, $secondary-medium);
span { display: none; }
}
a.star {
@ -360,10 +359,6 @@ span.post-count {
line-height: $base-line-height + 2; /* bump up line height to match increased font */
}
.moderator .topic-body {
background-color: dark-light-choose($highlight-low, $highlight-medium);
}
.quote-button.visible {
display: block;
z-index: 936;
@ -488,9 +483,6 @@ span.highlighted {
.names {
margin: 5px 0 0 5px;
line-height: 17px;
span.full-name, span.user-title, span.username {
display: block;
}
.poster-icon {
float: right;