From 8c38ec7d09734d1f7182ac51be6d67e350ab713c Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Fri, 28 Sep 2018 17:39:03 -0600
Subject: [PATCH] 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
---
 tildes/scss/modules/_btn.scss                  | 2 ++
 tildes/scss/modules/_comment.scss              | 8 ++------
 tildes/tildes/enums.py                         | 5 +++--
 tildes/tildes/templates/macros/comments.jinja2 | 7 +++----
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/tildes/scss/modules/_btn.scss b/tildes/scss/modules/_btn.scss
index b91b5f0..02be2bb 100644
--- a/tildes/scss/modules/_btn.scss
+++ b/tildes/scss/modules/_btn.scss
@@ -67,6 +67,8 @@
 }
 
 .btn-comment-label {
+  @include min-touch-size;
+
   display: inline-flex;
   align-items: center;
   margin: 0 0.4rem;
diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss
index a8aff47..0da69c8 100644
--- a/tildes/scss/modules/_comment.scss
+++ b/tildes/scss/modules/_comment.scss
@@ -99,6 +99,8 @@
 
 .comment-label-buttons {
   display: flex;
+  flex-wrap: wrap;
+
   margin: 0;
   padding: 0 1rem;
   justify-content: space-between;
@@ -112,12 +114,6 @@
   font-size: 0.6rem;
 }
 
-.comment-label-note {
-  font-size: 0.5rem;
-  font-style: italic;
-  text-align: center;
-}
-
 .comment-text {
   padding: 0.2rem;
   padding-left: 0.4rem;
diff --git a/tildes/tildes/enums.py b/tildes/tildes/enums.py
index 500a959..6c8ec1e 100644
--- a/tildes/tildes/enums.py
+++ b/tildes/tildes/enums.py
@@ -51,8 +51,9 @@ class CommentLabelOption(enum.Enum):
         """Return the reason prompt for this label, if any."""
         if self.name == "EXEMPLARY":
             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":
             return "Why is this malicious? (required, will only be visible to admins)"
diff --git a/tildes/tildes/templates/macros/comments.jinja2 b/tildes/tildes/templates/macros/comments.jinja2
index cef155e..86798cd 100644
--- a/tildes/tildes/templates/macros/comments.jinja2
+++ b/tildes/tildes/templates/macros/comments.jinja2
@@ -260,10 +260,9 @@
             {% if label.reason_prompt %}
               data-js-reason-prompt="{{ label.reason_prompt }}"
             {% 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>
       {% endfor %}
     </ul>