From 7ba46587d15eb3c967d866d13f5863d179a025ce Mon Sep 17 00:00:00 2001 From: Deimos 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 %} -
+
{% endmacro %}