apeters/basis
1
0
Fork 0
Code Issues Pull Requests Actions Activity

CSS/styles fixes

Browse Source 
Signed-off-by: apeters <apeters@korves.net>
This commit is contained in:
apeters 2025-05-21 09:53:05 +00:00
parent f38132c4f3
commit ee1f3e59b5
11 changed files with 166 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/web/blueprints/profile.py
View File

@ -60,6 +60,7 @@ async def user_profile_patch():
response_code=204,
title="Profile updated",
message="Your profile was updated",
additional_triggers={"profileUpdate": session["profile"]["tresor"]},
)

71
components/web/static_files/css/pico-custom.css
View File

@ -3188,17 +3188,17 @@ dialog article {
margin: calc(var(--pico-spacing) / 2) auto;
}
.grid-3-cols {
.grid-auto-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(5, 1fr);
gap: calc(var(--pico-spacing) / 2);
}
.grid-3-cols .span-3 {
grid-column: span 3;
.grid-auto-cols .grid-span-all {
grid-column: 1/-1;
}
.grid-3-cols > article {
.grid-auto-cols > article {
margin-bottom: 0;
padding-bottom: var(--pico-form-element-spacing-vertical);
--pico-border-radius: .5rem;
@ -3220,28 +3220,6 @@ fieldset.vault-unlock {
padding: var(--pico-spacing) 0;
}
@media only screen and (max-width: 600px) {
#notification-container {
left: 0;
bottom: 0;
width: 100%;
}
dialog article {
max-width: 95%;
}
.grid-3-cols {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: calc(var(--pico-spacing) / 2);
}
.grid-3-cols .span-3 {
grid-column: span 1;
}
.grid-3-cols > article {
margin-bottom: 0;
--pico-border-radius: .5rem;
}
}
@media (max-width: 1024px) {
.split-grid.grid {
gap: calc(var(--pico-spacing) / 2);
@ -3251,11 +3229,46 @@ fieldset.vault-unlock {
background-color: transparent;
box-shadow: none;
}
.grid-auto-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(var(--pico-spacing) / 2);
}
.grid-auto-cols .grid-span-all {
grid-column: 1/-1;
}
.grid-auto-cols > article {
margin-bottom: 0;
padding-bottom: var(--pico-form-element-spacing-vertical);
--pico-border-radius: .5rem;
}
th, td {
--pico-spacing: 0.75rem;
}
}
.group {
@media only screen and (max-width: 576px) {
#notification-container {
left: 0;
bottom: 0;
width: 100%;
}
dialog article {
max-width: 95%;
}
.grid-auto-cols {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: calc(var(--pico-spacing) / 2);
}
.grid-auto-cols .grid-span-all {
grid-column: 1/-1;
}
.grid-auto-cols > article {
margin-bottom: 0;
--pico-border-radius: .5rem;
}
}
.user-group {
opacity: 0;
}
@ -3269,7 +3282,7 @@ fieldset.system-field label:before {
content: "🔒 ";
}
fieldset.keypair {
fieldset.keypair, fieldset.tresor {
border: 1px solid var(--pico-form-element-border-color);
padding: var(--pico-spacing);
}

77
components/web/static_files/css/pico-custom.scss
View File

@ -98,6 +98,10 @@
--pico-line-height: 1.4;
}
$sm-breakpoint: map-get(map-get($breakpoints, sm), breakpoint);
$md-breakpoint: map-get(map-get($breakpoints, md), breakpoint);
$lg-breakpoint: map-get(map-get($breakpoints, lg), breakpoint);
small {
font-size: .875rem;
color: var(--pico-muted-color);
@ -312,20 +316,21 @@ dialog article {
justify-content: space-between;
grid-auto-columns: max-content;
grid-auto-flow: column;
gap: calc(var(--pico-spacing) /2);
gap: calc(var(--pico-spacing)/2);
white-space: nowrap;
align-items: baseline;
margin: calc(var(--pico-spacing) /2) auto;
}
.grid-3-cols {
.grid-auto-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(var(--pico-spacing) /2);
grid-template-columns: repeat(5, 1fr);
gap: calc(var(--pico-spacing)/2);
}
.grid-3-cols .span-3 {
grid-column: span 3;
.grid-auto-cols .grid-span-all {
grid-column: 1 / -1;
}
.grid-3-cols > article {
.grid-auto-cols > article {
margin-bottom: 0;
padding-bottom: var(--pico-form-element-spacing-vertical);
--pico-border-radius: .5rem;
@ -347,7 +352,37 @@ fieldset.vault-unlock {
padding: var(--pico-spacing) 0;
}
@media only screen and (max-width: 600px) {
article.user-group {
}
@media (max-width: $lg-breakpoint) {
.split-grid.grid {
gap: calc(var(--pico-spacing)/2);
}
.split-grid.grid > article {
padding: 0;
background-color: transparent;
box-shadow: none;
}
.grid-auto-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(var(--pico-spacing)/2);
}
.grid-auto-cols .grid-span-all {
grid-column: 1 / -1;
}
.grid-auto-cols > article {
margin-bottom: 0;
padding-bottom: var(--pico-form-element-spacing-vertical);
--pico-border-radius: .5rem;
}
th, td {
--pico-spacing: 0.75rem;
}
}
@media only screen and (max-width: $sm-breakpoint) {
#notification-container {
left: 0;
bottom: 0;
@ -356,35 +391,21 @@ fieldset.vault-unlock {
dialog article {
max-width: 95%;
}
.grid-3-cols {
.grid-auto-cols {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: calc(var(--pico-spacing)/2);
}
.grid-3-cols .span-3 {
grid-column: span 1;
.grid-auto-cols .grid-span-all {
grid-column: 1 / -1;
}
.grid-3-cols > article {
.grid-auto-cols > article {
margin-bottom: 0;
--pico-border-radius: .5rem;
}
}
@media (max-width: 1024px) {
.split-grid.grid {
gap: calc(var(--pico-spacing) /2);
}
.split-grid.grid > article {
padding: 0;
background-color: transparent;
box-shadow: none;
}
th, td {
--pico-spacing: 0.75rem;
}
}
.group {
.user-group {
opacity: 0;
}
@ -398,7 +419,7 @@ fieldset.system-field label:before {
content:"\1f512\0020";
}
fieldset.keypair {
fieldset.keypair, fieldset.tresor {
border: 1px solid var(--pico-form-element-border-color);
padding: var(--pico-spacing);
}

5
components/web/static_files/hyperscript/common._hs
View File

@ -178,6 +178,11 @@ behavior tresorToggle
end
end
end
on profileUpdate from body
exit unless #vault-unlock's @data-tresor == ""
set #vault-unlock's @data-tresor to (value of event.detail)
call setLocked()
end
on keydown[keyCode == 13] from #vault-unlock-pin
trigger click on #vault-unlock unless #vault-unlock-pin's value is empty
end

6
components/web/templates/includes/form_builder.html
View File

@ -60,7 +60,7 @@ DATA FIELDS
{% elif v.type == "tresor" %}
{% if request.path == "/profile/" %}
<fieldset data-loading-disable {% if k in system_fields and not "system" in session["acl"] %}class="system-field" disabled{% endif %} class="keypair">
<fieldset data-loading-disable {% if k in system_fields and not "system" in session["acl"] %}class="system-field" disabled{% endif %} class="tresor">
<label>{{ v.title }}</label>
<input id="{{ v.form_id }}" type="hidden" {{ v.input_extra|safe }}
name="{% if root_key %}{{ root_key }}.{{ k }}{% else %}{{ k }}{% endif %}"
@ -82,7 +82,7 @@ DATA FIELDS
call VaultSetupUserCryptoAndSend(value of #{{ v.form_id }}-password)
set value of #{{ v.form_id }} to (result as JSON)
call window.vault.lock()
add @disabled to <input[type=password]/> in closest <fieldset/>
add @disabled to <input[type=password]/> in closest .tresor
put '<mark>Pending</mark> - please save changes to apply.' after me then remove me
on exception(error) trigger notification(level: 'error', title: 'Tresor error', message: error, duration: 3000)">
Setup encryption
@ -112,7 +112,7 @@ DATA FIELDS
call VaultChangePassword(value of #old-{{ v.form_id }}, value of #new-{{ v.form_id }}, keyData)
call window.vault.exportPayload()
set value of #{{ v.form_id }} to (result as JSON)
add @disabled to closest <fieldset/>
add @disabled to closest .tresor
if not previousLock call window.vault.lock() end
put '<mark>Pending</mark> - please save changes to apply.' after me then remove me
on exception(error) trigger notification(level: 'error', title: 'Tresor error', message: error, duration: 3000)">

2
components/web/templates/includes/menu.html
View File

@ -145,7 +145,7 @@
{% if session["login"] %}
<section>
<hr>
<fieldset _="install tresorToggle" role="group" class="" {{ "disabled" if not session.profile.tresor }}>
<fieldset _="install tresorToggle" role="group">
<input hx-disable
id="vault-unlock-pin"
name="vault-unlock-pin"

2
components/web/templates/profile/includes/credentials.html
View File

@ -1,5 +1,5 @@
<article id="profile-authenticators">
<h6>Authenticators</h6>
<h5>Passkeys</h5>
<p>The authenticator that started the session is indicated as active.</p>
<div class="overflow-auto">
<table>

10
components/web/templates/profile/profile.html
View File

@ -13,21 +13,19 @@
{% block body %}
<article hx-trigger="htmx:afterRequest[event.detail.successful==true] from:#profile-form" hx-select="#profile-form" hx-get="/profile/" hx-target="#profile-form">
<h6>Profile data</h6>
<form hx-trigger="submit throttle:1s" hx-patch="/profile/edit" id="profile-form">
<h4>Your data</h4>
<article hx-trigger="htmx:afterRequest[event.detail.successful==true] from:#profile-form" hx-select="#profile-form" hx-get="/profile/" hx-target="#profile-form">
<h5>Profile</h5>
<form hx-trigger="submit throttle:1s" hx-patch="/profile/edit" id="profile-form">
{% with
schema=schemas.user_profile,
current_data=data.user.profile
%}
{% include "includes/form_builder.html" %}
{% endwith %}
<button data-loading-disable data-loading-aria-busy type="submit">Save changes</button>
</form>
</article>
{% include "profile/includes/credentials.html" %}

101
components/web/templates/system/includes/users/groups.html
View File

@ -12,70 +12,71 @@
<script type="text/hyperscript">
on load 1
set $names to []
set $names to value of <#user-groups [name=name]/> as Array
{% for group, members in groups_dict.items() %}
if $names does not contain "{{- group -}}"
append "{{- group -}}" to $names
render #group-template with (name: "{{- group -}}", members: {{ members|list|tojson }})
put the result at the end of #user-groups
call htmx.process(#user-groups)
add @hidden to .no-groups
set .group's *opacity to 1
{% endfor %}
add @hidden to .no-user-groups
set .user-group's *opacity to 1
end
{% endfor %}
end
</script>
<section>
<div id="user-groups" class="grid-3-cols"
_="on htmx:afterRequest[event.detail.successful==true] queue all
set group to closest .group to event.target
set value of <[name=name]/> in group to value of <[name=new_name]/> in group
if <[name=members] option:checked/> in group is empty
add @hidden to group
settle
remove group
trigger deleteName
else
add @hidden to .group-unsaved in group
end
end
on change
remove @hidden from .group-unsaved in closest .group to event.target
end
on deleteName
set $names to value of <[name=name]/> as Array
end">
<article class="span-3 no-groups" hidden>
There is no group assigned to any user.
</article>
</div>
<section id="user-groups" class="grid-auto-cols"
_="on htmx:afterRequest[event.detail.successful==true] queue all
set group to closest .user-group to event.target
set value of <[name=name]/> in group to value of <[name=new_name]/> in group
if <[name=members] option:checked/> in group is empty
add @hidden to group
settle
remove group
trigger deleteName
else
add @hidden to .user-group-unsaved in group
end
end
on change
remove @hidden from .user-group-unsaved in closest .user-group to event.target
end
on deleteName
set $names to value of <#user-groups [name=name]/> as Array
end">
</section>
<p>
<mark class="no-user-groups" >
There is no group assigned to any user.
</mark>
</p>
<section>
<form hx-disable _="on submit
halt the event
add @disabled to <fieldset/> in me
if $names does not contain #group.value and #group.value is not empty
append #group.value to $names
render #group-template with (name: #group.value, members: [])
put the result at the end of #user-groups
call htmx.process(#user-groups)
add @hidden to .no-groups
transition .group's opacity to 1 over 175ms
end
remove @disabled from <fieldset/> in me
end">
<fieldset>
<input autocomplete="off" id="group" name="group" type="text" placeholder="New group name" />
<button type="submit">Create</button>
</fieldset>
</form>
<form hx-disable _="on submit
halt the event
add @disabled to <fieldset/> in me
if $names does not contain #group.value and #group.value is not empty
append #group.value to $names
render #group-template with (name: #group.value, members: [])
put the result at the end of #user-groups
call htmx.process(#user-groups)
add @hidden to .no-user-groups
transition .user-group's opacity to 1 over 175ms
end
remove @disabled from <fieldset/> in me
end">
<fieldset>
<input autocomplete="off" id="group" name="group" type="text" placeholder="New group name" />
<button type="submit">Create</button>
</fieldset>
</form>
</section>
<template id="group-template">
@set hidden to "hidden" unless members is empty
<article class="group">
<article class="user-group">
<form hx-patch="/system/users/groups">
<input type="hidden" name="name" value="${name}"/>
<fieldset data-loading-disable>
@ -97,15 +98,15 @@
{% endfor %}
</select>
</fieldset>
<small class="color-yellow-200 group-unsaved" ${hidden}>⚠️ unsaved</small>
<small class="color-yellow-200 user-group-unsaved" ${hidden}>⚠️ unsaved</small>
<div class="grid-space-between">
<a href="#" _="install confirmButton
on confirmedButton
set selectedIndex of <select/> in closest .group to -1
set selectedIndex of <select/> in closest .user-group to -1
trigger submit on closest <form/>
end">Remove</a>
<button data-loading-disable
class="button-green group-unsaved"
class="button-green user-group-unsaved"
${hidden}
type="submit">
Save

2
components/web/templates/system/status.html
View File

@ -26,7 +26,7 @@
</h4>
<div id="system-status">
<section id="system-status-cards" class="grid-3-cols">
<section id="system-status-cards" class="grid-auto-cols">
<article>
<h5>{{ data.status.CLUSTER_PEERS_LOCAL.name }} 🏠</h5>
<p>

15
components/web/templates/system/users.html
View File

@ -13,17 +13,18 @@
{% block body %}
<details name="users-groups">
<summary role="button" class="button-slate-800">Manage Groups</summary>
<section id="system-groups">
{% include "system/includes/users/groups.html" %}
</section>
</details>
<h4>Users and groups</h4>
<hr />
<section>
<h5>Groups</h5>
{% include "system/includes/users/groups.html" %}
</section>
<hr>
<div class="grid split-grid">
<article id="system-users-full-table">
<h5>Users</h5>
{% include "system/includes/users/table.html" %}
</article>
</div>