New modal dialogs

This commit is contained in:
roberto 2024-12-11 17:52:09 +01:00
parent 0cc0794807
commit 53b65e9986
16 changed files with 157 additions and 210 deletions

View File

@ -97,34 +97,6 @@ body {
z-index: 6; z-index: 6;
} }
.modal {
z-index: 100;
padding-top: 100px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
display: block;
}
.modal-content {
margin: auto;
background-color: #fff;
position: relative;
padding: 0;
outline: 0;
width: 600px;
color: rgb(84, 84, 84);
}
.modal-content h5 {
font-weight: 600 !important;
}
.display-topleft { .display-topleft {
position: absolute; position: absolute;
left: 0; left: 0;
@ -913,14 +885,55 @@ th.operations, td.operations {
display: block !important display: block !important
} }
#footer-navbar .bar-item:first-child {
padding-left: 0;
}
#item h5 { #item h5 {
font-size: 18px; font-size: 18px;
} }
#footer-navbar {
display: flex;
flex-direction: row;
margin-bottom: 10px;
align-items: flex-start;
}
#footer-navbar button, #footer-navbar a {
margin-right: 10px;
}
#footer-navbar span {
margin-left: 5px;
}
dialog {
border-radius: 8px;
border-color: var(--primary-color);
z-index:100;
}
#dialog-container dialog {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: auto;
}
dialog header {
margin-bottom: 20px;
font-weight: bold;
}
dialog header h5 {
margin-right: 40px;
font-size: 16px;
}
dialog .content {
clear: both;
max-height:600px;
overflow: auto;
}
/* Small */ /* Small */
@media (max-width: 568px) { @media (max-width: 568px) {
#page-title-container { #page-title-container {
@ -985,6 +998,10 @@ th.operations, td.operations {
.hide-small { .hide-small {
display: none !important display: none !important
} }
#footer-navbar span {
display: none !important
}
} }
/* Min medium */ /* Min medium */
@ -1086,6 +1103,9 @@ th.operations, td.operations {
} }
@media (min-width:993px) { @media (min-width:993px) {
dialog {
max-width: 600px;
}
.col.l1 { .col.l1 {
width: 8.33333% width: 8.33333%
} }

File diff suppressed because one or more lines are too long

View File

@ -141,15 +141,13 @@ function bm_toggle_quickbox() {
} }
function bm_show_confirm(sender, title, message) { function bm_show_confirm(sender, title, message) {
document.querySelector("#modal-confirm-dialog h5").innerHTML = title; document.querySelector("#dialog-confirm h5").innerHTML = title;
document.querySelector("#modal-confirm-dialog p").innerHTML = message; document.querySelector("#dialog-confirm p").innerHTML = message;
let btn_ok = document.getElementById("modal-confirm-ok"); document.querySelector("#dialog-confirm").showModal();
document.getElementById("modal-confirm-ok").addEventListener('click', (event) => { document.getElementById("modal-confirm-ok").addEventListener('click', (event) => {
htmx.trigger(sender, 'confirmed', null); htmx.trigger(sender, 'confirmed', null);
document.getElementById("modal-confirm-dialog").style.display = "none"; document.querySelector("#dialog-confirm").close();
}); });
document.getElementById("modal-confirm-dialog").style.display = "block";
} }
function bm_item_field_add(type_field_id, widget) { function bm_item_field_add(type_field_id, widget) {
@ -178,6 +176,19 @@ document.addEventListener("DOMContentLoaded", function(event){
); );
*/ */
document.querySelector('#dialog-confirm').addEventListener('click', (event) => {
if (event.target.classList.contains("close-dialog")) {
event.target.closest('dialog').close();
}
})
document.querySelector('#dialog-container').addEventListener('click', (event) => {
if (event.target.classList.contains("close-dialog")) {
event.target.closest('dialog').close();
event.target.closest('dialog').remove();
}
})
document.body.addEventListener("quickboxNoteClear", function(evt){ document.body.addEventListener("quickboxNoteClear", function(evt){
document.getElementById("quickbox-note").value = '' document.getElementById("quickbox-note").value = ''
}); });

View File

@ -1,4 +1,5 @@
{{define "base"}} {{define "base"}}
<!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" > <meta charset="utf-8" >
@ -17,9 +18,7 @@
}} }}
</head> </head>
<body hx-headers='{"X-CSRF-TOKEN": "{{ .CSRFToken }}"}'> <body hx-headers='{"X-CSRF-TOKEN": "{{ .CSRFToken }}"}'>
{{template "partial:sidebar" .}} {{template "partial:sidebar" .}}
<div id="page-main"> <div id="page-main">
<div id="page-top-bar"> <div id="page-top-bar">
<div id="page-title-container"> <div id="page-title-container">
@ -45,27 +44,27 @@
{{template "partial:footer" .}} {{template "partial:footer" .}}
<div id="message"></div> <div id="message"></div>
<div id="modal-container"></div>
<div id="overlay" onclick="bm_overlay_off('main-sidebar')"></div> <div id="overlay" onclick="bm_overlay_off('main-sidebar')"></div>
<div id="dialog-container"></div>
<div id="modal-confirm-dialog" class="modal" style="display: none;"> <dialog role="dialog" id="dialog-confirm">
<div id="modal-confirm-dialog-content" class="modal-content w3-round-large w3-padding w3-animate-top"> <header>
<header class="w3-container"> <div style="float:left; max-width: 420px;">
<span _="on click hide #modal-confirm-dialog" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
<h5></h5> <h5></h5>
</header>
<div class="w3-container">
<p></p>
</div> </div>
<div style="float:right">
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</div>
</header>
<p style="clear: both"></p>
<footer class="w3-container"> <footer class="w3-container">
<p style="text-align: center;"> <p style="text-align: center;">
<button id="modal-confirm-ok" class="w3-btn w3-metro-dark-blue w3-round-large">Ok</button> <button id="modal-confirm-ok">Ok</button>
<button _="on click hide #modal-confirm-dialog" class="w3-btn w3-light-gray w3-round-large">Cancel</button> <button class="close-dialog">Cancel</button>
</p> </p>
</footer> </footer>
</div> </dialog>
</div>
<div id="quickbox"> <div id="quickbox">
<div class="noswipe" id="quickbox-top-bar"> <div class="noswipe" id="quickbox-top-bar">

