Browse Source

Use a class for comment headers

Previously the styling was just based on the <header> element, but that
ends up inadvertently styling any other <header>s inside comments, which
we don't necessarily want.
merge-requests/68/head
Deimos 6 years ago
parent
commit
5b7893e2c9
  1. 26
      tildes/scss/modules/_comment.scss
  2. 12
      tildes/scss/themes/_theme_base.scss
  3. 2
      tildes/tildes/templates/macros/comments.jinja2

26
tildes/scss/modules/_comment.scss

@ -5,19 +5,6 @@
border-left: 1px solid; border-left: 1px solid;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
header {
display: flex;
align-items: center;
font-size: 0.7rem;
line-height: 0.7rem;
// no padding on mobile - the collapse button will do the job
padding: 0 0.2rem 0 0;
@media (min-width: $size-md) {
padding: 0.2rem;
}
}
&:target > .comment-itself { &:target > .comment-itself {
border-left: 3px solid; border-left: 3px solid;
} }
@ -27,6 +14,19 @@
border-bottom: 1px solid; border-bottom: 1px solid;
} }
.comment-header {
display: flex;
align-items: center;
font-size: 0.7rem;
line-height: 0.7rem;
// no padding on mobile - the collapse button will do the job
padding: 0 0.2rem 0 0;
@media (min-width: $size-md) {
padding: 0.2rem;
}
}
.comment-user-info { .comment-user-info {
margin-left: 0.2rem; margin-left: 0.2rem;
} }

12
tildes/scss/themes/_theme_base.scss

@ -257,7 +257,7 @@
} }
%collapsed-theme { %collapsed-theme {
header {
.comment-header {
background-color: map-get($theme, "background-primary"); background-color: map-get($theme, "background-primary");
} }
} }
@ -275,16 +275,16 @@
.comment { .comment {
border-color: map-get($theme, "border"); border-color: map-get($theme, "border");
header {
color: map-get($theme, "foreground-highlight");
background-color: map-get($theme, "background-secondary");
}
&[data-comment-depth="0"] { &[data-comment-depth="0"] {
border-color: map-get($theme, "border"); border-color: map-get($theme, "border");
} }
} }
.comment-header {
color: map-get($theme, "foreground-highlight");
background-color: map-get($theme, "background-secondary");
}
.comment:target > .comment-itself { .comment:target > .comment-itself {
border-left-color: map-get($theme, "stripe-target"); border-left-color: map-get($theme, "stripe-target");
} }

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

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

Loading…
Cancel
Save