web ui checkpoint
This commit is contained in:
evilchili
@@ -13,23 +13,26 @@
|
||||
<input name='title' id="data_form__title" type='text' value="{{ page.title }}">
|
||||
<textarea name="body" id="data_form__body">{{ page.body }}</textarea>
|
||||
</form>
|
||||
<main class='page'>
|
||||
{% block nav %}
|
||||
{% include "nav.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% for message in g.messages %}
|
||||
<div class="alert">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
{% block footer %}
|
||||
{% block nav %}
|
||||
{% include "nav.html" %}
|
||||
{% endblock %}
|
||||
</footer>
|
||||
<div class='table-wrapper'>
|
||||
<main>
|
||||
{% for message in g.messages %}
|
||||
<div class="alert">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
<footer>
|
||||
{% block footer %}
|
||||
fnord
|
||||
{% endblock %}
|
||||
</footer>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
<div class='breadcrumbs'>
|
||||
<div id='breadcrumbs'>
|
||||
<a href="{{ url_for('index') }}">Home</a>{% for (uri, name) in breadcrumbs %}.<a href="{{ uri }}">{{ name }}</a>{% endfor %}
|
||||
<div id='actions'>
|
||||
<a id='action__edit' data-state='view'>edit</a>
|
||||
<a id='action__save' style='display: none;'>save</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,14 +5,9 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<form id="editor_form">
|
||||
|
||||
<h1><input name='title' type='text' value="{{ page.title }}"></h1>
|
||||
{% include "breadcrumbs.html" %}
|
||||
|
||||
<div id='page_body'></div>
|
||||
|
||||
</form>
|
||||
{% include "breadcrumbs.html" %}
|
||||
<div id='viewer'></div>
|
||||
<div id='editor'></div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -20,15 +15,46 @@
|
||||
{% block scripts %}
|
||||
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
|
||||
<script>
|
||||
const viewerEl = document.querySelector("#viewer");
|
||||
const editorEl = document.querySelector("#editor");;
|
||||
|
||||
const initialValue = (
|
||||
"# " + document.getElementById("data_form__title").value +
|
||||
"\n" +
|
||||
document.getElementById("data_form__body").value
|
||||
);
|
||||
|
||||
const editor = new toastui.Editor({
|
||||
el: document.querySelector('#page_body'),
|
||||
el: editorEl,
|
||||
initialEditType: 'wysiwyg',
|
||||
initialValue: document.getElementById("data_form__body").value,
|
||||
initialValue: initialValue,
|
||||
minHeight: '500px',
|
||||
previewStyle: 'tab',
|
||||
usageStatistics: false
|
||||
});
|
||||
editor.getMarkdown();
|
||||
console.log(editor);
|
||||
|
||||
const edit_btn = document.querySelector("#action__edit");
|
||||
const save_btn = document.querySelector("#action__save");
|
||||
|
||||
toggleEditor = function() {
|
||||
if (edit_btn.dataset.state == 'view') {
|
||||
edit_btn.dataset.state = 'edit';
|
||||
edit_btn.innerText = "discard draft";
|
||||
viewerEl.style['display'] = "none";
|
||||
editorEl.style['display'] = "inline";
|
||||
save_btn.style['display'] = 'inline-block';
|
||||
} else {
|
||||
edit_btn.dataset.state = 'view';
|
||||
edit_btn.innerText = "edit";
|
||||
editorEl.style['display'] = "none";
|
||||
viewerEl.style['display'] = "inline";
|
||||
save_btn.style['display'] = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
edit_btn.addEventListener('click', toggleEditor)
|
||||
viewerEl.innerHTML = editor.getHTML();
|
||||
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,22 +1,105 @@
|
||||
@import "theme.css";
|
||||
|
||||
html {
|
||||
height:100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin: 0px;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: var(--default-font-family);
|
||||
font-size: var(--default-font-size);
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
box-sizing: border-box;
|
||||
overflow-wrap: break-word;
|
||||
overflow-y: scroll;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
body {
|
||||
display: block;
|
||||
margin: 0px 20px;
|
||||
font-family: sans-serif;
|
||||
width: calc(100%; - 20px);
|
||||
height: 100%;
|
||||
h1, .toastui-editor-contents h1 {
|
||||
font-size: var(--h1-size) !important;
|
||||
font-weight: var(--header-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
text-decoration: inherit !important;
|
||||
font-variant: inherit !important;
|
||||
border: none !important;
|
||||
margin: initial !important;
|
||||
line-height: initial !important;
|
||||
padding: initial !important;
|
||||
}
|
||||
|
||||
|
||||
h2, .toastui-editor-contents h2 {
|
||||
font-size: var(--h2-size) !important;
|
||||
font-weight: var(--header2-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
text-decoration: inherit !important;
|
||||
font-variant: inherit !important;
|
||||
border: none !important;
|
||||
margin: initial !important;
|
||||
line-height: initial !important;
|
||||
padding: initial !important;
|
||||
}
|
||||
|
||||
|
||||
h3, .toastui-editor-contents h3 {
|
||||
font-size: var(--h3-size) !important;
|
||||
font-weight: var(--header3-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
text-decoration: inherit !important;
|
||||
font-variant: inherit !important;
|
||||
border: none !important;
|
||||
margin: initial !important;
|
||||
line-height: initial !important;
|
||||
padding: initial !important;
|
||||
}
|
||||
|
||||
|
||||
h4, .toastui-editor-contents h4 {
|
||||
font-size: var(--h4-size) !important;
|
||||
font-weight: var(--header4-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
text-decoration: inherit !important;
|
||||
font-variant: inherit !important;
|
||||
border: none !important;
|
||||
margin: initial !important;
|
||||
line-height: initial !important;
|
||||
padding: initial !important;
|
||||
}
|
||||
|
||||
|
||||
h5, .toastui-editor-contents h5 {
|
||||
font-size: var(--h5-size) !important;
|
||||
font-weight: var(--header5-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
text-decoration: inherit !important;
|
||||
font-variant: inherit !important;
|
||||
border: none !important;
|
||||
margin: initial !important;
|
||||
line-height: initial !important;
|
||||
padding: initial !important;
|
||||
}
|
||||
|
||||
|
||||
h6, .toastui-editor-contents h6 {
|
||||
font-size: var(--h6-size) !important;
|
||||
font-weight: var(--header6-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
text-decoration: inherit !important;
|
||||
font-variant: inherit !important;
|
||||
border: none !important;
|
||||
margin: initial !important;
|
||||
line-height: initial !important;
|
||||
padding: initial !important;
|
||||
}
|
||||
|
||||
|
||||
a {text-decoration: none;}
|
||||
|
||||
.container {
|
||||
nav ul.container {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -27,10 +110,11 @@ ul {
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: var(--nav-height);
|
||||
background: #0ca0d6;
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
@@ -91,52 +175,87 @@ nav > ul > li:hover > a {
|
||||
}
|
||||
|
||||
|
||||
.breadcrumbs {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
#breadcrumbs {
|
||||
height: var(--breadcrumbs-height);
|
||||
border-bottom: 1px dotted #DEDEDE;
|
||||
}
|
||||
|
||||
#data_form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main h1 {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
main h1 > input {
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
width: 100%;
|
||||
border-bottom: 1px dotted #000;
|
||||
margin-bottom: 0px;
|
||||
#editor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#editor_form {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#page_body {
|
||||
#viewer {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#actions {
|
||||
display: flex;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#actions > a {
|
||||
display: flex;
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
background: #FFF;
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
|
||||
}
|
||||
#actions a:hover {
|
||||
color: white;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
|
||||
.table-wrapper {
|
||||
padding: 0px;
|
||||
padding-top: var(--wrapper-padding);
|
||||
display: table;
|
||||
margin: auto;
|
||||
width: var(--max-width);
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: table-row;
|
||||
height: var(--main-height);
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
position: relative;
|
||||
bottom: 100vh - var(--footer-height);
|
||||
height: var(--footer-height);
|
||||
background-color: #DEDEDE;
|
||||
}
|
||||
|
||||
.toastui-editor-main-container {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.toastui-editor,
|
||||
.toastui-editor-main,
|
||||
.toastui-editor-md-container,
|
||||
.toastui-editor-defaultUI,
|
||||
.toastui-editor-contents {
|
||||
.toastui-editor-contents,
|
||||
.toastui-editor-ww-mode,
|
||||
.toastui-editor-md-preview,
|
||||
.toastui-editor-md,
|
||||
.ProseMirror {
|
||||
border: 0px !important;
|
||||
padding: 0px !important;
|
||||
margin: 0px !important;
|
||||
font-size: var(--default-font-size) !important;
|
||||
font-family: var(--default-font-family) !important;
|
||||
}
|
||||
|
||||
menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
:root {
|
||||
/* Typography */
|
||||
--default-font-family: sans-serif;
|
||||
--default-font-size: 16px;
|
||||
--header-font: sans-serif;
|
||||
--header-weight: 700;
|
||||
--h1-size: 32px;
|
||||
--h2-size: 24px;
|
||||
--h3-size: 18.72px;
|
||||
--h4-size: 16px;
|
||||
--h5-size: 13.28px;
|
||||
--h6-size: 10.72px;
|
||||
|
||||
/* Layout */
|
||||
--nav-height: 50px;
|
||||
--footer-height: 150px;
|
||||
--breadcrumbs-height: 50px;
|
||||
--wrapper-padding: 20px;
|
||||
--main-height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--breadcrumbs-height) + var(--wrapper-padding));
|
||||
--max-width: calc(100vw - 20px);
|
||||
}
|
||||
Reference in New Issue
Block a user