roundabout,
created on Friday, 3 January 2025, 13:16:14 (1735910174),
received on Friday, 3 January 2025, 13:59:35 (1735912775)
Author identity: vlad <vlad.muntoiu@gmail.com>
85f84a32f7d4b840022ccf1f1edf3aae5fe2fc22
static/efficient-ui
@@ -1 +1 @@
Subproject commit 85d3e19a4ddf478cc9ca665b3695316dcd5efbff
Subproject commit 30b18afca348bd1168ee40ef9d11b1fb8fd502b9
static/style.css
@@ -16,6 +16,7 @@
--4-star: #FBC02D;
--5-star: #CDDC39;
view-transition-name: root;
--reserved-height-top: 0;
}
.ripple-pad {
@@ -225,10 +226,6 @@ iconify-icon {
stroke-opacity: 1;
}
@view-transition {
navigation: auto;
}
@keyframes move-out {
from {
transform: scale(1);
@@ -251,12 +248,12 @@ iconify-icon {
}
}
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
#annotation-zone {
view-transition-name: thumbnail;
}
@media (prefers-reduced-motion: no-preference) {
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
#annotation-zone {
view-transition-name: thumbnail;
}
::view-transition-old(root),
::view-transition-new(root) {
transform-origin: top;
@@ -281,7 +278,7 @@ iconify-icon {
animation-duration: 0s;
}
::view-transition-group(navbar) {
::view-transition-group(navbar), ::view-transition-group(navbar-mobile) {
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -437,17 +434,31 @@ dd {
margin-left: 40px;
}
#mobile-navbar {
#mobile-navbar, #mobile-navbar-spacer {
display: none;
}
@media screen and (max-width: 576px) {
@media screen and (max-width: 896px) {
#mobile-navbar {
display: flex;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 3;
}
#mobile-navbar-spacer {
display: block;
height: var(--height-navbar);
}
#desktop-navbar {
display: none;
}
:root {
--reserved-height-top: var(--height-navbar);
}
}
#hamburger > nav {
@@ -584,7 +595,7 @@ dd {
#picture-actions {
--width: 256px;
position: sticky;
top: 0;
top: var(--reserved-height-top);
overflow: auto;
max-height: 100vh;
height: 100%;
@@ -667,3 +678,36 @@ dd {
left: calc(-1 * (50vw - 50%));
}
}
.navbar > ul {
max-width: 100%;
}
#desktop-navbar > ul:first-child { /* list containing title */
flex: 0 1 auto;
min-width: 0;
}
#desktop-navbar > ul:last-child { /* list containing navigation */
flex: 1 0 auto;
justify-content: end;
}
#mobile-navbar-title, #desktop-navbar-title {
font: var(--h5-font);
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 auto;
min-width: 0;
}
nav .button-flat {
--color-flat-button-hover: transparent;
--color-flat-button-active: transparent;
}
nav .button-flat .ripple-pad {
background: #ffffff99;
}
templates/create-gallery.html
@@ -1,11 +1,11 @@
{% extends "default.html" %}
{% block title %}Create gallery | {{ site_name }}{% endblock %}
{% block content %}
<x-frame style="--width: 768px">
<form method="POST" class="vbox">
<h1>Create gallery</h1>
<p>
You can add content later.
</p>
templates/default.html
@@ -7,6 +7,13 @@
<link rel="stylesheet" href="/static/style.css">
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
</head>
<style>
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
}
</style>
<body>
<dialog id="hamburger" class="sheet-left">
<nav>
@@ -33,24 +40,44 @@
<header>
<nav class="navbar" id="mobile-navbar">
<ul>
<li id="hamburger-button">
<button class="button-flat button-neutral" onclick="document.getElementById('hamburger').showModal()">
<iconify-icon icon="ic:baseline-menu">Menu</iconify-icon>
</button>
{% if back_url %}
<li id="back-button">
<a class="button button-flat button-neutral" href="{{ back_url | safe }}">
<iconify-icon icon="ic:baseline-arrow-back">Back</iconify-icon>
</a>
</li>
{% else %}
<li id="hamburger-button">
<button class="button-flat button-neutral" onclick="document.getElementById('hamburger').showModal()">
<iconify-icon icon="ic:baseline-menu">Menu</iconify-icon>
</button>
</li>
{% endif %}
<li id="mobile-navbar-title">
{% block nav_title %}{% endblock %}
</li>
</ul>
</nav>
<nav class="navbar" id="desktop-navbar">
<ul>
{% if back_url %}
<li id="back-button">
<a class="button button-flat button-neutral" href="{{ back_url | safe }}">
<iconify-icon icon="ic:baseline-arrow-back">Back</iconify-icon>
</a>
</li>
{% endif %}
<li id="desktop-navbar-title">{{ self.nav_title() }}</li> {# copy the block #}
</ul>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/object/">Object list</a></li>
<li><a href="/query-pictures">Query</a></li>
<li><a href="/info/">Help</a></li>
{% if session.username %}
<li><a href="/upload">Upload</a></li> <li><a href="/create-gallery">New gallery</a>
<li><a href="/upload">Upload</a></li>
<li><a href="/create-gallery">New gallery</a>
{% endif %}
</ul>
<ul>
{% if session.username %}
<li><a href="/profile/{{ session.username }}">Profile: {{ session.username }}</a></li>
<li><a href="/logout">Log out</a></li>
@@ -60,6 +87,7 @@
</ul>
</nav>
</header>
<div id="mobile-navbar-spacer"></div>
<main>
{% block content %}{% endblock %}
</main>
templates/edit-gallery.html
@@ -1,13 +1,11 @@
{% extends "default.html" %}
{% block title %}Editing {{ gallery.title }} | {{ site_name }}{% endblock %}
{% block nav_title %}{{ gallery.title }}{% endblock %}
{% block title %}Edit gallery '{{ gallery.title }}' | {{ site_name }}{% endblock %}
{% set back_url = "/gallery/" + gallery.id|string %}
{% block content %}
<x-frame style="--width: 768px" class="vbox">
<h1>Editing: {{ gallery.title }}</h1>
<p>
<a href="/gallery/{{ gallery.id }}/">Back</a>
</p>
<form method="POST" class="vbox">
<label>
<span class="required-asterisk">Title</span>
templates/edit-picture.html
@@ -1,12 +1,11 @@
{% extends "default.html" %}
{% block title %}Editing picture {{ resource.title }} | {{ site_name }}{% endblock %}
{% block nav_title %}Edit '{{ resource.title }}'{% endblock %}
{% block title %}Edit picture '{{ resource.title }}' | {{ site_name }}{% endblock %}
{% set back_url = "/picture/" + resource.id|string %}
{% block content %}
<x-frame style="--width: 768px">
<h1>Editing: {{ resource.title }}</h1>
<p>{{ resource.description }}</p>
<p>
<a href="/picture/{{ resource.id }}/">Back</a>
</p>
<form class="vbox" method="POST">
<label>
<span class="required-asterisk">Title</span>
templates/gallery-users.html
@@ -1,11 +1,11 @@
{% extends "default.html" %}
{% block title %}Users of {{ gallery.title }} | {{ site_name }}{% endblock %}
{% set back_url = "/gallery/" + gallery.id|string %}
{% block content %}
<x-frame style="--width: 768px" class="vbox">
<h1>Users: {{ gallery.title }}</h1>
<p>{{ gallery.description }}</p>
{% if have_permission %}
<form class="buttonbox" method="POST" action="/gallery/{{ gallery.id }}/users/add">
<input name="username" type="text" placeholder="Username" required aria-label="Username">
templates/gallery.html
@@ -1,5 +1,6 @@
{% extends "default.html" %}
{% block title %}Gallery {{ gallery.title }} | {{ site_name }}{% endblock %}
{% block content %}
templates/graphical-query-pictures-results.html
@@ -1,5 +1,6 @@
{% extends "default.html" %}
{% block title %}Picture query results | {{ site_name }}{% endblock %}
{% block content %}
templates/graphical-query-pictures.html
@@ -1,10 +1,10 @@
{% extends "default.html" %}
{% block title %}Query pictures | {{ site_name }}{% endblock %}
{% block content %}
<x-frame style="--width: 768px" class="vbox">
<h1>Query pictures</h1>
<form method="GET" action="/query-pictures-results" class="vbox">
<label>
<span class="required-asterisk">Query YAML</span>
templates/help.html
@@ -1,5 +1,8 @@
{% extends "default.html" %}
{% block nav_title %}Help{% endblock %}
{% block title %}Help | {{ site_name }}{% endblock %}
{% block content %}
<x-frame style="--width: 768px; padding: 1rem;">
{{ content | safe }}
templates/home.html
@@ -1,4 +1,6 @@
{% extends "default.html" %}
{% block nav_title %}Home{% endblock %}
{% block title %}Home | {{ site_name }}{% endblock %}
{% block content %}
<x-frame style="--width: 768px">
templates/login.html
@@ -1,4 +1,6 @@
{% extends "default.html" %}
{% block nav_title %}Log in{% endblock %}
{% block title %}Log in | {{ site_name }}{% endblock %}
{% block content %}
<x-frame style="--width: 384px" class="vbox">
templates/object-types.html
@@ -1,5 +1,6 @@
{% extends "default.html" %}
{% block title %}List of objects | {{ site_name }}{% endblock %}
{% block content %}
templates/object.html
@@ -1,4 +1,6 @@
{% extends "default.html" %}
{% block nav_title %}{{ object.id }}{% endblock %}
{% block title %}Object {{ object.id }} | {{ site_name }}{% endblock %}
{% block content %}
templates/picture-annotation.html
@@ -1,5 +1,9 @@
{% extends "default.html" %}
{% block nav_title %}{{ resource.title }}{% endblock %}
{% block title %}Annotating picture {{ resource.title }} | {{ site_name }}{% endblock %}
{% set back_url = "/picture/" + resource.id|string %}
{% block content %}
<style>
py-script {
templates/picture.html
@@ -1,4 +1,6 @@
{% extends "default.html" %}
{% block nav_title %}{{ resource.title }}{% endblock %}
{% block title %}Picture {{ resource.title }} | {{ site_name }}{% endblock %}
{% macro shape_label(x, y, text) %}
{% if text %}
templates/profile.html
@@ -1,5 +1,6 @@
{% extends "default.html" %}
{% block title %}{{ user.formatted_name }}'s profile | {{ site_name }}{% endblock %}
{% block content %}
templates/put-annotations-form.html
@@ -1,9 +1,10 @@
{% extends "default.html" %}
{% block title %}Submit JSON annotations | {{ site_name }}{% endblock %}
{% block nav_title %}{{ resource.title }}{% endblock %}
{% block title %}Submit JSON annotations for {{ resource.title }} | {{ site_name }}{% endblock %}
{% block content %}
<x-frame style="--width: 768px">
<form method="POST" class="vbox">
<h1>Submit JSON annotations: {{ resource.title }}</h1>
<p>
Submit JSON annotations for the picture <a href="/picture/{{ resource.id }}">{{ resource.title }}</a>.
Check the documentation for the expected format.
templates/upload.html
@@ -1,4 +1,6 @@
{% extends "default.html" %}
{% block nav_title %}Upload{% endblock %}
{% block title %}Upload | {{ site_name }}{% endblock %}
{% block content %}
<x-frame style="--width: 768px">