Browse Source

Add styling to markdown preview

merge-requests/68/head
Deimos 6 years ago
parent
commit
7ba46587d1
  1. 10
      tildes/scss/modules/_form.scss
  2. 4
      tildes/scss/themes/_theme_base.scss
  3. 2
      tildes/static/js/behaviors/comment-reply-button.js
  4. 2
      tildes/static/js/behaviors/markdown-edit-tab.js
  5. 2
      tildes/static/js/behaviors/markdown-preview-tab.js
  6. 2
      tildes/tildes/templates/macros/forms.jinja2

10
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 { .form-buttons {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;

4
tildes/scss/themes/_theme_base.scss

@ -323,6 +323,10 @@
border-color: map-get($theme, "border"); border-color: map-get($theme, "border");
} }
.form-markdown-preview {
border-color: map-get($theme, "border");
}
.form-select { .form-select {
border-color: map-get($theme, "border"); border-color: map-get($theme, "border");

2
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('form').setAttribute('data-ic-post-to', postURL);
clone.querySelector('textarea').setAttribute('id', markdownID); 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); preview.setAttribute('id', previewID);
clone.querySelector('[data-js-markdown-preview-tab] .btn') clone.querySelector('[data-js-markdown-preview-tab] .btn')

2
tildes/static/js/behaviors/markdown-edit-tab.js

@ -4,7 +4,7 @@
$.onmount('[data-js-markdown-edit-tab]', function() { $.onmount('[data-js-markdown-edit-tab]', function() {
$(this).click(function(event) { $(this).click(function(event) {
var $editTextarea = $(this).closest('form').find('[name="markdown"]'); 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'); $editTextarea.removeClass('d-none');
$previewDiv.addClass('d-none'); $previewDiv.addClass('d-none');

2
tildes/static/js/behaviors/markdown-preview-tab.js

@ -4,7 +4,7 @@
$.onmount('[data-js-markdown-preview-tab]', function() { $.onmount('[data-js-markdown-preview-tab]', function() {
$(this).click(function(event) { $(this).click(function(event) {
var $editTextarea = $(this).closest('form').find('[name="markdown"]'); 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'); $editTextarea.addClass('d-none');
$previewDiv.removeClass('d-none'); $previewDiv.removeClass('d-none');

2
tildes/tildes/templates/macros/forms.jinja2

@ -28,7 +28,7 @@
data-js-ctrl-enter-submit-form data-js-ctrl-enter-submit-form
{% if auto_focus %}data-js-auto-focus{% endif %} {% if auto_focus %}data-js-auto-focus{% endif %}
>{% if text %}{{ text }}{% endif %}</textarea> >{% 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> </div>
{% endmacro %} {% endmacro %}

Loading…
Cancel
Save