Browse Source

Adjust comment label button display a little

* Enables wrapping when the buttons will go offscreen
* Turns on minimum touch size
* Adds a "..." on the labels that require a reason
* Moves the info about the cooldown on Exemplary into the prompt
merge-requests/40/head
Deimos 6 years ago
parent
commit
8c38ec7d09
  1. 2
      tildes/scss/modules/_btn.scss
  2. 8
      tildes/scss/modules/_comment.scss
  3. 5
      tildes/tildes/enums.py
  4. 7
      tildes/tildes/templates/macros/comments.jinja2

2
tildes/scss/modules/_btn.scss

@ -67,6 +67,8 @@
} }
.btn-comment-label { .btn-comment-label {
@include min-touch-size;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin: 0 0.4rem; margin: 0 0.4rem;

8
tildes/scss/modules/_comment.scss

@ -99,6 +99,8 @@
.comment-label-buttons { .comment-label-buttons {
display: flex; display: flex;
flex-wrap: wrap;
margin: 0; margin: 0;
padding: 0 1rem; padding: 0 1rem;
justify-content: space-between; justify-content: space-between;
@ -112,12 +114,6 @@
font-size: 0.6rem; font-size: 0.6rem;
} }
.comment-label-note {
font-size: 0.5rem;
font-style: italic;
text-align: center;
}
.comment-text { .comment-text {
padding: 0.2rem; padding: 0.2rem;
padding-left: 0.4rem; padding-left: 0.4rem;

5
tildes/tildes/enums.py

@ -51,8 +51,9 @@ class CommentLabelOption(enum.Enum):
"""Return the reason prompt for this label, if any.""" """Return the reason prompt for this label, if any."""
if self.name == "EXEMPLARY": if self.name == "EXEMPLARY":
return ( return (
"What makes this comment exemplary? "
"(required, visible to the comment's author anonymously)"
"Write a short message to say thanks or explain why you appreciated "
"this comment (required, visible to the comment's author anonymously)"
"\n\nYou will not be able to use this label again for 8 hours."
) )
if self.name == "MALICE": if self.name == "MALICE":
return "Why is this malicious? (required, will only be visible to admins)" return "Why is this malicious? (required, will only be visible to admins)"

7
tildes/tildes/templates/macros/comments.jinja2

@ -260,10 +260,9 @@
{% if label.reason_prompt %} {% if label.reason_prompt %}
data-js-reason-prompt="{{ label.reason_prompt }}" data-js-reason-prompt="{{ label.reason_prompt }}"
{% endif %} {% endif %}
>{{ label.name|lower }}</a>
{% if label.name == "EXEMPLARY" %}
<div class="comment-label-note">One per 8 hours</div>
{% endif %}
>
{{ label.name|lower }}{% if label.reason_prompt %}...{% endif %}
</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

Loading…
Cancel
Save