ui wip
This commit is contained in:
evilchili
parent
fb391f9f4a
commit
51795c8f7c
|
|
@ -19,7 +19,7 @@
|
|||
{% include "breadcrumbs.html" %}
|
||||
{% endblock %}
|
||||
<div class='main-aligned'>
|
||||
<div class='table-wrapper'>
|
||||
<div class='content'>
|
||||
<main>
|
||||
{% for message in g.messages %}
|
||||
<div class="alert">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div id='breadcrumbs' class='main-aligned'>
|
||||
<div id='breadcrumbs' class='content-aligned'>
|
||||
<a href="{{ url_for('index') }}">Home</a>{% for (uri, name) in breadcrumbs %}.<a href="{{ uri }}">{{ name }}</a>{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<nav>
|
||||
<ul class="container main-aligned">
|
||||
<ul class="container content-aligned">
|
||||
<li><a href='{{ root.uri }}'>Home</a></li>
|
||||
{% for subpage in root.members %}
|
||||
{% if user.can_read(subpage) %}
|
||||
|
|
@ -14,24 +14,6 @@
|
|||
[<a href="{{ url_for('logout') }}">Logout</a>]
|
||||
{% endif %}
|
||||
</li>
|
||||
<!--
|
||||
<li class='dropdown'>
|
||||
<a href='#'>Pages <i class="fa fa-angle-down"></i></a>
|
||||
<div class='mega-menu'>
|
||||
<div class="container">
|
||||
<div class="item">
|
||||
<h3>Home Page</h3>
|
||||
<ul>
|
||||
<li><a href='#'>Home Page No #1</a></li>
|
||||
<li><a href='#'>Home Page No #2</a></li>
|
||||
<li><a href='#'>Home Page No #3</a></li>
|
||||
<li><a href='#'>Home Page No #4</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<</div>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</nav>
|
||||
<menu>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
|
||||
{% block styles %}
|
||||
{% if user.can_write(page) %}
|
||||
<link rel="stylesheet" href="/static/toastui-editor.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='editor/editor.css' ) }}">
|
||||
{% else %}
|
||||
<link rel="stylesheet" href="/static/toastui-editor-viewer.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='viewer/viewer.css' ) }}">
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -16,18 +16,11 @@
|
|||
|
||||
{% block scripts %}
|
||||
{% if user.can_write(page) %}
|
||||
<script src="/static/toastui-editor-all.min.js"></script>
|
||||
<script src="/static/site.js"></script>
|
||||
<script src="{{ url_for('static', filename='editor/toastui-editor-all.min.js' ) }}"></script>
|
||||
<script src="{{ url_for('static', filename='editor/editor.js' ) }}"></script>
|
||||
<script>initialize();</script>
|
||||
{% else %}
|
||||
<script src="/static/toastui-editor-viewer.min.js"></script>
|
||||
<script>
|
||||
const viewer = new toastui.Editor({
|
||||
viewer: true,
|
||||
el: document.querySelector("#viewer"),
|
||||
usageStatistics: false,
|
||||
});
|
||||
viewer.setMarkdown(document.getElementById("data_form__body").value);
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='viewer/toastui-editor-viewer.min.js' ) }}"></script>
|
||||
<script src="{{ url_for('static', filename='viewer/viewer.js' ) }}"></script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
106
src/ttfrog/themes/default/static/editor/editor.css
Normal file
106
src/ttfrog/themes/default/static/editor/editor.css
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
@import 'toastui-editor.min.css';
|
||||
|
||||
#editor {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.toastui-editor-defaultUI-toolbar {
|
||||
padding: 0px !important;
|
||||
margin: 0px !important;
|
||||
border: 0px !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.toastui-editor-toolbar {
|
||||
box-shadow: 0px 3px 5px #CCC;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.toastui-editor-main-container {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.toastui-editor,
|
||||
.toastui-editor-main,
|
||||
.toastui-editor-md-container,
|
||||
.toastui-editor-defaultUI,
|
||||
.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;
|
||||
}
|
||||
|
||||
#editor .toastui-editor-md-container > div > div,
|
||||
#editor .toastui-editor-ww-container > div > div {
|
||||
border: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
#editor .toastui-editor-defaultUI-toolbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#editor .toastui-editor-toolbar {
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
z-index: 99 !important;
|
||||
width: 100% !important;
|
||||
background: #FFF !important;
|
||||
}
|
||||
|
||||
/* applied to #editor */
|
||||
.read-only {
|
||||
}
|
||||
|
||||
#editor.read-only .toastui-editor-toolbar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#editor.read-only .toastui-editor-ww-container > div > div {
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
div.toastui-editor-md-splitter,
|
||||
div.toastui-editor-md-preview {
|
||||
display: none !Important;
|
||||
}
|
||||
|
||||
div.toastui-editor.md-mode {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#editor button.toastui-editor-toolbar-icons {
|
||||
filter:unset;
|
||||
pointer-events: all;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
#editor.read-only button.toastui-editor-toolbar-icons {
|
||||
filter:saturate(0) !Important;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#editor button.actions {
|
||||
background-image: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#editor.read-only button.actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#editor.read-only #toggleButton {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
.toastui-editor-defaultUI-toolbar > div:nth-child(5) {
|
||||
flex: auto;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
6
src/ttfrog/themes/default/static/editor/toastui-editor.min.css
vendored
Normal file
6
src/ttfrog/themes/default/static/editor/toastui-editor.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -9,6 +9,7 @@ html {
|
|||
body {
|
||||
font-family: var(--default-font-family);
|
||||
font-size: var(--default-font-size);
|
||||
background: var(--body-background);
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
|
|
@ -18,7 +19,7 @@ body {
|
|||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
h1, .toastui-editor-contents h1 {
|
||||
h1 {
|
||||
font-size: var(--h1-size) !important;
|
||||
font-weight: var(--header-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
|
|
@ -31,7 +32,7 @@ h1, .toastui-editor-contents h1 {
|
|||
}
|
||||
|
||||
|
||||
h2, .toastui-editor-contents h2 {
|
||||
h2 {
|
||||
font-size: var(--h2-size) !important;
|
||||
font-weight: var(--header2-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
|
|
@ -44,7 +45,7 @@ h2, .toastui-editor-contents h2 {
|
|||
}
|
||||
|
||||
|
||||
h3, .toastui-editor-contents h3 {
|
||||
h3 {
|
||||
font-size: var(--h3-size) !important;
|
||||
font-weight: var(--header3-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
|
|
@ -57,7 +58,7 @@ h3, .toastui-editor-contents h3 {
|
|||
}
|
||||
|
||||
|
||||
h4, .toastui-editor-contents h4 {
|
||||
h4 {
|
||||
font-size: var(--h4-size) !important;
|
||||
font-weight: var(--header4-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
|
|
@ -70,7 +71,7 @@ h4, .toastui-editor-contents h4 {
|
|||
}
|
||||
|
||||
|
||||
h5, .toastui-editor-contents h5 {
|
||||
h5 {
|
||||
font-size: var(--h5-size) !important;
|
||||
font-weight: var(--header5-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
|
|
@ -83,7 +84,7 @@ h5, .toastui-editor-contents h5 {
|
|||
}
|
||||
|
||||
|
||||
h6, .toastui-editor-contents h6 {
|
||||
h6 {
|
||||
font-size: var(--h6-size) !important;
|
||||
font-weight: var(--header6-weight) !important;
|
||||
font-family: var(--header-font) !important;
|
||||
|
|
@ -99,14 +100,15 @@ h6, .toastui-editor-contents h6 {
|
|||
a {text-decoration: none;}
|
||||
|
||||
nav ul.container {
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
@ -114,13 +116,12 @@ nav {
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: var(--nav-height);
|
||||
background: #0ca0d6;
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
padding: 0 15px;
|
||||
padding: 0 var(--nav-spacing);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -129,60 +130,19 @@ nav > ul > li:first-child {
|
|||
}
|
||||
|
||||
nav > ul > li > a {
|
||||
color: #fff;
|
||||
color: var(--nav-color);
|
||||
display: inline-block;
|
||||
padding: 20px 0;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
nav > ul > li:hover > a {
|
||||
color: #444;
|
||||
border-bottom: 3px solid #444;
|
||||
color: var(--nav-hover-color);
|
||||
}
|
||||
|
||||
.mega-menu {
|
||||
background: #eee;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0s, opacity 0.5s linear;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.mega-menu h3 {color: #444;}
|
||||
|
||||
.mega-menu .container {
|
||||
display: flex;
|
||||
}
|
||||
.mega-menu .item {
|
||||
flex-grow: 1;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.mega-menu .item img {
|
||||
width: 100%;
|
||||
}
|
||||
.mega-menu a {
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #4ea3d8;
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.mega-menu a:hover {color: #2d6a91;}
|
||||
|
||||
|
||||
.dropdown {position: static;}
|
||||
|
||||
.dropdown:hover .mega-menu {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#breadcrumbs {
|
||||
display: block;
|
||||
align-content: center;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
height: var(--breadcrumbs-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -190,46 +150,6 @@ nav > ul > li:hover > a {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#editor {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.toastui-editor-defaultUI-toolbar {
|
||||
padding: 0px !important;
|
||||
margin: 0px !important;
|
||||
border: 0px !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.toastui-editor-toolbar {
|
||||
box-shadow: 0px 3px 5px #CCC;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
/*
|
||||
#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;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
.main-aligned {
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
|
@ -237,10 +157,23 @@ nav > ul > li:hover > a {
|
|||
min-width: var(--min-width);
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
.content-aligned {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: calc(var(--max-width) - (2 * var(--content-padding)));
|
||||
min-width: var(--min-width);
|
||||
padding-left: var(--content-padding);
|
||||
padding-right: var(--content-padding);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
width: calc(100% - (2 * var(--content-padding)));
|
||||
padding: var(--content-padding);
|
||||
background: var(--content-background);
|
||||
border: var(--content-border);
|
||||
border-radius: var(--content-border-radius);
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -251,98 +184,10 @@ main {
|
|||
footer {
|
||||
display: block;
|
||||
position: relative;
|
||||
bottom: 100vh - var(--footer-height);
|
||||
bottom: 0;
|
||||
margin-top: var(--footer-spacing);
|
||||
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-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;
|
||||
}
|
||||
|
||||
#editor .toastui-editor-md-container > div > div,
|
||||
#editor .toastui-editor-ww-container > div > div {
|
||||
border: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
#editor .toastui-editor-defaultUI-toolbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#editor .toastui-editor-toolbar {
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
z-index: 99 !important;
|
||||
width: 100% !important;
|
||||
background: #FFF !important;
|
||||
}
|
||||
|
||||
/* applied to #editor */
|
||||
.read-only {
|
||||
}
|
||||
|
||||
#editor.read-only .toastui-editor-toolbar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#editor.read-only .toastui-editor-ww-container > div > div {
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
div.toastui-editor-md-splitter,
|
||||
div.toastui-editor-md-preview {
|
||||
display: none !Important;
|
||||
}
|
||||
|
||||
div.toastui-editor.md-mode {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#editor button.toastui-editor-toolbar-icons {
|
||||
filter:unset;
|
||||
pointer-events: all;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
#editor.read-only button.toastui-editor-toolbar-icons {
|
||||
filter:saturate(0) !Important;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#editor button.actions {
|
||||
background-image: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#editor.read-only button.actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#editor.read-only #toggleButton {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
.toastui-editor-defaultUI-toolbar > div:nth-child(5) {
|
||||
flex: auto;
|
||||
justify-content: flex-end;
|
||||
background-color: var(--footer-background-color);
|
||||
}
|
||||
|
||||
menu {
|
||||
|
|
|
|||
|
|
@ -12,11 +12,29 @@
|
|||
--h6-size: 10.72px;
|
||||
|
||||
/* Layout */
|
||||
--content-padding: 20px;
|
||||
--nav-height: 50px;
|
||||
--footer-height: 150px;
|
||||
--nav-spacing: 15px;
|
||||
--breadcrumbs-height: 50px;
|
||||
--wrapper-padding: 20px;
|
||||
--main-height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--breadcrumbs-height));
|
||||
--footer-height: 50px;
|
||||
--footer-spacing: var(--breadcrumbs-height);
|
||||
|
||||
--max-width: 1024px;
|
||||
--min-width: 710px;
|
||||
--min-width: calc(710px + (2 * var(--content-padding)));
|
||||
|
||||
--main-height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--breadcrumbs-height) - calc(2 * var(--content-padding)) - var(--footer-spacing));
|
||||
|
||||
--content-border-radius: calc(0.5 * var(--content-padding));
|
||||
|
||||
/* colors */
|
||||
--blue: #0ca0d6;
|
||||
--white: #FFF;
|
||||
|
||||
--body-background: #EEE;
|
||||
--nav-color: #000055;
|
||||
--nav-hover-color: #FFF;
|
||||
--content-background: #FFF;
|
||||
--footer-background-color: #DDD;
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
6
src/ttfrog/themes/default/static/viewer/toastui-editor-viewer.min.css
vendored
Normal file
6
src/ttfrog/themes/default/static/viewer/toastui-editor-viewer.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
24
src/ttfrog/themes/default/static/viewer/toastui-editor-viewer.min.js
vendored
Normal file
24
src/ttfrog/themes/default/static/viewer/toastui-editor-viewer.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
9
src/ttfrog/themes/default/static/viewer/viewer.css
Normal file
9
src/ttfrog/themes/default/static/viewer/viewer.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@import 'toastui-editor-viewer.min.css';
|
||||
|
||||
#viewer {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.toastui-editor-contents {
|
||||
font-size: var(--default-font-size);
|
||||
}
|
||||
6
src/ttfrog/themes/default/static/viewer/viewer.js
Normal file
6
src/ttfrog/themes/default/static/viewer/viewer.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
var viewer = new toastui.Editor({
|
||||
viewer: true,
|
||||
el: document.querySelector("#viewer"),
|
||||
usageStatistics: false,
|
||||
});
|
||||
viewer.setMarkdown(document.getElementById("data_form__body").value);
|
||||
|
|
@ -28,15 +28,19 @@ def get_page(path: str, table: str = "Page", create_okay: bool = False):
|
|||
uri = relative_uri(path)
|
||||
|
||||
if table not in app.db.tables():
|
||||
app.web.logger.debug(f"Table {table} does not exist in {app.db.tables()}.")
|
||||
return None
|
||||
|
||||
page = app.db.table(table).get(where("uri") == uri, recurse=False)
|
||||
|
||||
if not page:
|
||||
app.web.logger.debug("Page does not exist.")
|
||||
if not create_okay:
|
||||
app.web.logger.debug("Page does not exist and creating is not okay.")
|
||||
return None
|
||||
parent = get_parent(table, uri)
|
||||
if not app.authorize(g.user, parent, schema.Permissions.READ):
|
||||
if not app.authorize(g.user, parent, schema.Permissions.WRITE):
|
||||
app.web.logger.debug(f"User {g.user} is not authorized to write {parent}")
|
||||
return None
|
||||
return getattr(schema, table)(name=uri.split("/")[-1], body="This page does not exist", parent=parent)
|
||||
|
||||
|
|
@ -111,6 +115,8 @@ def logout():
|
|||
@app.web.route(f"{app.config.VIEW_URI}/<path:path>", methods=["GET"], defaults={"table": "Page"})
|
||||
def view(table, path):
|
||||
parent = get_parent(table, relative_uri())
|
||||
if table not in app.db.tables():
|
||||
table = parent.__class__.__name__ if parent else "Page"
|
||||
page = get_page(request.path, table=table, create_okay=(parent and parent.doc_id is not None))
|
||||
return rendered(page)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user