Browse Source

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.
merge-requests/68/head
Deimos 6 years ago
parent
commit
6750b01801
  1. 12
      tildes/scss/modules/_form.scss
  2. 3
      tildes/static/js/behaviors/comment-reply-button.js
  3. 1
      tildes/tildes/templates/intercooler/comment_edit.jinja2
  4. 2
      tildes/tildes/templates/intercooler/topic_edit.jinja2
  5. 37
      tildes/tildes/templates/macros/forms.jinja2
  6. 2
      tildes/tildes/templates/settings_bio.jinja2
  7. 2
      tildes/tildes/templates/topic.jinja2

12
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;

3
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]');

1
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,

2
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

37
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 }}"

2
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>

2
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>

Loading…
Cancel
Save