Put the markdown preview on the side

This commit is contained in:
Ben Visness 2021-07-19 20:12:27 -05:00
parent 19297c9231
commit 4ba175c5a5
3 changed files with 110 additions and 78 deletions

View File

@ -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); }

View File

@ -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);
} }

View File

@ -9,11 +9,18 @@
<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">
<form id="form" action="{{ .SubmitUrl }}" method="post" class="flex-fair-ns">
{{ csrftoken .Session }} {{ 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 }}"/>
@ -39,16 +46,12 @@
<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">
<div id="preview" class="body contents"></div>
</div>
{{ if .IsEditing }} {{ if .IsEditing }}
<span class="editreason"> <span class="editreason">
<label for="editreason">Edit reason:</label> <label for="editreason">Edit reason:</label>
@ -95,6 +98,10 @@
{% endif %} {% endif %}
*/}} */}}
</form> </form>
<div class="post post-preview mv3 mathjax flex-fair-ns mv0-ns ml3-ns">
<div id="preview" class="body contents"></div>
</div>
</div>
</div> </div>
<script> <script>