feat: button for edit for area, simplification of icon

This commit is contained in:
Max Hohlfeld 2024-11-01 13:18:38 +01:00
parent e515057e14
commit 03c47927e5
11 changed files with 88 additions and 129 deletions

View File

@ -49,37 +49,29 @@ pub async fn post(
if !user.locked {
return HttpResponse::Ok().body(format!(
r##"<span class="icon">
<svg class="feather">
r##"<svg class="icon">
<use href="/static/feather-sprite.svg#unlock" />
</svg>
</span>
<span>Entsperren</span>
<div id="user-{id}-locked" hx-swap-oob="true">ja</div>
<button id="user-{id}-delete" hx-swap-oob="true" class="button is-danger is-light" hx-delete="/users/{id}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#x-circle" />
</svg>
</span>
<span>Löschen</span>
</button>"##,
id = user.id));
} else {
return HttpResponse::Ok().body(format!(
r##"<span class="icon">
<svg class="feather">
r##"<svg class="icon">
<use href="/static/feather-sprite.svg#lock" />
</svg>
</span>
<span>Sperren</span>
<div id="user-{id}-locked" hx-swap-oob="true">nein</div>
<button id="user-{id}-delete" hx-swap-oob="true" class="button is-danger is-light" disabled hx-delete="/users/{id}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#x-circle" />
</svg>
</span>
<span>Löschen</span>
</button>"##,
id = user.id));

View File

@ -43,25 +43,14 @@ $crimson: #00d1b2;//#B80F0A;
// TODO: bulma theme for sweetalert looks and feels outdated
@use "sweetalert2/src/sweetalert2.scss" with ($swal2-confirm-button-background-color: $crimson);
.feather {
width: 24px;
height: 24px;
[class*=" icon"],
[class^=icon] {
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
[class*=" icon"],
[class^=icon] {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
line-height: 1;
position: relative;
top: -.05em;
vertical-align: middle;

View File

@ -31,11 +31,9 @@
<div class="field is-grouped">
<div class="control">
<button class="button is-success">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#check-circle" />
</svg>
</span>
<span>
{% if area.is_some() %}
Speichern
@ -47,11 +45,9 @@
</div>
<div class="control">
<a class="button is-link is-light" hx-boost="true" href="/locations">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#arrow-left" />
</svg>
</span>
<span>Zurück</span>
</a>
</div>

View File

@ -8,11 +8,9 @@
<div class="level-left">
<a hx-boost="true" class="button is-link level-item"
href="/?date={{ date.pred() }}{{ selected_area|show_area_query(false) }}">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#arrow-left" />
</svg>
</span>
</a>
</div>
@ -39,11 +37,9 @@
<div class="level-right">
<a hx-boost="true" class="button is-link level-item"
href="/?date={{ date.succ() }}{{ selected_area|show_area_query(false) }}">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#arrow-right" />
</svg>
</span>
</a>
</div>
</div>
@ -64,11 +60,9 @@
selected_area.unwrap() == user.area_id) %}
<div class="level-right">
<a class="button is-link is-light" hx-boost="true" href="/events/new?date={{ date }}">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#plus-circle" />
</svg>
</span>
<span>Neues Event für diesen Tag</span>
</a>
</div>
@ -116,11 +110,9 @@
{% if selected_area.is_none() || selected_area.unwrap() == user.area_id %}
<div class="level-right">
<a class="button is-link is-light" hx-boost="true" href="/availabillity/new?date={{ date }}">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#plus-circle" />
</svg>
</span>
<span>Neue Verfügbarkeit für diesen Tag</span>
</a>
</div>

View File

@ -46,21 +46,17 @@
<div class="field is-grouped">
<div class="control">
<button class="button is-success">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#check-circle" />
</svg>
</span>
<span>Speichern</span>
</button>
</div>
<div class="control">
<a class="button is-link is-light" hx-boost="true" href="/locations">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#arrow-left" />
</svg>
</span>
<span>Zurück</span>
</a>
</div>

View File

@ -12,20 +12,16 @@
<div class="level-right">
{% if user.role == Role::Admin %}
<a class="button is-link is-light" hx-boost="true" href="/area/new">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#plus-circle" />
</svg>
</span>
<span>Neuen Bereich anlegen</span>
</a>
{% endif %}
<a class="button is-link is-light" hx-boost="true" href="/locations/new">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#plus-circle" />
</svg>
</span>
<span>Neuen Ort anlegen</span>
</a>
</div>
@ -38,7 +34,27 @@
{% else %}
{% for gl in grouped_locations %}
<div class="box">
<div class="level">
<div class="level-left">
<div class="level-item">
<h5 class="title is-5">Bereich {{ gl.0.name }}</h5>
</div>
<div class="level-item buttons are-small">
<a class="button is-primary is-light" hx-boost="true" href="/area/edit/{{ gl.0.id }}">
<svg class="icon">
<use href="/static/feather-sprite.svg#edit" />
</svg>
</a>
<a class="button is-danger is-light" hx-boost="true" href="/area/delete/{{ gl.0.id }}">
<svg class="icon">
<use href="/static/feather-sprite.svg#x-circle" />
</svg>
</a>
</div>
</div>
</div>
{% for l in gl.1 %}
<div class="level">
<div clas="level-left">
@ -46,19 +62,15 @@
</div>
<div clas="level-right">
<a class="button is-primary is-light">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#edit" />
</svg>
</span>
<span>Bearbeiten</span>
</a>
<a class="button is-danger is-light">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#x-circle" />
</svg>
</span>
<span>Löschen</span>
</a>
</div>

View File

@ -68,11 +68,9 @@
angemeldet als {{ user.name }}
<div class="buttons ml-3">
<a class="button is-success" hx-boost="true" href="/profile">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#user" />
</svg>
</span>
<span>Profil</span>
</a>
<a href="/logout" class="button is-light">

View File

@ -24,11 +24,9 @@
<div class="level">
<button class="button is-primary level-left">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#log-in" />
</svg>
</span>
<span>Anmelden</span>
</button>
<a class="button is-info is-light level-right" hx-boost="true" href="/reset-password">Passwort vergessen</a>

View File

@ -106,11 +106,9 @@
<div class="field is-grouped">
<div class="control">
<button class="button is-success">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#check-circle" />
</svg>
</span>
<span>
{% if id.is_some() %}
Speichern
@ -122,11 +120,9 @@
</div>
<div class="control">
<a class="button is-link is-light" hx-boost="true" href="/users">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#arrow-left" />
</svg>
</span>
<span>Zurück</span>
</a>
</div>

View File

@ -11,11 +11,9 @@
</div>
<div class="level-right">
<a class="button is-link is-light" hx-boost="true" href="/users/new">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#plus-circle" />
</svg>
</span>
<span>Neuen Nutzer anlegen</span>
</a>
</div>
@ -92,28 +90,22 @@
{% if user.id != u.id %}
<div class="buttons is-right">
<button class="button is-link is-light" hx-post="/users/{{ u.id }}/toggle?field=locked">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#{% if u.locked %}unlock{% else %}lock{% endif %}" />
</svg>
</span>
<span>{% if u.locked %}Entsperren{% else %}Sperren{% endif %}</span>
</button>
<a class="button is-primary is-light" hx-boost="true" href="/users/edit/{{ u.id }}">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#edit" />
</svg>
</span>
<span>Bearbeiten</span>
</a>
<button id="user-{{ u.id }}-delete" class="button is-danger is-light" {% if !u.locked %}disabled{% endif
%} hx-delete="/users/{{ u.id }}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed">
<span class="icon">
<svg class="feather">
<svg class="icon">
<use href="/static/feather-sprite.svg#x-circle" />
</svg>
</span>
<span>Löschen</span>
</button>
</div>

View File

@ -100,11 +100,9 @@
checked="{{ user.receive_notifications }}">
Ich möchte E-Mail Benachrichtigungen zu neuen Brasiwa-Einteilungen erhalten.
<span id="success" class="result">
<span class="icon mr-2">
<svg class="feather">
<svg class="icon mr-2">
<use href="/static/feather-sprite.svg#check" />
</svg>
</span>
<span>
gespeichert
</span>