View File

@ -16,20 +16,10 @@
/> />
</p> </p>
<p class="hide-small">
<button class="main"><i class="bi bi-floppy"></i> Save</button>
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/categories"><i class="bi bi-arrow-left-circle"></i> Back</a>
</p>
</div>
<div id="footer-navbar-container">
<div id="footer-navbar" class="bar hide-medium hide-large">
<div class="bar-item">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i></button>
</div>
<div class="bar-item">
<a class="button secondary" href="/categories" hx-get="/categories" hx-push-url="true" hx-target="#page-content" title="Back"><i class="bi bi-arrow-left-circle"></i></a>
</div>
</div> </div>
<div id="footer-navbar">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
<a class="button secondary" href="/categories" hx-get="/categories" hx-push-url="true" hx-target="#page-content" title="Back"><i class="bi bi-arrow-left-circle"></i><span>Back</span></a>
</div> </div>
</form> </form>
{{ end }} {{ end }}

View File

@ -42,7 +42,7 @@
{{ template "item:add_to_dashboard" .Id }} {{ template "item:add_to_dashboard" .Id }}
{{ end }} {{ end }}
<button hx-target="#modal-container" hx-get="/item/share/{{.Id}}" title="Share"><i class='bi bi-share'></i></button> <button href="#" hx-target="#dialog-container" hx-get="/item/share/{{.Id}}" title="Share"><i class="bi bi-share-fill"></i></button>
<button hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit"><i class="bi bi-pencil"></i></button> <button hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit"><i class="bi bi-pencil"></i></button>
<button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button> <button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
</td> </td>

View File

@ -104,34 +104,16 @@
</fieldset> </fieldset>
</div> </div>
</div> </div>
<p class="hide-small">
<button class="main"><i class="bi bi-floppy"></i> Save</button>
{{ if not (eq .item.Id 0) }}
<a class="button secondary" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i> View</a>
<a class="button delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"><i class="bi bi-trash"></i> Delete</a>
<a class="button secondary" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i> Share</a>
{{ end }}
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i> Back</a>
</p>
<div id="footer-navbar-container"> <div id="footer-navbar">
<div id="footer-navbar" class="bar hide-medium hide-large"> <button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
<div class="bar-item">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i></button>
</div>
{{ if not (eq .item.Id 0) }} {{ if not (eq .item.Id 0) }}
<div class="bar-item"> <a class="button secondary hide-medium hide-large" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i><span>View</span></a>
<a class="button delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></a> <a class="button secondary hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#dialog-container"><i class="bi bi-binoculars"></i><span>View</span></a>
</div> <a class="button delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i><span>Delete</span></a>
<div class="bar-item"> <a class="button secondary" href="#" hx-target="#dialog-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i><span>Share</span></a>
<a class="button secondary" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i></a>
</div>
<div class="bar-item">
<a class="button secondary" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="View"><i class="bi bi-binoculars"></i>
</a>
</div>
{{ end }} {{ end }}
</div> <a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i><span>Back</span></a>
</div> </div>
</form> </form>
{{ end }} {{ end }}

View File

@ -50,7 +50,7 @@
{{ template "item:add_to_dashboard" .Id }} {{ template "item:add_to_dashboard" .Id }}
{{ end }} {{ end }}
<button hx-target="#modal-container" hx-get="/item/share/{{.Id}}" title="Share"><i class='bi bi-share-fill'></i></button> <button href="#" hx-target="#dialog-container" hx-get="/item/share/{{.Id}}" title="Share"><i class="bi bi-share-fill"></i></button>
<button hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit"><i class="bi bi-pencil"></i></button> <button hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit"><i class="bi bi-pencil"></i></button>
<button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button> <button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
</td> </td>

View File

@ -45,18 +45,10 @@
</div> </div>
</div> </div>
<a class="button main hide-small" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" href="#"><i class="bi bi-pencil"></i> Edit</a>
<a class="button main hide-small" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class='bi bi-share-fill'></i> Share</a>
</div> </div>
</div> </div>
<div id="footer-navbar-container"> <div id="footer-navbar">
<div id="footer-navbar" class="bar hide-medium hide-large">
<div class="bar-item">
<a class="button main" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i></a> <a class="button main" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i></a>
</div>
<div class="bar-item">
<a class="button main" hx-get="/item/share/{{.item.Id}}" hx-target="#modal-container" title="Share" href="#"><i class='bi bi-share-fill'></i></a> <a class="button main" hx-get="/item/share/{{.item.Id}}" hx-target="#modal-container" title="Share" href="#"><i class='bi bi-share-fill'></i></a>
</div> </div>
</div>
</div>
{{ end }} {{ end }}

View File

@ -1,11 +1,14 @@
{{define "page:content"}} {{define "page:content"}}
<div id="modal" class="w3-modal"> <dialog role="dialog" aria-modal="true" open>
<div class="w3-modal-content w3-round-large w3-padding w3-animate-top"> <header>
<header class="w3-container" style="margin-bottom: 20px;"> <div style="float:left; max-width: 420px;">
<span _="on click remove #modal"
class="w3-button w3-small w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
<h5><i class="bi bi-share-fill" title="Share"></i> Share item</h5> <h5><i class="bi bi-share-fill" title="Share"></i> Share item</h5>
</div>
<div style="float:right">
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</div>
</header> </header>
<div class="content">
<form> <form>
<h5>{{ .item.Title }}</h5> <h5>{{ .item.Title }}</h5>
<div class="w3-row"> <div class="w3-row">
@ -89,11 +92,10 @@
</fieldset> </fieldset>
<footer class="w3-container"> <footer class="w3-container">
<p style="text-align: center;"> <p style="text-align: center;">
<button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large"><i class='bi bi-share-fill'></i> Share</button> <button type="submit" class="main"><i class='bi bi-share-fill'></i> Share</button>
<button type="button" _="on click remove #modal" class="w3-btn w3-light-gray w3-round-large">Close</button>
</p> </p>
</footer> </footer>
</form> </form>
</div> </div>
</div> </dialog>
{{ end }} {{ end }}

View File

@ -1,13 +1,16 @@
{{define "page:content"}} {{define "page:content"}}
<div id="modal" class="modal"> <dialog role="dialog" aria-modal="true" open>
<div class="modal-content w3-round-large"> <header>
<header class="w3-container" style="margin-bottom: 20px; font-weight: bold;"> <div style="float:left; max-width: 420px;">
<span _="on click remove #modal"
class="w3-button w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 2px;"><i class='bi bi-x-circle-fill'></i></span>
<h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5> <h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5>
</div>
<div style="float:right">
<a class="button main close-dialog" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil close-dialog"></i></a>
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</div>
</header> </header>
<div class="w3-container" style="max-height:600px; overflow: auto;"> <div class="content">
{{ if gt (len .item.Summary) 0}} {{ if gt (len .item.Summary) 0}}
<span style="font-weight: bold;">Summary</span> <span style="font-weight: bold;">Summary</span>
<div class="summary"> <div class="summary">
@ -48,10 +51,6 @@
</div> </div>
</div> </div>
<div class="row" style="margin-bottom: 20px">
<a class="button main" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"_="on click remove #modal" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i> Edit</a>
</div>
</div>
</div>
</div> </div>
</dialog>
{{ end }} {{ end }}

View File

@ -40,19 +40,10 @@
> >
</p> </p>
<p class="hide-small">
<button type="submit" class="main"><i class="bi bi-floppy" title="Save"></i> Save</button>
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/notebooks"><i class="bi bi-arrow-left-circle" title="Back"></i> Back</a>
</p>
</div>
<div id="footer-navbar-container">
<div id="footer-navbar" class="bar hide-medium hide-large">
<div class="bar-item">
<button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large" title="Save"><i class="bi bi-floppy"></i></button>
</div>
<div class="bar-item">
<a class="button secondary" href="/notebooks" hx-get="/notebooks" hx-push-url="true" hx-target="#page-content" title="Back"><i class="bi bi-arrow-left-circle"></i></a>
</div> </div>
<div id="footer-navbar">
<button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
<a class="button secondary" href="/notebooks" hx-get="/notebooks" hx-push-url="true" hx-target="#page-content" title="Back"><i class="bi bi-arrow-left-circle"></i><span>Back</span></a>
</div> </div>
</form> </form>
{{ end }} {{ end }}

View File

@ -16,42 +16,15 @@
<div class="row"> <div class="row">
<div class="col l11 m11 s11"> <div class="col l11 m11 s11">
<h5> <h5>
<a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a> <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#dialog-container"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
<a class="hide-medium hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a> <a class="hide-medium hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
</h5> </h5>
<div class="home-card-summary">{{.Summary | markdownfy | safeHTML}}</div> <div class="home-card-summary">{{.Summary | markdownfy | safeHTML}}</div>
</div> </div>
<div class="col l1 m1 s1"> <div class="col l1 m1 s1">
<a <a class="button" style="float: right; padding: 8px 8px" hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" href="/item/update/{{.Id}}" title="Edit"><i class="bi bi-pencil"></i></a>
class="w3-btn w3-medium w3-round-large" <a class="button" style="float: right; padding: 8px 8px" href="#" hx-target="#dialog-container" hx-get="/item/share/{{.Id}}" title="Share"><i class="bi bi-share-fill"></i> </a>
style="float: right; padding: 8px 8px" <a class="button" style="float: right; padding: 8px 8px" href="#" hx-delete="/item/remove-from-dashboard/{{.Id}}" hx-target="closest .item" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Dashboard', 'Remove this item from the dashboard ?')" title="Remove from dashboard"> <i class="bi bi-pin"></i></a>
hx-get="/item/update/{{.Id}}"
hx-push-url="true"
hx-target="#page-content"
href="/item/update/{{.Id}}"
title="Edit"><i class="bi bi-pencil"></i>
</a>
<a
class="w3-btn w3-medium w3-round-large"
style="float: right; padding: 8px 8px"
href="#"
hx-target="#modal-container"
hx-get="/item/share/{{.Id}}"
title="Share"><i class="bi bi-share-fill"></i>
</a>
<a
class="w3-btn w3-medium w3-round-large"
style="float: right; padding: 8px 8px"
href="#"
hx-delete="/item/remove-from-dashboard/{{.Id}}"
hx-target="closest .item"
hx-swap="outerHTML swap:1s"
hx-trigger="confirmed"
onClick="bm_show_confirm(this, 'Dashboard', 'Remove this item from the dashboard ?')"
title="Remove from dashboard"> <i class="bi bi-pin"></i>
</a>
</div> </div>
</div> </div>

View File

@ -2,7 +2,6 @@
<script src="/static/easymde/easymde.min.js"></script> <script src="/static/easymde/easymde.min.js"></script>
<script src="/static/js/Sortable.min.js"></script> <script src="/static/js/Sortable.min.js"></script>
<script src="/static/js/htmx/htmx.min.js"></script> <script src="/static/js/htmx/htmx.min.js"></script>
<script src="/static/js/hyperscript.min.js"></script>
<script src="/static/js/handlebars.js"></script> <script src="/static/js/handlebars.js"></script>
<script src="/static/js/templates.js"></script> <script src="/static/js/templates.js"></script>
<script src="/static/js/slimselect.min.js"></script> <script src="/static/js/slimselect.min.js"></script>

View File

@ -4,8 +4,8 @@
{{if eq .messageType "success"}} {{ $messageClass = "alert-success"}} {{if eq .messageType "success"}} {{ $messageClass = "alert-success"}}
{{else if eq .messageType "failure"}} {{ $messageClass = "alert-failure"}} {{else if eq .messageType "failure"}} {{ $messageClass = "alert-failure"}}
{{ end }} {{ end }}
<div _="init add .show to #message then wait 5s then remove .show from #message" class="w3-panel {{ $messageClass }} w3-padding-4 w3-round-large"> <div _="init add .show to #message then wait 5s then remove .show from #message" class="hide {{ $messageClass }}">
<p><i class="bi bi-check-circle w3-large"></i> {{.messageContent}}</p> <p><i class="bi bi-check-circle"></i> {{.messageContent}}</p>
<ul> <ul>
{{ range $field, $fieldMessage := .messageFieldErrors }} {{ range $field, $fieldMessage := .messageFieldErrors }}
<li>{{ $fieldMessage }}</li> <li>{{ $fieldMessage }}</li>

View File

@ -115,20 +115,10 @@
</div> </div>
</div> </div>
<p class="hide-small">
<button class="main"><i class="bi bi-floppy" title="Save"></i> Save</button>
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/types"><i class="bi bi-arrow-left-circle" title="Back"></i> Back</a>
</p>
</div>
<div id="footer-navbar-container">
<div id="footer-navbar" class="bar hide-medium hide-large">
<div class="bar-item">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i></button>
</div>
<div class="bar-item">
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/types"><i class="bi bi-arrow-left-circle" title="Back"></i></a>
</div>
</div> </div>
<div id="footer-navbar">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/types"><i class="bi bi-arrow-left-circle" title="Back"></i><span>Back</span></a>
</div> </div>
</form> </form>
{{ end }} {{ end }}