brent/phonograph
1
0
Fork 0
forked from 2sys/phonograph
Code Pull requests Activity

reorganize askama templates

Browse source
This commit is contained in:
Brent Schroeter 2026-01-19 18:48:14 +00:00
parent 9bee5fdaef
commit 341e02a41b
22 changed files with 412 additions and 397 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
phono-server/src/permissions.rs
View file

@ -46,7 +46,7 @@ pub enum RelPermissionKind {
} }
#[derive(Clone, Debug, Eq, Hash, PartialEq, Template)] #[derive(Clone, Debug, Eq, Hash, PartialEq, Template)]
#[template(path = "rel_permission.html")] #[template(path = "includes/rel_permission.html")]
pub(crate) struct RelPermission { pub(crate) struct RelPermission {
pub(crate) kind: RelPermissionKind, pub(crate) kind: RelPermissionKind,
pub(crate) rel_oid: Oid, 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 /// an "Edit" button which opens a dialog with a form allowing permissions to be
/// assigned across multiple tables within a workspace. /// assigned across multiple tables within a workspace.
#[derive(Clone, Debug, Template)] #[derive(Clone, Debug, Template)]
#[template(path = "workspaces_single/permissions_editor.html")] #[template(path = "includes/permissions_editor.html")]
pub(crate) struct PermissionsEditor { pub(crate) struct PermissionsEditor {
/// User, invite, or service credential being granted permissions. /// User, invite, or service credential being granted permissions.
pub(crate) target: Grantee, pub(crate) target: Grantee,

2
phono-server/src/routes/relations_single/portal_handler.rs
View file

@ -94,7 +94,7 @@ pub(super) async fn get(
.await?; .await?;
#[derive(Template)] #[derive(Template)]
#[template(path = "portal_table.html")] #[template(path = "relations_single/portal_table.html")]
struct ResponseTemplate { struct ResponseTemplate {
columns: Vec<ColumnInfo>, columns: Vec<ColumnInfo>,
attr_names: Vec<String>, attr_names: Vec<String>,

2
phono-server/src/workspace_nav.rs
View file

@ -12,7 +12,7 @@ use crate::{
}; };
#[derive(Builder, Clone, Debug, Template)] #[derive(Builder, Clone, Debug, Template)]
#[template(path = "workspace_nav.html")] #[template(path = "includes/workspace_nav.html")]
pub(crate) struct WorkspaceNav { pub(crate) struct WorkspaceNav {
workspace: Workspace, workspace: Workspace,
relations: Vec<RelationItem>, relations: Vec<RelationItem>,

0
phono-server/templates/workspaces_single/permissions_editor.html → phono-server/templates/includes/permissions_editor.html
View file

0
phono-server/templates/rel_permission.html → phono-server/templates/includes/rel_permission.html
View file

12
phono-server/templates/includes/toolbar_user.html Normal file
View 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>

0
phono-server/templates/workspace_nav.html → phono-server/templates/includes/workspace_nav.html
View file

12
phono-server/templates/base.html → phono-server/templates/layouts/base.html
View file

@ -1,15 +1,19 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <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> <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 }}/modern-normalize.min.css">
<link rel="stylesheet" href="{{ settings.root_path }}/main.css"> <link rel="stylesheet" href="{{ settings.root_path }}/main.css">
<link rel="stylesheet" href="{{ settings.root_path }}/tabler-icons/webfont/tabler-icons.min.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 %}{% endblock -%}
{%- block head_extras %}{% endblock -%}
</head> </head>
<body> <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> </body>
</html> </html>

29
phono-server/templates/layouts/with_sidebar.html Normal file
View 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
View 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 %}

4
phono-server/templates/meta_tags.html
View file

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

37
phono-server/templates/portal_table.html
View file

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

31
phono-server/templates/relations_single/portal_settings.html
View file

@ -1,10 +1,7 @@
{% extends "base.html" %} {% extends "layouts/with_sidebar.html" %}
{% block main %} {% block toolbar_page_actions %}
<div class="page-grid"> <a
<div class="page-grid__toolbar">
<div class="page-grid__toolbar-utilities">
<a
class="button button--secondary" class="button button--secondary"
href="{{ navigator.portal_page() href="{{ navigator.portal_page()
.workspace_id(*portal.workspace_id) .workspace_id(*portal.workspace_id)
@ -13,18 +10,17 @@
.build()? .build()?
.get_path() }}" .get_path() }}"
role="button" role="button"
> >
Back Back
</a> </a>
</div> {% endblock %}
{% include "toolbar_user.html" %}
</div> {% block sidebar %}
<div class="page-grid__sidebar"> {{ workspace_nav | safe }}
<div style="padding: 1rem;"> {% endblock %}
{{ workspace_nav | safe }}
</div> {% block main %}
</div> <div class="padded padded--lg">
<main class="page-grid__main padded padded--lg">
<form method="post" action="update-name"> <form method="post" action="update-name">
<section> <section>
<h1>Portal Name</h1> <h1>Portal Name</h1>
@ -44,6 +40,5 @@
</div> </div>
</section> </section>
</form> </form>
</main>
</div> </div>
{% endblock %} {% endblock %}

33
phono-server/templates/relations_single/portal_table.html Normal file
View 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 %}

18
phono-server/templates/relations_single/settings.html
View file

@ -1,16 +1,11 @@
{% extends "base.html" %} {% extends "layouts/with_sidebar.html" %}
{% block sidebar %}
{{ workspace_nav | safe }}
{% endblock %}
{% block main %} {% block main %}
<div class="page-grid"> <div class="padded padded--lg">
<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">
<form method="post" action="update-name"> <form method="post" action="update-name">
<section> <section>
<h1>Table Name</h1> <h1>Table Name</h1>
@ -30,6 +25,5 @@
</div> </div>
</section> </section>
</form> </form>
</main>
</div> </div>
{% endblock %} {% endblock %}

14
phono-server/templates/toolbar_user.html
View file

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

16
phono-server/templates/workspaces_multi/list.html
View file

@ -1,15 +1,7 @@
{% extends "base.html" %} {% extends "layouts/with_toolbar.html" %}
{% block head_extras %}
{% endblock %}
{% block main %} {% block main %}
<div class="page-grid"> <nav class="workspace-nav" style="position: relative; margin: 0 auto; max-width: 540px;">
<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"> <section class="workspace-nav__section">
<div class="workspace-nav__heading"> <div class="workspace-nav__heading">
<h1>My Workspaces</h1> <h1>My Workspaces</h1>
@ -46,7 +38,5 @@
<h1>Shared With Me</h1> <h1>Shared With Me</h1>
</div> </div>
</section> </section>
</nav> </nav>
</main>
</div>
{% endblock %} {% endblock %}

17
phono-server/templates/workspaces_single/nav.html
View file

@ -1,16 +1,5 @@
{% extends "base.html" %} {% extends "layouts/with_sidebar.html" %}
{% block main %} {% block sidebar %}
<div class="page-grid"> {{ workspace_nav | safe }}
<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">
</main>
</div>
{% endblock %} {% endblock %}

37
phono-server/templates/workspaces_single/service_credentials.html
View file

@ -1,30 +1,22 @@
{% extends "base.html" %} {% extends "layouts/with_sidebar.html" %}
{% block head_extras %} {% block toolbar_page_actions %}
<script type="module" src="{{ settings.root_path }}/js_dist/copy-source.webc.mjs"></script> <basic-dropdown button-class="button--secondary" button-label="New Credential">
{% endblock %}
{% block main %}
<div class="page-grid">
<div class="page-grid__toolbar">
<div class="page-grid__toolbar-utilities">
<basic-dropdown button-class="button--secondary" button-label="New Credential">
<span slot="button-contents">New Credential</span> <span slot="button-contents">New Credential</span>
<div class="padded" slot="popover"> <div class="padded" slot="popover">
<form action="add-service-credential" method="post"> <form action="add-service-credential" method="post">
<button class="button--secondary" type="submit">Confirm</button> <button class="button--secondary" type="submit">Confirm</button>
</form> </form>
</div> </div>
</basic-dropdown> </basic-dropdown>
</div> {% endblock %}
{% include "toolbar_user.html" %}
</div> {% block sidebar %}
<div class="page-grid__sidebar"> {{ workspace_nav | safe }}
<div style="padding: 1rem;"> {% endblock %}
{{ workspace_nav | safe }}
</div> {% block main %}
</div> <div class="page-grid__main padded padded--lg">
<main class="page-grid__main padded padded--lg">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -58,6 +50,9 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
<table> <table>
</main>
</div> </div>
{% endblock %} {% endblock %}
{% block scripts %}
<script type="module" src="{{ settings.root_path }}/js_dist/copy-source.webc.mjs"></script>
{% endblock %}

14
phono-server/templates/workspaces_single/settings.html
View file

@ -1,16 +1,7 @@
{% extends "base.html" %} {% extends "layouts/with_sidebar.html" %}
{% block main %} {% block main %}
<div class="page-grid"> <div class="padded padded--lg">
<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">
<form method="post" action="update-name"> <form method="post" action="update-name">
<section> <section>
<h1>Workspace Name</h1> <h1>Workspace Name</h1>
@ -98,6 +89,5 @@
<button class="button button--primary" type="submit">Save</button> <button class="button button--primary" type="submit">Save</button>
</div> </div>
</section> </section>
</main>
</div> </div>
{% endblock %} {% endblock %}

90
static/main.css
View file

@ -34,7 +34,7 @@
--default-padding--sm: 8px; --default-padding--sm: 8px;
--default-padding--lg: 32px; --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--primary: var(--accent-color);
--button-background--secondary: #fff; --button-background--secondary: #fff;
@ -51,8 +51,6 @@
--button-padding: var(--button-padding--default); --button-padding: var(--button-padding--default);
--button-shadow: 0 2px 2px #3331; --button-shadow: 0 2px 2px #3331;
--notice-color--info: #39d;
--popover-border-color: var(--default-border-color); --popover-border-color: var(--default-border-color);
--popover-shadow: 0 8px 8px #3333; --popover-shadow: 0 8px 8px #3333;
} }
@ -251,19 +249,6 @@ a {
padding: 1rem 2rem; 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 { .permissions-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -343,27 +328,63 @@ a {
/* ======== Layout ======== */ /* ======== Layout ======== */
.page-grid { .layout-with-sidebar, .layout-with-toolbar {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
display: grid; display: grid;
grid-template: grid-template:
'sidebar toolbar' 4rem 'banner banner' max-content
'sidebar toolbar' 64px
'sidebar main' 1fr / max-content 1fr; '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; align-items: center;
border-bottom: solid 1px var(--default-border-color); border-bottom: solid 1px var(--default-border-color);
display: grid; display: grid;
grid-area: toolbar;
grid-template: 'utilities user' 1fr / 1fr max-content; grid-template: 'utilities user' 1fr / 1fr max-content;
.toolbar-item { .toolbar__page-actions {
flex: 0;
}
}
.page-grid__toolbar-utilities {
align-items: center; align-items: center;
display: flex; display: flex;
gap: 12px; gap: 12px;
@ -372,7 +393,7 @@ a {
padding: 0 12px; padding: 0 12px;
} }
.page-grid__toolbar-user { .toolbar__user {
align-items: center; align-items: center;
display: flex; display: flex;
gap: 12px; gap: 12px;
@ -386,24 +407,13 @@ a {
--button-color: var(--button-color--secondary); --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 ======== */
.workspace-nav { .workspace-nav {
padding: 16px;
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;

11
static/portal-table.css
View file

@ -3,6 +3,9 @@
:root { :root {
--table-header-border-color: var(--default-border-color); --table-header-border-color: var(--default-border-color);
--table-cell-border-color: oklch(from var(--default-border-color) calc(l * 1.15) c h); --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 ======== */ /* ======== Toolbar ======== */
@ -205,11 +208,11 @@
width: 100%; width: 100%;
&.table-viewer__cell-container--selected { &.table-viewer__cell-container--selected {
background: #07f3; background: var(--selection-background-color);
} }
&.table-viewer__cell-container--cursor { &.table-viewer__cell-container--cursor {
outline: 3px solid #37f; outline: 3px solid var(--cursor-outline-color);
outline-offset: -2px; outline-offset: -2px;
} }
} }
@ -314,10 +317,10 @@
.table-viewer__inserter-submit { .table-viewer__inserter-submit {
align-items: center; 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-bottom-right-radius: var(--default-border-radius--rounded-sm);
border-top-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; display: flex;
justify-content: center; justify-content: center;
padding: 0 var(--default-padding); padding: 0 var(--default-padding);