Put the markdown preview on the side
This commit is contained in:
Ben Visness
parent
19297c9231
commit
4ba175c5a5
|
|
@ -7312,6 +7312,17 @@ article code {
|
||||||
.flex-grow-1 {
|
.flex-grow-1 {
|
||||||
flex-grow: 1; }
|
flex-grow: 1; }
|
||||||
|
|
||||||
|
.flex-fair {
|
||||||
|
flex-basis: 1px;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1; }
|
||||||
|
|
||||||
|
@media screen and (min-width: 30em) {
|
||||||
|
.flex-fair-ns {
|
||||||
|
flex-basis: 1px;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1; } }
|
||||||
|
|
||||||
.b--theme {
|
.b--theme {
|
||||||
border-color: #666;
|
border-color: #666;
|
||||||
border-color: var(--theme-color); }
|
border-color: var(--theme-color); }
|
||||||
|
|
|
||||||
|
|
@ -180,6 +180,20 @@ article code {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex-fair {
|
||||||
|
flex-basis: 1px;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$breakpoint-not-small} {
|
||||||
|
.flex-fair-ns {
|
||||||
|
flex-basis: 1px;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.b--theme {
|
.b--theme {
|
||||||
@include usevar(border-color, theme-color);
|
@include usevar(border-color, theme-color);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,92 +9,99 @@
|
||||||
<script>
|
<script>
|
||||||
const previewWorker = new Worker('{{ static "js/editorpreviews.js" }}');
|
const previewWorker = new Worker('{{ static "js/editorpreviews.js" }}');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#editor {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "content" }}
|
{{ define "content" }}
|
||||||
<div class="content-block">
|
<div class="content-block ph3 ph0-ns">
|
||||||
<form id="form" action="{{ .SubmitUrl }}" method="post">
|
<div class="flex flex-column flex-row-ns">
|
||||||
{{ csrftoken .Session }}
|
<form id="form" action="{{ .SubmitUrl }}" method="post" class="flex-fair-ns">
|
||||||
|
{{ csrftoken .Session }}
|
||||||
|
|
||||||
<input class="b w-100 mb1" name="title" type="text" placeholder="Post title..." value="{{ .PostTitle }}"/>
|
<input class="b w-100 mb1" name="title" type="text" placeholder="Post title..." value="{{ .PostTitle }}"/>
|
||||||
{{/* TODO: Reintroduce the toolbar in a way that makes sense for Markdown */}}
|
{{/* TODO: Reintroduce the toolbar in a way that makes sense for Markdown */}}
|
||||||
{{/*
|
{{/*
|
||||||
<div class="toolbar" id="toolbar">
|
<div class="toolbar" id="toolbar">
|
||||||
<input type="button" id="bold" value="B" />
|
<input type="button" id="bold" value="B" />
|
||||||
<input type="button" id="italic" value="I" />
|
<input type="button" id="italic" value="I" />
|
||||||
<input type="button" id="underline" value="U" />
|
<input type="button" id="underline" value="U" />
|
||||||
<input type="button" id="monospace" value="monospace" />
|
<input type="button" id="monospace" value="monospace" />
|
||||||
<input type="button" id="url" value="url" />
|
<input type="button" id="url" value="url" />
|
||||||
<input type="button" id="img" value="img" />
|
<input type="button" id="img" value="img" />
|
||||||
<input type="button" id="code" value="code" />
|
<input type="button" id="code" value="code" />
|
||||||
<input type="button" id="quote_simple" value="quote (anon)" />
|
<input type="button" id="quote_simple" value="quote (anon)" />
|
||||||
<input type="button" id="quote_member" value="quote (member)" />
|
<input type="button" id="quote_member" value="quote (member)" />
|
||||||
<input type="button" id="spoiler" value="spoiler" />
|
<input type="button" id="spoiler" value="spoiler" />
|
||||||
<input type="button" id="lalign" value="Left" />
|
<input type="button" id="lalign" value="Left" />
|
||||||
<input type="button" id="calign" value="Center" />
|
<input type="button" id="calign" value="Center" />
|
||||||
<input type="button" id="ralign" value="Right" />
|
<input type="button" id="ralign" value="Right" />
|
||||||
<input type="button" id="ulist" value="ul" />
|
<input type="button" id="ulist" value="ul" />
|
||||||
<input type="button" id="olist" value="ol" />
|
<input type="button" id="olist" value="ol" />
|
||||||
<input type="button" id="litem" value="li" />
|
<input type="button" id="litem" value="li" />
|
||||||
<input type="button" id="youtube" value="youtube" />
|
<input type="button" id="youtube" value="youtube" />
|
||||||
</div>
|
</div>
|
||||||
*/}}
|
*/}}
|
||||||
<textarea id="editor" class="w-100 minw-100 mw-100 h5 minh-5" name="body">{{ .PostBody }}</textarea>
|
<textarea id="editor" class="w-100 h5 minh-5" name="body">{{ .PostBody }}</textarea>
|
||||||
|
|
||||||
<div class="flex flex-row-reverse justify-start mt2">
|
<div class="flex flex-row-reverse justify-start mt2">
|
||||||
<input type="submit" class="button ml2" name="submit" value="{{ .SubmitLabel }}" />
|
<input type="submit" class="button ml2" name="submit" value="{{ .SubmitLabel }}" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="post post-preview mv3 mathjax">
|
{{ if .IsEditing }}
|
||||||
|
<span class="editreason">
|
||||||
|
<label for="editreason">Edit reason:</label>
|
||||||
|
<input name="editreason" maxlength="255" type="text" id="editreason" />
|
||||||
|
</span>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{/* TODO: Sticky threads
|
||||||
|
{% if user.is_staff and post and post.depth == 0 %}
|
||||||
|
<div class="checkbox sticky">
|
||||||
|
<input type="checkbox" name="sticky" id="sticky" {% if thread.sticky %}checked{% endif%} />
|
||||||
|
<label for="sticky">Sticky thread</label>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
*/}}
|
||||||
|
|
||||||
|
{{/*
|
||||||
|
|
||||||
|
{% if context_reply_to %}
|
||||||
|
<h4>The post you're replying to:</h4>
|
||||||
|
<div class="recent-posts">
|
||||||
|
{% with post=post_reply_to %}
|
||||||
|
{% include "forum_thread_single_post.html" %}
|
||||||
|
{% endwith %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if context_newer %}
|
||||||
|
<h4>Replies since then:</h4>
|
||||||
|
<div class="recent-posts">
|
||||||
|
{% for post in posts_newer %}
|
||||||
|
{% include "forum_thread_single_post.html" %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if context_older %}
|
||||||
|
<h4>Replies before then:</h4>
|
||||||
|
<div class="recent-posts">
|
||||||
|
{% for post in posts_older %}
|
||||||
|
{% include "forum_thread_single_post.html" %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
*/}}
|
||||||
|
</form>
|
||||||
|
<div class="post post-preview mv3 mathjax flex-fair-ns mv0-ns ml3-ns">
|
||||||
<div id="preview" class="body contents"></div>
|
<div id="preview" class="body contents"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{{ if .IsEditing }}
|
|
||||||
<span class="editreason">
|
|
||||||
<label for="editreason">Edit reason:</label>
|
|
||||||
<input name="editreason" maxlength="255" type="text" id="editreason" />
|
|
||||||
</span>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{/* TODO: Sticky threads
|
|
||||||
{% if user.is_staff and post and post.depth == 0 %}
|
|
||||||
<div class="checkbox sticky">
|
|
||||||
<input type="checkbox" name="sticky" id="sticky" {% if thread.sticky %}checked{% endif%} />
|
|
||||||
<label for="sticky">Sticky thread</label>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
*/}}
|
|
||||||
|
|
||||||
{{/*
|
|
||||||
|
|
||||||
{% if context_reply_to %}
|
|
||||||
<h4>The post you're replying to:</h4>
|
|
||||||
<div class="recent-posts">
|
|
||||||
{% with post=post_reply_to %}
|
|
||||||
{% include "forum_thread_single_post.html" %}
|
|
||||||
{% endwith %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if context_newer %}
|
|
||||||
<h4>Replies since then:</h4>
|
|
||||||
<div class="recent-posts">
|
|
||||||
{% for post in posts_newer %}
|
|
||||||
{% include "forum_thread_single_post.html" %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if context_older %}
|
|
||||||
<h4>Replies before then:</h4>
|
|
||||||
<div class="recent-posts">
|
|
||||||
{% for post in posts_older %}
|
|
||||||
{% include "forum_thread_single_post.html" %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
*/}}
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue