roberto/BrainMinder
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Various UI fixes

Browse Source
This commit is contained in:
roberto 2024-12-13 17:56:43 +01:00
parent 716d427805
commit a76d0739ba
14 changed files with 93 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
assets/static/css/main.css
View File

@ -425,7 +425,8 @@ th.operations, td.operations {
height: 50px;
background-color: var(--primary-color);
color: #ffffff;
font-size: 1.4rem;
font-size: 1.25rem;
font-weight: bold;
padding-left: 8px;
width: 300px;
display: flex;
@ -738,7 +739,6 @@ th.operations, td.operations {
position: fixed;
display: none;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
right: 0;
@ -779,19 +779,6 @@ th.operations, td.operations {
padding-right: 10px;
}
#quickbox-footer {
position:fixed;
bottom:0;
background-color: #999999;
}
#quickbox-content {
height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-topbar-height));
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
.quickbox-row {
border: 1px solid #cccccc;
display: block;
@ -824,6 +811,37 @@ th.operations, td.operations {
overflow: hidden;
}
.quickbox-row {
margin-top: 4px;
margin-bottom: 4px;
background-color: #fff;
}
#quickbox-notes div:nth-child(2n+1) {
background-color: #fafafa;
}
#quickbox-footer {
position:fixed;
bottom:0;
width:100%;
}
#quickbox-footer > form {
margin:4px;
border-radius: 8px;
border:2px solid #999999;
background-color: #999999;
}
#quickbox-content {
height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-topbar-height));
overflow: auto;
display: flex;
flex-direction: column-reverse;
padding: 4px;
}
#quickbox-content .buttons :first-child {
margin-bottom: 4px;
}
@ -838,6 +856,11 @@ th.operations, td.operations {
padding: 2px;
}
#quickbox-footer > form > div {
display:flex;
align-items: center
}
#quickbox-footer:after, #quickbox-footer:before {
content: "";
display: table;
@ -846,7 +869,6 @@ th.operations, td.operations {
#notesend {
width: 50px;
float: right;
}
#notesend button {
@ -855,24 +877,13 @@ th.operations, td.operations {
}
#notetext {
padding-right: 4px;
overflow: hidden;
display: block;
padding-left: 2px;
flex-grow: 1;
}
#notetext textarea {
resize: none;
padding: 0px;
}
.quickbox-row {
margin-top: 4px;
margin-bottom: 4px;
background-color: #fff;
}
#quickbox-notes div:nth-child(2n+1) {
background-color: #fafafa;
padding: 0;
}
.hide,.hidden {
@ -914,7 +925,7 @@ dialog::backdrop {
}
dialog header {
margin-bottom: 20px;
height: 40px;
font-weight: bold;
}
@ -929,6 +940,14 @@ dialog .content {
overflow: auto;
}
#dialog-confirm {
min-width: 300px;
}
dialog.share {
min-width: 400px;
}
/* Small */
@media (max-width: 568px) {
body.full {
@ -1024,7 +1043,6 @@ dialog .content {
position: fixed;
top: 54px;
left: calc(100vw - 420px);
height: calc(100vh - 46px);
background-color: #fff !important;
border: 2px solid var(--primary-color);
border-radius: 8px;

12
assets/static/js/main.js
View File

@ -140,13 +140,13 @@ function bm_toggle_quickbox() {
}
}
function bm_show_confirm(sender, title, message) {
document.querySelector("#dialog-confirm h5").innerHTML = title;
document.querySelector("#dialog-confirm p").innerHTML = message;
document.querySelector("#dialog-confirm").showModal();
function bm_show_confirm_delete(sender, title, message) {
document.querySelector("#dialog-confirm-delete h5").innerHTML = title;
document.querySelector("#dialog-confirm-delete p").innerHTML = message;
document.querySelector("#dialog-confirm-delete").showModal();
document.getElementById("modal-confirm-ok").addEventListener('click', (event) => {
htmx.trigger(sender, 'confirmed', null);
document.querySelector("#dialog-confirm").close();
document.querySelector("#dialog-confirm-delete").close();
});
}
@ -176,7 +176,7 @@ document.addEventListener("DOMContentLoaded", function(event){
);
*/
document.querySelector('#dialog-confirm').addEventListener('click', (event) => {
document.querySelector('.dialog-confirm').addEventListener('click', (event) => {
if (event.target.classList.contains("close-dialog")) {
event.target.closest('dialog').close();
}

13
assets/templates/base.tmpl
View File

@ -46,7 +46,7 @@
<div id="message"></div>
<div id="overlay" onclick="bm_overlay_off('main-sidebar')"></div>
<dialog role="dialog" id="dialog-confirm">
<dialog class="dialog-confirm" id="dialog-confirm-delete">
<header>
<div style="float:left; max-width: 420px;">
<h5></h5>
@ -57,10 +57,9 @@
</header>
<p style="clear: both"></p>
<footer class="w3-container">
<footer>
<p style="text-align: center;">
<button id="modal-confirm-ok">Ok</button>
<button class="close-dialog">Cancel</button>
<button id="modal-confirm-ok" class="delete">Delete</button>
</p>
</footer>
</dialog>
@ -80,11 +79,11 @@
<div id="quickbox-notes"></div>
</div>
<div id="quickbox-footer" class="bar">
<div id="quickbox-footer">
<form method="POST">
<div class="row">
<div id="notesend"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend"><i class='bi bi-caret-right-square-fill'></i></button></div>
<div>
<div id="notetext"><textarea required name="Note"></textarea></div>
<div id="notesend"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend"><i class='bi bi-caret-right-square-fill'></i></button></div>
</div>
</form>
</div>

2
assets/templates/categories/list.tmpl
View File

@ -48,7 +48,7 @@
</td>
<td data-label="" class="operations">
<button hx-get="/category/update/{{.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-pencil"></i></button>
<button hx-delete="/category/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Categories', 'Delete this category ?')"><i class="bi bi-trash"></i>
<button hx-delete="/category/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm_delete(this, 'Categories', 'Delete this category ?')"><i class="bi bi-trash"></i>
</button>
</td>
</tr>

2
assets/templates/items/all_list_rows.tmpl
View File

@ -44,7 +44,7 @@
<button href="#" hx-target="body" hx-swap="beforeend" 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-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_delete(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
</td>
</tr>
{{ end }}

6
assets/templates/items/form.tmpl
View File

@ -108,10 +108,10 @@
<div id="footer-navbar">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
{{ if not (eq .item.Id 0) }}
<a class="button secondary hide-small" href="/item/view/{{.item.Id}}" hx-get="/item/view/{{.item.Id}}" hx-target="body" hx-swap="beforeend"><i class="bi bi-binoculars"></i><span>View</span></a>
<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 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>
<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>
<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 delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm_delete(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i><span>Delete</span></a>
<a class="button secondary" href="#" hx-target="body" hx-swap="beforeend" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i><span>Share</span></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><span>Back</span></a>
</div>

2
assets/templates/items/list_rows.tmpl
View File

@ -52,7 +52,7 @@
<button href="#" hx-target="body" hx-swap="beforeend" 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-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_delete(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
</td>
</tr>
{{ end }}

61
assets/templates/items/share.tmpl
View File

@ -1,78 +1,54 @@
{{define "page:content"}}
<dialog id="dialog">
<dialog id="dialog" class="share">
<header>
<div style="float:left; max-width: 420px;">
<h5><i class="bi bi-share-fill" title="Share"></i> Share item</h5>
</div>
<div style="float:right">
<button type="submit" class="main" title="Share"><i class='bi bi-share-fill'></i></button>
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</div>
</header>
<div class="content">
<form>
<h5>{{ .item.Title }}</h5>
<div class="w3-row">
<div class="w3-col l6">
<div class="row">
<div class="col l6">
<p style="margin-right: 6px">
<label for="share-start-datetime">Start date time</label>
<input
name="start-datetime"
class=" w3-border"
id="share-start-datetime"
type="datetime-local"
value=""
/>
<input name="start-datetime" id="share-start-datetime" type="datetime-local" value=""/>
</p>
</div>
<div class="w3-col l6">
<div class="col l6">
<p>
<label for="share-end-datetime">End date time</label>
<input
name="end-datetime"
class=" w3-border"
id="share-end-datetime"
type="datetime-local"
value=""
/>
<input name="end-datetime" id="share-end-datetime" type="datetime-local" value=""/>
</p>
</div>
</div>
<div class="w3-row">
<div class="w3-col l12">
<div class="row">
<div class="col l12">
<p style="margin-right: 6px">
<label for="share-token">Share Url</label>
<div class="input-container">
<span class="prefix">{{ .baseUrl }}/</span>
<input
name="token"
class="w3-border"
id="share-token"
type="url"
readonly="readonly"
value="{{ .shareToken }}"
/>
<input name="token" id="share-token" type="url" readonly="readonly" value="{{ .shareToken }}" />
</div>
</p>
</div>
</div>
<div class="w3-row">
<div class="w3-col l12">
<div class="row">
<div class="col l12">
<p style="margin-right: 6px">
<label for="share-password">Password</label>
<input
name="password"
class=" w3-border"
id="share-password"
type="password"
value=""
/>
<input name="password" id="share-password" type="password" value=""/>
</p>
</div>
</div>
<fieldset>
<legend>Permissions</legend>
<div class="w3-row">
<div class="w3-col l6">
<div class="row">
<div class="col l6">
<p>
<label class="switch">
<input class="" name="read" type="checkbox" value="1" checked="checked">
@ -80,7 +56,7 @@
</label><span class="label-checkbox">Read</span>
</p>
</div>
<div class="w3-col l6">
<div class="col l6">
<p>
<label class="switch">
<input class="" name="edit" type="checkbox" value="1">
@ -90,11 +66,6 @@
</div>
</div>
</fieldset>
<footer class="w3-container">
<p style="text-align: center;">
<button type="submit" class="main"><i class='bi bi-share-fill'></i> Share</button>
</p>
</footer>
</form>
</div>
</dialog>

2
assets/templates/items/view.tmpl
View File

@ -1,5 +1,5 @@
{{define "page:content"}}
<dialog id="dialog">
<dialog id="dialog" class="view">
<header>
<div style="float:left; max-width: 420px;">
<h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5>

2
assets/templates/notebooks/form.tmpl
View File

@ -42,7 +42,7 @@
</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>
<button type="submit" class="main" 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>
</form>

2
assets/templates/notebooks/list.tmpl
View File

@ -47,7 +47,7 @@
<td class="title" data-label="Title"><i class="{{.Icon}}"></i> {{.Title}}</td>
<td class="operations">
<button hx-get="/notebook/update/{{.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-pencil"></i></button>
<button hx-delete="/notebook/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Notebooks', 'Delete this notebook ?')"><i class="bi bi-trash"></i></button>
<button hx-delete="/notebook/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm_delete(this, 'Notebooks', 'Delete this notebook ?')"><i class="bi bi-trash"></i></button>
</td>
</tr>
{{ end }}

9
assets/templates/quickbox/list.tmpl
View File

@ -6,15 +6,12 @@
{{ if eq $rowCount 10 }}
{{ $offset := addI $.offset $rowCount}}
{{ if gt $offset -1 }}
hx-get="/quickbox/all?offset={{ $offset }}"
hx-trigger="intersect once"
hx-swap="afterbegin"
hx-target="#quickbox-notes"
hx-get="/quickbox/all?offset={{ $offset }}" hx-trigger="intersect once" hx-swap="afterbegin" hx-target="#quickbox-notes"
{{ end }}
{{ end }}>
<div class="buttons">
<button class="button" hx-delete="/quickbox/delete/{{.Id}}" hx-target="closest div.quickbox-row" hx-swap="outerHTML swap:1s" hx-trigger='confirmed' onClick="bm_show_confirm(this, 'Quickbox', 'Delete this note ?')"><i class="bi bi-dash-square"></i></button>
<button class="button" hx-target="#modal-container" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
<button class="button" hx-delete="/quickbox/delete/{{.Id}}" hx-target="closest div.quickbox-row" hx-swap="outerHTML swap:1s" hx-trigger='confirmed' onClick="bm_show_confirm_delete(this, 'Quickbox', 'Delete this note ?')"><i class="bi bi-dash-square"></i></button>
<button class="button" href="#" hx-target="body" hx-swap="beforeend" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
</div>
<div class="note">{{.Note_rendered | safeHTML}}</div>
</div>

4
assets/templates/quickbox/transform.tmpl
View File

@ -1,5 +1,5 @@
{{define "page:content"}}
<div id="modal" class="w3-modal w3-modal-full">
<dialog class="quickbox-transform">
<div class="w3-modal-content w3-round-large w3-animate-top">
<header class="w3-container">
<h5>
@ -103,5 +103,5 @@
</div>
</form>
</div>
</div>
</dialog>
{{ end }}

2
assets/templates/types/list.tmpl
View File

@ -47,7 +47,7 @@
<td class="title" data-label="Title">{{.Title}}</td>
<td class="operations">
<button hx-get="/type/update/{{.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-pencil"></i></button>
<button hx-delete="/type/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Types', 'Delete this type ?')"><i class="bi bi-trash"></i></button>
<button hx-delete="/type/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm_delete(this, 'Types', 'Delete this type ?')"><i class="bi bi-trash"></i></button>
</td>
</tr>
{{ end }}