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: button styling

Browse Source
This commit is contained in:
Kris 2018-01-16 16:06:04 -05:00
parent dc5b0e05e2
commit 2e12c2c352
2 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/widgets/post.js.es6
View File

@ -299,8 +299,7 @@ createWidget('post-contents', {
const repliesBelow = state.repliesBelow; const repliesBelow = state.repliesBelow;
if (repliesBelow.length) { if (repliesBelow.length) {
result.push(h('section.embedded-posts.bottom', [ result.push(h('section.embedded-posts.bottom', [
repliesBelow.map(p => { repliesBelow.map(p => {
return this.attach('embedded-post', p, { model: this.store.createRecord('post', p) }); return this.attach('embedded-post', p, { model: this.store.createRecord('post', p) });
}), }),

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

@ -229,6 +229,19 @@ nav.post-controls {
border: 1px solid $primary-low; border: 1px solid $primary-low;
} }
.collapse-down, .collapse-up {
position: absolute;
color: $primary-medium;
background: $secondary;
border: 1px solid $primary-low;
padding: 6px 9px 8px;
z-index: 99; // Needs to be higher than topic-avatar
&:hover {
background: $primary-low;
color: $primary;
}
}
// bottom means "reply expansion" below a post // bottom means "reply expansion" below a post
&.bottom { &.bottom {
&.hidden { &.hidden {
@ -238,12 +251,7 @@ nav.post-controls {
} }
&.bottom { &.bottom {
.collapse-up { .collapse-up {
position: absolute; transform: translate(-50%, -164%);
transform: translate(-50%, -170%);
background: $secondary;
border: 1px solid $primary-low;
padding: 6px 9px 8px;
z-index: 99; // Needs to be higher than topic-avatar
} }
.row { .row {
padding-bottom: .5em; padding-bottom: .5em;
@ -258,12 +266,7 @@ nav.post-controls {
// top means "in reply to expansion" above a post // top means "in reply to expansion" above a post
&.top { &.top {
.collapse-down { .collapse-down {
position: absolute;
transform: translate(-50%, 55%); transform: translate(-50%, 55%);
background: $secondary;
border: 1px solid $primary-low;
padding: 6px 9px 8px;
z-index: 99; // Needs to be higher than topic-avatar
} }
margin-left: 56px; margin-left: 56px;
width: 701px; width: 701px;