From 7ba46587d15eb3c967d866d13f5863d179a025ce Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Tue, 30 Apr 2019 14:01:22 -0600
Subject: [PATCH] Add styling to markdown preview

---
 tildes/scss/modules/_form.scss                     | 10 ++++++++++
 tildes/scss/themes/_theme_base.scss                |  4 ++++
 tildes/static/js/behaviors/comment-reply-button.js |  2 +-
 tildes/static/js/behaviors/markdown-edit-tab.js    |  2 +-
 tildes/static/js/behaviors/markdown-preview-tab.js |  2 +-
 tildes/tildes/templates/macros/forms.jinja2        |  2 +-
 6 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/tildes/scss/modules/_form.scss b/tildes/scss/modules/_form.scss
index 64d8e22..c4d44a3 100644
--- a/tildes/scss/modules/_form.scss
+++ b/tildes/scss/modules/_form.scss
@@ -44,6 +44,16 @@ select.form-select:not([multiple]) {
   }
 }
 
+.form-markdown-preview {
+  @extend %links-text;
+  @extend %lists-text;
+
+  min-height: 8rem;
+  padding: 0.4rem;
+  border: 1px dashed;
+  overflow: auto;
+}
+
 .form-buttons {
   display: flex;
   flex-direction: row-reverse;
diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index c2ea641..93d408f 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/tildes/scss/themes/_theme_base.scss
@@ -323,6 +323,10 @@
     border-color: map-get($theme, "border");
   }
 
+  .form-markdown-preview {
+    border-color: map-get($theme, "border");
+  }
+
   .form-select {
     border-color: map-get($theme, "border");
 
diff --git a/tildes/static/js/behaviors/comment-reply-button.js b/tildes/static/js/behaviors/comment-reply-button.js
index 6dbb12b..b5a7a15 100644
--- a/tildes/static/js/behaviors/comment-reply-button.js
+++ b/tildes/static/js/behaviors/comment-reply-button.js
@@ -37,7 +37,7 @@ $.onmount('[data-js-comment-reply-button]', function() {
         clone.querySelector('form').setAttribute('data-ic-post-to', postURL);
         clone.querySelector('textarea').setAttribute('id', markdownID);
 
-        var preview = clone.querySelector('[data-js-markdown-preview]');
+        var preview = clone.querySelector('.form-markdown-preview');
         preview.setAttribute('id', previewID);
 
         clone.querySelector('[data-js-markdown-preview-tab] .btn')
diff --git a/tildes/static/js/behaviors/markdown-edit-tab.js b/tildes/static/js/behaviors/markdown-edit-tab.js
index de5f84b..02cd5b0 100644
--- a/tildes/static/js/behaviors/markdown-edit-tab.js
+++ b/tildes/static/js/behaviors/markdown-edit-tab.js
@@ -4,7 +4,7 @@
 $.onmount('[data-js-markdown-edit-tab]', function() {
     $(this).click(function(event) {
         var $editTextarea = $(this).closest('form').find('[name="markdown"]');
-        var $previewDiv = $(this).closest('form').find('[data-js-markdown-preview]');
+        var $previewDiv = $(this).closest('form').find('.form-markdown-preview');
 
         $editTextarea.removeClass('d-none');
         $previewDiv.addClass('d-none');
diff --git a/tildes/static/js/behaviors/markdown-preview-tab.js b/tildes/static/js/behaviors/markdown-preview-tab.js
index 07660e6..f4b4983 100644
--- a/tildes/static/js/behaviors/markdown-preview-tab.js
+++ b/tildes/static/js/behaviors/markdown-preview-tab.js
@@ -4,7 +4,7 @@
 $.onmount('[data-js-markdown-preview-tab]', function() {
     $(this).click(function(event) {
         var $editTextarea = $(this).closest('form').find('[name="markdown"]');
-        var $previewDiv = $(this).closest('form').find('[data-js-markdown-preview]');
+        var $previewDiv = $(this).closest('form').find('.form-markdown-preview');
 
         $editTextarea.addClass('d-none');
         $previewDiv.removeClass('d-none');
diff --git a/tildes/tildes/templates/macros/forms.jinja2 b/tildes/tildes/templates/macros/forms.jinja2
index 9840d84..963449e 100644
--- a/tildes/tildes/templates/macros/forms.jinja2
+++ b/tildes/tildes/templates/macros/forms.jinja2
@@ -28,7 +28,7 @@
       data-js-ctrl-enter-submit-form
       {% if auto_focus %}data-js-auto-focus{% endif %}
     >{% if text %}{{ text }}{% endif %}</textarea>
-    <div id="{{ id }}-preview" class="d-none" data-js-markdown-preview></div>
+    <div id="{{ id }}-preview" class="form-markdown-preview d-none"></div>
   </div>
 {% endmacro %}