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

Improving mutli-post select styling

This commit is contained in:
Kris 2018-07-20 16:37:43 -04:00
parent 5e521f8ce6
commit c6fe6a8820
5 changed files with 77 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/templates/selected-posts.hbs
View File

@ -9,7 +9,7 @@
{{/if}}
{{#if canDeleteSelected}}
{{d-button action="deleteSelected" icon="trash-o" label="topic.multi_select.delete"}}
{{d-button action="deleteSelected" icon="trash-o" label="topic.multi_select.delete" class="btn-danger"}}
{{/if}}
{{#if canSplitTopic}}

36
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -88,3 +88,39 @@
margin: 0 10px;
}
}
// Select posts
.selected-posts {
border: 1px solid $tertiary-medium;
background-color: $tertiary-low;
.btn {
border: none;
color: $secondary;
font-weight: normal;
margin-bottom: 10px;
&:not(.btn-danger) {
background: $tertiary;
border-color: $tertiary;
&[href] {
color: $secondary;
}
&:hover {
color: $secondary;
background: $tertiary-high;
}
&:active {
@include linear-gradient(
darken($tertiary, 18%),
darken($tertiary, 12%)
);
color: $secondary;
}
}
&[disabled] {
text-shadow: 0 1px 0 rgba($primary, 0.2);
@include linear-gradient($tertiary, darken($tertiary, 20%));
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33);
}
}
}

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

@ -709,6 +709,43 @@ a.mention-group {
}
}
// Select posts
.topic-post {
&.selected {
article.boxed {
.select-posts {
button.select-post {
background-color: $tertiary;
color: $secondary;
border-color: $tertiary;
}
}
.topic-body {
.contents:after {
display: none;
}
}
}
}
article.boxed {
position: relative;
.select-posts {
position: absolute;
right: 5em;
z-index: z("base") + 1;
top: 0.5em;
height: 100px;
button {
margin-left: 8px;
background-color: $primary-low;
color: $primary;
box-shadow: shadow("dropdown");
}
}
}
}
@media all and (max-width: 767px) {
.reply-to-tab {
span {

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

@ -780,9 +780,8 @@ $topic-avatar-width: 45px;
width: 200px;
position: fixed;
z-index: z("dropdown");
background-color: $tertiary-low;
border: 1px solid $tertiary;
padding: 5px;
box-shadow: shadow("card");
padding: 0.714em;
margin-bottom: 5px;
right: 10px;
@include breakpoint(extra-large, min-width) {
@ -791,7 +790,7 @@ $topic-avatar-width: 45px;
left: 50%;
}
button {
width: 180px;
width: 100%;
margin: 4px auto;
display: inline-block;
text-align: left;
@ -817,63 +816,6 @@ $topic-avatar-width: 45px;
margin-right: 7px;
}
}
.btn {
border: none;
color: $secondary;
font-weight: normal;
margin-bottom: 10px;
background: $tertiary-medium;
&[href] {
color: $secondary;
}
&:hover {
color: $secondary;
background: $tertiary-high;
}
&:active {
@include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%));
color: $secondary;
}
&[disabled] {
text-shadow: 0 1px 0 rgba($primary, 0.2);
@include linear-gradient($tertiary, darken($tertiary, 20%));
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33);
}
}
}
.topic-post {
&.selected {
article.boxed {
.select-posts {
button.select-post {
background-color: $tertiary-medium;
color: $secondary;
}
}
.topic-body {
.contents:after {
display: none;
}
}
}
}
article.boxed {
position: relative;
.select-posts {
position: absolute;
right: 0;
z-index: z("base") + 1;
top: 3em;
height: 100px;
button {
margin-left: 8px;
background-color: dark-light-choose($primary-low-mid, $secondary-high);
border: 1px solid dark-light-choose($primary-medium, $secondary-high);
color: $primary;
}
}
}
}
a.attachment:before {

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

@ -363,18 +363,7 @@ iframe {
}
.selected-posts {
width: 97%;
padding: 0.1em 0.7em;
background-color: srgb-scale($tertiary, $secondary, 15%);
.btn {
margin-bottom: 10px;
color: $secondary;
background: $tertiary;
clear: both;
}
p {
clear: both;
}
}
// hide the full set of selection buttons on mobile
@ -385,18 +374,6 @@ iframe {
// unhide the simple "select just this post" button
button.select-post {
display: inline-block;
position: absolute;
z-index: z("base") + 1;
left: 200px;
background-color: srgb-scale($tertiary, $secondary, 60%);
color: $secondary;
padding: 5px;
}
.post-select {
float: right;
margin-right: 20px;
margin-top: -20px;
}
.deleted {