reorganize askama templates
This commit is contained in:
Brent Schroeter
parent
9bee5fdaef
commit
341e02a41b
22 changed files with 412 additions and 397 deletions
|
|
@ -46,7 +46,7 @@ pub enum RelPermissionKind {
|
|||
}
|
||||
|
||||
#[derive(Clone, Debug, Eq, Hash, PartialEq, Template)]
|
||||
#[template(path = "rel_permission.html")]
|
||||
#[template(path = "includes/rel_permission.html")]
|
||||
pub(crate) struct RelPermission {
|
||||
pub(crate) kind: RelPermissionKind,
|
||||
pub(crate) rel_oid: Oid,
|
||||
|
|
@ -150,7 +150,7 @@ impl TryFrom<Grantee> for User {
|
|||
/// an "Edit" button which opens a dialog with a form allowing permissions to be
|
||||
/// assigned across multiple tables within a workspace.
|
||||
#[derive(Clone, Debug, Template)]
|
||||
#[template(path = "workspaces_single/permissions_editor.html")]
|
||||
#[template(path = "includes/permissions_editor.html")]
|
||||
pub(crate) struct PermissionsEditor {
|
||||
/// User, invite, or service credential being granted permissions.
|
||||
pub(crate) target: Grantee,
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ pub(super) async fn get(
|
|||
.await?;
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "portal_table.html")]
|
||||
#[template(path = "relations_single/portal_table.html")]
|
||||
struct ResponseTemplate {
|
||||
columns: Vec<ColumnInfo>,
|
||||
attr_names: Vec<String>,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ use crate::{
|
|||
};
|
||||
|
||||
#[derive(Builder, Clone, Debug, Template)]
|
||||
#[template(path = "workspace_nav.html")]
|
||||
#[template(path = "includes/workspace_nav.html")]
|
||||
pub(crate) struct WorkspaceNav {
|
||||
workspace: Workspace,
|
||||
relations: Vec<RelationItem>,
|
||||
|
|
|
|||
12
phono-server/templates/includes/toolbar_user.html
Normal file
12
phono-server/templates/includes/toolbar_user.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<basic-dropdown alignment="right">
|
||||
<span slot="button-contents" aria-label="Account menu" title="Account menu">
|
||||
<i aria-hidden="true" class="ti ti-user"></i>
|
||||
</span>
|
||||
<menu class="basic-dropdown__menu" slot="popover">
|
||||
<li>
|
||||
<a href="{{ settings.root_path }}/auth/logout" role="button">
|
||||
Log out
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
</basic-dropdown>
|
||||
|
|
@ -1,15 +1,19 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg" href="{{ settings.root_path }}/phono.svg">
|
||||
<title>{% block title %}Phonograph{% endblock %}</title>
|
||||
{% include "meta_tags.html" %}
|
||||
<link rel="stylesheet" href="{{ settings.root_path }}/modern-normalize.min.css">
|
||||
<link rel="stylesheet" href="{{ settings.root_path }}/main.css">
|
||||
<link rel="stylesheet" href="{{ settings.root_path }}/tabler-icons/webfont/tabler-icons.min.css">
|
||||
<script type="module" src="{{ settings.root_path }}/js_dist/basic-dropdown.webc.mjs"></script>
|
||||
{%- block head_extras %}{% endblock -%}
|
||||
{%- block head %}{% endblock -%}
|
||||
</head>
|
||||
<body>
|
||||
{% block main %}{% endblock %}
|
||||
{%- block body %}{% endblock -%}
|
||||
<script type="module" src="{{ settings.root_path }}/js_dist/basic-dropdown.webc.mjs"></script>
|
||||
{%- block scripts %}{% endblock -%}
|
||||
</body>
|
||||
</html>
|
||||
29
phono-server/templates/layouts/with_sidebar.html
Normal file
29
phono-server/templates/layouts/with_sidebar.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block body %}
|
||||
<div class="layout-with-sidebar">
|
||||
<header class="banner" role="note">
|
||||
{%- block banner %}
|
||||
<i class="ti ti-info-square-rounded"></i>
|
||||
This is a technical demo.
|
||||
<a href="https://www.phono.dev/about#demo">
|
||||
Learn more <i class="ti ti-chevron-right"></i>
|
||||
</a>
|
||||
{% endblock -%}
|
||||
</header>
|
||||
<header class="toolbar" role="banner">
|
||||
<div class="toolbar__page-actions">
|
||||
{% block toolbar_page_actions %}{% endblock %}
|
||||
</div>
|
||||
<div class="toolbar__user">
|
||||
{% include "includes/toolbar_user.html" %}
|
||||
</div>
|
||||
</header>
|
||||
<div class="sidebar">
|
||||
{%- block sidebar %}{% endblock -%}
|
||||
</div>
|
||||
<main>
|
||||
{%- block main %}{% endblock -%}
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
26
phono-server/templates/layouts/with_toolbar.html
Normal file
26
phono-server/templates/layouts/with_toolbar.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block body %}
|
||||
<div class="layout-with-toolbar">
|
||||
<header class="banner" role="note">
|
||||
{%- block banner %}
|
||||
<i class="ti ti-info-square-rounded"></i>
|
||||
This is a technical demo.
|
||||
<a href="https://www.phono.dev/about#demo">
|
||||
Learn more <i class="ti ti-chevron-right"></i>
|
||||
</a>
|
||||
{% endblock -%}
|
||||
</header>
|
||||
<header class="toolbar" role="banner">
|
||||
<div class="toolbar__page-actions">
|
||||
{% block toolbar_page_actions %}{% endblock %}
|
||||
</div>
|
||||
<div class="toolbar__user">
|
||||
{% include "includes/toolbar_user.html" %}
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{%- block main %}{% endblock -%}
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg" href="{{ settings.root_path }}/phono.svg">
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block head_extras %}
|
||||
<link rel="stylesheet" href="{{ settings.root_path }}/portal-table.css">
|
||||
<script type="module" src="{{ settings.root_path }}/js_dist/table-viewer.webc.mjs"></script>
|
||||
<script type="module" src="{{ settings.root_path }}/js_dist/filter-menu.webc.mjs"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="page-grid">
|
||||
<div class="page-grid__toolbar">
|
||||
<div class="page-grid__toolbar-utilities">
|
||||
<a class="button button--secondary" href="settings" role="button">
|
||||
Portal Settings
|
||||
</a>
|
||||
<filter-menu
|
||||
identifier-hints="{{ attr_names | json }}"
|
||||
initial-value="{{ filter | json }}"
|
||||
></filter-menu>
|
||||
</div>
|
||||
{% include "toolbar_user.html" %}
|
||||
</div>
|
||||
<div class="page-grid__sidebar">
|
||||
<div style="padding: 1rem;">
|
||||
{{ navbar | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<main class="page-grid__main">
|
||||
<table-viewer
|
||||
columns="{{ columns | json }}"
|
||||
{%- if subfilter_str != "" %}
|
||||
subfilter="{{ subfilter_str }}"
|
||||
{% endif -%}
|
||||
></table-viewer>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
{% extends "base.html" %}
|
||||
{% extends "layouts/with_sidebar.html" %}
|
||||
|
||||
{% block main %}
|
||||
<div class="page-grid">
|
||||
<div class="page-grid__toolbar">
|
||||
<div class="page-grid__toolbar-utilities">
|
||||
{% block toolbar_page_actions %}
|
||||
<a
|
||||
class="button button--secondary"
|
||||
href="{{ navigator.portal_page()
|
||||
|
|
@ -16,15 +13,14 @@
|
|||
>
|
||||
Back
|
||||
</a>
|
||||
</div>
|
||||
{% include "toolbar_user.html" %}
|
||||
</div>
|
||||
<div class="page-grid__sidebar">
|
||||
<div style="padding: 1rem;">
|
||||
{% endblock %}
|
||||
|
||||
{% block sidebar %}
|
||||
{{ workspace_nav | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<main class="page-grid__main padded padded--lg">
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="padded padded--lg">
|
||||
<form method="post" action="update-name">
|
||||
<section>
|
||||
<h1>Portal Name</h1>
|
||||
|
|
@ -44,6 +40,5 @@
|
|||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
33
phono-server/templates/relations_single/portal_table.html
Normal file
33
phono-server/templates/relations_single/portal_table.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{% extends "layouts/with_sidebar.html" %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ settings.root_path }}/portal-table.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block toolbar_page_actions %}
|
||||
<a class="button button--secondary" href="settings" role="button">
|
||||
Portal Settings
|
||||
</a>
|
||||
<filter-menu
|
||||
identifier-hints="{{ attr_names | json }}"
|
||||
initial-value="{{ filter | json }}"
|
||||
></filter-menu>
|
||||
{% endblock %}
|
||||
|
||||
{% block sidebar %}
|
||||
{{ navbar | safe }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<table-viewer
|
||||
columns="{{ columns | json }}"
|
||||
{%- if subfilter_str != "" %}
|
||||
subfilter="{{ subfilter_str }}"
|
||||
{% endif -%}
|
||||
></table-viewer>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script type="module" src="{{ settings.root_path }}/js_dist/table-viewer.webc.mjs"></script>
|
||||
<script type="module" src="{{ settings.root_path }}/js_dist/filter-menu.webc.mjs"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -1,16 +1,11 @@
|
|||
{% extends "base.html" %}
|
||||
{% extends "layouts/with_sidebar.html" %}
|
||||
|
||||
{% block sidebar %}
|
||||
{{ workspace_nav | safe }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="page-grid">
|
||||
<div class="page-grid__toolbar">
|
||||
{% include "toolbar_user.html" %}
|
||||
</div>
|
||||
<div class="page-grid__sidebar">
|
||||
<div style="padding: 1rem;">
|
||||
{{ workspace_nav | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<main class="page-grid__main padded padded--lg">
|
||||
<div class="padded padded--lg">
|
||||
<form method="post" action="update-name">
|
||||
<section>
|
||||
<h1>Table Name</h1>
|
||||
|
|
@ -30,6 +25,5 @@
|
|||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
<div class="page-grid__toolbar-user">
|
||||
<basic-dropdown alignment="right">
|
||||
<span slot="button-contents" aria-label="Account menu" title="Account menu">
|
||||
<i aria-hidden="true" class="ti ti-user"></i>
|
||||
</span>
|
||||
<menu class="basic-dropdown__menu" slot="popover">
|
||||
<li>
|
||||
<a href="{{ settings.root_path }}/auth/logout" role="button">
|
||||
Log out
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
</basic-dropdown>
|
||||
</div>
|
||||
|
|
@ -1,14 +1,6 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block head_extras %}
|
||||
{% endblock %}
|
||||
{% extends "layouts/with_toolbar.html" %}
|
||||
|
||||
{% block main %}
|
||||
<div class="page-grid">
|
||||
<div class="page-grid__toolbar">
|
||||
{% include "toolbar_user.html" %}
|
||||
</div>
|
||||
<main class="page-grid__main">
|
||||
<nav class="workspace-nav" style="position: relative; margin: 0 auto; max-width: 540px;">
|
||||
<section class="workspace-nav__section">
|
||||
<div class="workspace-nav__heading">
|
||||
|
|
@ -47,6 +39,4 @@
|
|||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,5 @@
|
|||
{% extends "base.html" %}
|
||||
{% extends "layouts/with_sidebar.html" %}
|
||||
|
||||
{% block main %}
|
||||
<div class="page-grid">
|
||||
<div class="page-grid__toolbar">
|
||||
{% include "toolbar_user.html" %}
|
||||
</div>
|
||||
<div class="page-grid__sidebar">
|
||||
<div style="padding: 1rem;">
|
||||
{% block sidebar %}
|
||||
{{ workspace_nav | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<main class="page-grid__main">
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
{% extends "base.html" %}
|
||||
{% extends "layouts/with_sidebar.html" %}
|
||||
|
||||
{% block head_extras %}
|
||||
<script type="module" src="{{ settings.root_path }}/js_dist/copy-source.webc.mjs"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="page-grid">
|
||||
<div class="page-grid__toolbar">
|
||||
<div class="page-grid__toolbar-utilities">
|
||||
{% block toolbar_page_actions %}
|
||||
<basic-dropdown button-class="button--secondary" button-label="New Credential">
|
||||
<span slot="button-contents">New Credential</span>
|
||||
<div class="padded" slot="popover">
|
||||
|
|
@ -16,15 +9,14 @@
|
|||
</form>
|
||||
</div>
|
||||
</basic-dropdown>
|
||||
</div>
|
||||
{% include "toolbar_user.html" %}
|
||||
</div>
|
||||
<div class="page-grid__sidebar">
|
||||
<div style="padding: 1rem;">
|
||||
{% endblock %}
|
||||
|
||||
{% block sidebar %}
|
||||
{{ workspace_nav | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<main class="page-grid__main padded padded--lg">
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="page-grid__main padded padded--lg">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -58,6 +50,9 @@
|
|||
{% endfor %}
|
||||
</tbody>
|
||||
<table>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script type="module" src="{{ settings.root_path }}/js_dist/copy-source.webc.mjs"></script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,7 @@
|
|||
{% extends "base.html" %}
|
||||
{% extends "layouts/with_sidebar.html" %}
|
||||
|
||||
{% block main %}
|
||||
<div class="page-grid">
|
||||
<div class="page-grid__toolbar">
|
||||
{% include "toolbar_user.html" %}
|
||||
</div>
|
||||
<div class="page-grid__sidebar">
|
||||
<div style="padding: 1rem;">
|
||||
{{ workspace_nav | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<main class="page-grid__main padded padded--lg">
|
||||
<div class="padded padded--lg">
|
||||
<form method="post" action="update-name">
|
||||
<section>
|
||||
<h1>Workspace Name</h1>
|
||||
|
|
@ -98,6 +89,5 @@
|
|||
<button class="button button--primary" type="submit">Save</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
--default-padding--sm: 8px;
|
||||
--default-padding--lg: 32px;
|
||||
|
||||
--a-color: #069;
|
||||
--a-color: oklch(from var(--accent-color) 0.5 0.15 calc(h + 135));
|
||||
|
||||
--button-background--primary: var(--accent-color);
|
||||
--button-background--secondary: #fff;
|
||||
|
|
@ -51,8 +51,6 @@
|
|||
--button-padding: var(--button-padding--default);
|
||||
--button-shadow: 0 2px 2px #3331;
|
||||
|
||||
--notice-color--info: #39d;
|
||||
|
||||
--popover-border-color: var(--default-border-color);
|
||||
--popover-shadow: 0 8px 8px #3333;
|
||||
}
|
||||
|
|
@ -251,19 +249,6 @@ a {
|
|||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.notice {
|
||||
border-radius: var(--default-border-radius--rounded);
|
||||
margin: 1rem 0rem;
|
||||
padding: 1rem;
|
||||
max-width: 40rem;
|
||||
|
||||
&.notice--info {
|
||||
border: solid 1px globals.$notice-color-info;
|
||||
background: oklch(from var(--notice-color--info) calc(l * 0.9) c h);
|
||||
color: oklch(from var(--notice-color--info) calc(l * 0.2) c h);
|
||||
}
|
||||
}
|
||||
|
||||
.permissions-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -343,27 +328,63 @@ a {
|
|||
|
||||
/* ======== Layout ======== */
|
||||
|
||||
.page-grid {
|
||||
.layout-with-sidebar, .layout-with-toolbar {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: grid;
|
||||
grid-template:
|
||||
'sidebar toolbar' 4rem
|
||||
'banner banner' max-content
|
||||
'sidebar toolbar' 64px
|
||||
'sidebar main' 1fr / max-content 1fr;
|
||||
|
||||
.page-grid__toolbar {
|
||||
.banner {
|
||||
grid-area: banner;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
grid-area: toolbar;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
background: oklch(from var(--accent-color) 0.5 0.08 calc(h + 135));
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: oklch(from var(--a-color) 0.9 calc(c * 0.3) h);
|
||||
}
|
||||
|
||||
.ti {
|
||||
position: relative;
|
||||
top: 0.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 15rem;
|
||||
max-height: 100vh;
|
||||
overflow: auto;
|
||||
border-right: solid 1px var(--default-border-color);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
align-items: center;
|
||||
border-bottom: solid 1px var(--default-border-color);
|
||||
display: grid;
|
||||
grid-area: toolbar;
|
||||
grid-template: 'utilities user' 1fr / 1fr max-content;
|
||||
|
||||
.toolbar-item {
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-grid__toolbar-utilities {
|
||||
.toolbar__page-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
|
@ -372,7 +393,7 @@ a {
|
|||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.page-grid__toolbar-user {
|
||||
.toolbar__user {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
|
@ -386,24 +407,13 @@ a {
|
|||
--button-color: var(--button-color--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.page-grid__sidebar {
|
||||
grid-area: sidebar;
|
||||
width: 15rem;
|
||||
max-height: 100vh;
|
||||
overflow: auto;
|
||||
border-right: solid 1px var(--default-border-color);
|
||||
}
|
||||
|
||||
.page-grid__main {
|
||||
grid-area: main;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* ======== Workspace Nav ======== */
|
||||
|
||||
.workspace-nav {
|
||||
padding: 16px;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
:root {
|
||||
--table-header-border-color: var(--default-border-color);
|
||||
--table-cell-border-color: oklch(from var(--default-border-color) calc(l * 1.15) c h);
|
||||
|
||||
--cursor-outline-color: oklch(from var(--accent-color) 0.7 0.45 calc(h + 165));
|
||||
--selection-background-color: oklch(from var(--accent-color) 0.94 0.05 calc(h + 165));
|
||||
}
|
||||
|
||||
/* ======== Toolbar ======== */
|
||||
|
|
@ -205,11 +208,11 @@
|
|||
width: 100%;
|
||||
|
||||
&.table-viewer__cell-container--selected {
|
||||
background: #07f3;
|
||||
background: var(--selection-background-color);
|
||||
}
|
||||
|
||||
&.table-viewer__cell-container--cursor {
|
||||
outline: 3px solid #37f;
|
||||
outline: 3px solid var(--cursor-outline-color);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -314,10 +317,10 @@
|
|||
|
||||
.table-viewer__inserter-submit {
|
||||
align-items: center;
|
||||
border: dashed 1px var(--button-background--primary);
|
||||
border: dashed 1px var(--a-color);
|
||||
border-bottom-right-radius: var(--default-border-radius--rounded-sm);
|
||||
border-top-right-radius: var(--default-border-radius--rounded-sm);
|
||||
color: var(--button-background--primary);
|
||||
color: var(--a-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 var(--default-padding);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue