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

UX: Adjustments for embedded reply collapse button

This commit is contained in:
Kris 2018-01-19 16:16:22 -05:00
parent 5b820ebb62
commit 2de1264213
1 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -204,14 +204,15 @@ nav.post-controls {
.embedded-posts { .embedded-posts {
h1, h2, h3 { margin: 10px 0; } h1, h2, h3 { margin: 10px 0; }
border: 1px solid $primary-low;
.topic-body { .topic-body {
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 70px); // [100% - .topic-avatar width] width: calc(100% - 70px); // [100% - .topic-avatar width]
// WARNING: overflow hide is required for quoted / embedded images // WARNING: overflow hide is required for quoted / embedded images
// which expect "normal" post width, but expansions are narrower // which expect "normal" post width, but expansions are narrower
overflow: hidden; overflow: hidden;
padding: 15px 15px 0 15px; padding: 15px 25px 0 15px;
} }
// this is covered by .topic-body .regular on a normal post // this is covered by .topic-body .regular on a normal post
@ -225,10 +226,6 @@ nav.post-controls {
padding-top: 15px; padding-top: 15px;
} }
.row {
border: 1px solid $primary-low;
}
.collapse-down, .collapse-up { .collapse-down, .collapse-up {
position: absolute; position: absolute;
color: $primary-medium; color: $primary-medium;
@ -244,6 +241,8 @@ nav.post-controls {
// bottom means "reply expansion" below a post // bottom means "reply expansion" below a post
&.bottom { &.bottom {
border-top: none;
margin-bottom: 20px;
&.hidden { &.hidden {
display: block; display: block;
opacity: 0; opacity: 0;
@ -255,8 +254,6 @@ nav.post-controls {
} }
.row { .row {
padding-bottom: .5em; padding-bottom: .5em;
border-top: none;
border-bottom: none;
.topic-avatar, .topic-body { .topic-avatar, .topic-body {
border-top: 1px solid $primary-low; border-top: 1px solid $primary-low;
} }
@ -265,11 +262,12 @@ nav.post-controls {
// top means "in reply to expansion" above a post // top means "in reply to expansion" above a post
&.top { &.top {
border-bottom: none;
.collapse-down { .collapse-down {
transform: translate(-50%, 55%); transform: translate(-50%, 55%);
} }
margin-left: 56px; margin-left: 56px;
width: 701px; width: 699px;
.row { .row {
border-bottom: none; border-bottom: none;
.topic-avatar, .topic-body { .topic-avatar, .topic-body {