Browse Source

Change comment collapse/expand all button styles

These buttons were basically icons, and it's better to have them with
text labels like this. Their left border was also disappearing at
smaller screen sizes due to re-using the .btn-comment-collapse style, so
it's better to do a separate style for "light buttons" like this, and
keep that behavior specifically to the actual comment collapse buttons.
merge-requests/68/head
Chad Birch 6 years ago
parent
commit
ecdc08ac03
  1. 8
      tildes/scss/modules/_btn.scss
  2. 2
      tildes/scss/themes/_theme_base.scss
  3. 2
      tildes/tildes/templates/macros/comments.jinja2
  4. 6
      tildes/tildes/templates/topic.jinja2

8
tildes/scss/modules/_btn.scss

@ -30,14 +30,10 @@
}
.btn-comment-collapse {
@include min-touch-size;
height: 100%;
line-height: 100%;
padding: 0;
font-weight: normal;
@media (max-width: $size-md) {
border-left: 0;
}
@ -73,6 +69,10 @@
}
}
.btn-light {
font-weight: normal;
}
.btn-post {
display: flex;
flex-wrap: wrap;

2
tildes/scss/themes/_theme_base.scss

@ -111,7 +111,7 @@
}
}
.btn-comment-collapse {
.btn-light {
color: map-get($theme, "foreground-secondary");
border-color: map-get($theme, "border");

2
tildes/tildes/templates/macros/comments.jinja2

@ -40,7 +40,7 @@
{% macro render_comment_contents(comment, is_individual_comment=False) %}
<div class="comment-itself">
<header>
<button class="btn btn-comment-collapse" data-js-comment-collapse-button>
<button class="btn btn-light btn-comment-collapse" data-js-comment-collapse-button>
{{ "+" if comment.collapsed_state in ("full", "individual") else "−" }}
</button>

6
tildes/tildes/templates/topic.jinja2

@ -219,8 +219,10 @@
{% endtrans %}
</h2>
<button class="btn btn-comment-collapse" title="Collapse reply comments" data-js-comment-collapse-all-button>&minus;</button>
<button class="btn btn-comment-collapse" title="Expand all comments" data-js-comment-expand-all-button>+</button>
<div class="btn-group">
<button class="btn btn-sm btn-light" data-js-comment-collapse-all-button>Collapse replies</button>
<button class="btn btn-sm btn-light" data-js-comment-expand-all-button>Expand all</button>
</div>
<form class="form-listing-options" method="get">
<div class="form-group">

Loading…
Cancel
Save