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

UX: Better alignment of small topic statuses

Browse Source
This commit is contained in:
Kris 2018-02-08 17:04:29 -05:00
parent e17e6d2880
commit 69bccb9e32
2 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -385,7 +385,7 @@ blockquote > *:last-child {
} }
.gap { .gap {
padding: 0.25em 0 0.5em 4.3em; padding: 0.25em 0 0.5em 4.6em;
color: dark-light-choose($primary-medium, $secondary-high); color: dark-light-choose($primary-medium, $secondary-high);
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
@ -420,17 +420,20 @@ blockquote > *:last-child {
} }
.small-action { .small-action {
display: flex;
align-items: center;
max-width: 755px; max-width: 755px;
border-top: 1px solid $primary-low; border-top: 1px solid $primary-low;
.topic-avatar { .topic-avatar {
padding: .67em 0; align-self: flex-start;
padding: .7em 0;
border-top: none; border-top: none;
float: left; margin-right: 11px;
i { i {
font-size: 2em; font-size: 2em;
width: 45px; width: 45px;
text-align: center; text-align: center;
color: dark-light-choose($primary-low-mid, $secondary-high); color: $primary-low-mid;
} }
} }
@ -439,27 +442,33 @@ blockquote > *:last-child {
} }
.small-action-desc.timegap { .small-action-desc.timegap {
color: dark-light-choose($primary-medium, $secondary-high); color: $primary-medium;
} }
.small-action-desc { .small-action-desc {
padding: 1em; display: flex;
flex-wrap: wrap;
flex: 1 1 100%;
align-items: center;
padding: 1em 0;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: $font-down-1; font-size: $font-down-1;
color: dark-light-choose($primary-low-mid, $secondary-high); color: $primary-medium;
.custom-message { .custom-message {
flex: 1 1 100%;
text-transform: none; text-transform: none;
margin: 15px 0 5px;
font-weight: normal; font-weight: normal;
font-size: $font-up-1; font-size: $font-up-1;
order: 12;
p { p {
margin: 5px 0; margin-bottom: 0;
line-height: $line-height-large;
} }
} }
a.trigger-user-card {
align-self: stretch;
}
.avatar { .avatar {
margin-right: 0.8em; margin-right: 0.8em;
float: left; float: left;
@ -467,18 +476,21 @@ blockquote > *:last-child {
> p { > p {
margin: 0; margin: 0;
padding-top: 4px; line-height: $line-height-medium;
flex: 1 1;
} }
} }
button { button {
background: transparent; background: transparent;
border: 0; border: 0;
float: right; order: 9;
margin-top: -2px; &:last-of-type {
margin-left: auto;
order: 8;
}
} }
clear: both;
} }
.whisper { .whisper {

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

@ -3,6 +3,12 @@
border-top: none; border-top: none;
} }
.time-gap {
.topic-avatar {
display: none;
}
}
.topic-post article { .topic-post article {
border-top: 1px solid $primary-low; border-top: 1px solid $primary-low;
padding: 15px 0 8px 0; padding: 15px 0 8px 0;
@ -431,6 +437,10 @@ blockquote {
margin-right: 0; margin-right: 0;
} }
.gap {
padding: 0.25em 0;
}
.gutter { display: none; } .gutter { display: none; }
.posts-wrapper { position: relative; } .posts-wrapper { position: relative; }