From 6750b018018d34e463fc46dd00d4f7537e6f7d02 Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Tue, 30 Apr 2019 13:42:27 -0600
Subject: [PATCH] Get rid of caption/label for markdown fields

Now that we have the Edit/Preview tabs, having another line of text
above that feels pretty excessive. There are still some awkward uses of
this though, and the field should probably have a <label> element
regardless, so this will likely need some revisiting.
---
 tildes/scss/modules/_form.scss                | 12 ++++++
 .../js/behaviors/comment-reply-button.js      |  3 --
 .../templates/intercooler/comment_edit.jinja2 |  1 -
 .../templates/intercooler/topic_edit.jinja2   |  2 +-
 tildes/tildes/templates/macros/forms.jinja2   | 37 +++++++++----------
 tildes/tildes/templates/settings_bio.jinja2   |  2 +-
 tildes/tildes/templates/topic.jinja2          |  2 +-
 7 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/tildes/scss/modules/_form.scss b/tildes/scss/modules/_form.scss
index 59a90a8..64d8e22 100644
--- a/tildes/scss/modules/_form.scss
+++ b/tildes/scss/modules/_form.scss
@@ -32,6 +32,18 @@ select.form-select:not([multiple]) {
   margin-bottom: 2rem;
 }
 
+.form-markdown {
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    a {
+      font-size: 0.6rem;
+    }
+  }
+}
+
 .form-buttons {
   display: flex;
   flex-direction: row-reverse;
diff --git a/tildes/static/js/behaviors/comment-reply-button.js b/tildes/static/js/behaviors/comment-reply-button.js
index 38161e3..6dbb12b 100644
--- a/tildes/static/js/behaviors/comment-reply-button.js
+++ b/tildes/static/js/behaviors/comment-reply-button.js
@@ -21,7 +21,6 @@ $.onmount('[data-js-comment-reply-button]', function() {
 
         var $parentComment = $(this).parents('article.comment:first');
         var parentCommentID = $parentComment.attr('data-comment-id36');
-        var parentCommentAuthor = $parentComment.find('header:first .link-user').text();
         var postURL = '/api/web/comments/' + parentCommentID + '/replies';
         var markdownID = 'markdown-reply-' + parentCommentID;
         var previewID = markdownID + '-preview';
@@ -36,8 +35,6 @@ $.onmount('[data-js-comment-reply-button]', function() {
         var clone = document.importNode(template.content, true);
 
         clone.querySelector('form').setAttribute('data-ic-post-to', postURL);
-        clone.querySelector('label').setAttribute('for', markdownID);
-        clone.querySelector('span').innerHTML = 'Replying to ' + parentCommentAuthor;
         clone.querySelector('textarea').setAttribute('id', markdownID);
 
         var preview = clone.querySelector('[data-js-markdown-preview]');
diff --git a/tildes/tildes/templates/intercooler/comment_edit.jinja2 b/tildes/tildes/templates/intercooler/comment_edit.jinja2
index 93a7eb1..6e77562 100644
--- a/tildes/tildes/templates/intercooler/comment_edit.jinja2
+++ b/tildes/tildes/templates/intercooler/comment_edit.jinja2
@@ -14,7 +14,6 @@
     data-js-confirm-leave-page-unsaved
 >
   {{ markdown_textarea(
-       'Edit your comment',
        id='markdown-edit-%s' % comment.comment_id36,
        text=comment.markdown,
        auto_focus=True,
diff --git a/tildes/tildes/templates/intercooler/topic_edit.jinja2 b/tildes/tildes/templates/intercooler/topic_edit.jinja2
index f77312a..4d0c4ef 100644
--- a/tildes/tildes/templates/intercooler/topic_edit.jinja2
+++ b/tildes/tildes/templates/intercooler/topic_edit.jinja2
@@ -13,7 +13,7 @@
     data-ic-target=".topic-full .topic-full-text"
     data-js-confirm-leave-page-unsaved
 >
-  {{ markdown_textarea('Edit your topic', id="topic-markdown", text=topic.markdown, auto_focus=True) }}
+  {{ markdown_textarea(id="topic-markdown", text=topic.markdown, auto_focus=True) }}
   <div class="form-buttons">
     <button class="btn btn-primary" type="submit">Save edits</button>
     <button
diff --git a/tildes/tildes/templates/macros/forms.jinja2 b/tildes/tildes/templates/macros/forms.jinja2
index eb3308c..9840d84 100644
--- a/tildes/tildes/templates/macros/forms.jinja2
+++ b/tildes/tildes/templates/macros/forms.jinja2
@@ -1,26 +1,25 @@
 {# Copyright (c) 2018 Tildes contributors <code@tildes.net> #}
 {# SPDX-License-Identifier: AGPL-3.0-or-later #}
 
-{% macro markdown_textarea(caption='Text (Markdown)', id='markdown', text=None, auto_focus=False) %}
-  <label class="form-label" for="{{ id }}">
-    <span>{{ caption }}</span>
-    <a href="https://docs.tildes.net/text-formatting" target="_blank" tabindex="-1">Formatting help</a>
-  </label>
+{% macro markdown_textarea(id='markdown', text=None, auto_focus=False) %}
   <div class="form-markdown">
-    <menu class="tab tab-markdown-mode">
-      <li class="tab-item active" data-js-tab data-js-markdown-edit-tab>
-        <button type="button" class="btn btn-link">Edit</button>
-      </li>
-      <li class="tab-item" data-js-tab data-js-markdown-preview-tab>
-        <button
-          type="button"
-          class="btn btn-link"
-          data-ic-post-to="/api/web/markdown_preview"
-          data-ic-target="#{{ id }}-preview"
-          data-ic-replace-target="false"
-        >Preview</button>
-      </li>
-    </menu>
+    <header>
+      <menu class="tab tab-markdown-mode">
+        <li class="tab-item active" data-js-tab data-js-markdown-edit-tab>
+          <button type="button" class="btn btn-link">Edit</button>
+        </li>
+        <li class="tab-item" data-js-tab data-js-markdown-preview-tab>
+          <button
+            type="button"
+            class="btn btn-link"
+            data-ic-post-to="/api/web/markdown_preview"
+            data-ic-target="#{{ id }}-preview"
+            data-ic-replace-target="false"
+          >Preview</button>
+        </li>
+      </menu>
+      <a href="https://docs.tildes.net/text-formatting" target="_blank" tabindex="-1">Formatting help</a>
+    </header>
     <textarea
       class="form-input"
       id="{{ id }}"
diff --git a/tildes/tildes/templates/settings_bio.jinja2 b/tildes/tildes/templates/settings_bio.jinja2
index 05999bc..1ab65f1 100644
--- a/tildes/tildes/templates/settings_bio.jinja2
+++ b/tildes/tildes/templates/settings_bio.jinja2
@@ -21,7 +21,7 @@
     data-ic-patch-to="{{ request.route_url("ic_user", username=request.user.username) }}"
     data-js-confirm-leave-page-unsaved
   >
-    {{ markdown_textarea('User Bio (Markdown)', text=request.user.bio_markdown) }}
+    {{ markdown_textarea(text=request.user.bio_markdown) }}
 
     <div class="form-buttons">
       <button type="submit" class="btn btn-primary">Save bio</button>
diff --git a/tildes/tildes/templates/topic.jinja2 b/tildes/tildes/templates/topic.jinja2
index e3bf03e..2e1db66 100644
--- a/tildes/tildes/templates/topic.jinja2
+++ b/tildes/tildes/templates/topic.jinja2
@@ -284,7 +284,7 @@
     >
       <input type="hidden" name="csrf_token" value="{{ get_csrf_token() }}">
 
-      {{ markdown_textarea('New top-level comment') }}
+      {{ markdown_textarea() }}
 
       <div class="form-buttons">
         <button class="btn btn-primary" type="submit">Post comment</button>