ui wip

src/ttfrog/themes/default/base.html

@@ -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">

src/ttfrog/themes/default/breadcrumbs.html

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

src/ttfrog/themes/default/nav.html

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

src/ttfrog/themes/default/page.html

@@ -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="{{ url_for('static', filename='editor/toastui-editor-all.min.js' ) }}"></script>
-        <script src="/static/site.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 src="{{ url_for('static', filename='viewer/toastui-editor-viewer.min.js' ) }}"></script>
-        <script>
+        <script src="{{ url_for('static', filename='viewer/viewer.js' ) }}"></script>
-            const viewer = new toastui.Editor({
-                viewer: true,
-                el: document.querySelector("#viewer"),
-                usageStatistics: false,
-            });
-            viewer.setMarkdown(document.getElementById("data_form__body").value);
-        </script>
     {% endif %}
 {% endblock %}

src/ttfrog/themes/default/static/editor/editor.css

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

src/ttfrog/themes/default/static/site.css

@@ -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 var(--nav-spacing);
-  	padding: 0 15px;
   	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; 
+	color: var(--nav-hover-color);
-  	border-bottom: 3px solid #444;
 }
 
-.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;
+    height: var(--breadcrumbs-height);
-    line-height: 46px;
     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;
+    background-color: var(--footer-background-color);
-}
-
-.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;
 }
 
 menu {

src/ttfrog/themes/default/static/theme.css

@@ -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;
+    --footer-height: 50px;
-    --main-height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--breadcrumbs-height));
+    --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;
+
+
 }

src/ttfrog/themes/default/static/viewer/viewer.css

@@ -0,0 +1,9 @@
+@import 'toastui-editor-viewer.min.css';
+
+#viewer {
+    display: inline;
+}
+
+.toastui-editor-contents {
+    font-size: var(--default-font-size);
+}

src/ttfrog/themes/default/static/viewer/viewer.js

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

src/ttfrog/web.py

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