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

13
assets/templates/base.tmpl
View File

@ -46,7 +46,7 @@
<div id="message"></div> <div id="message"></div>
<div id="overlay" onclick="bm_overlay_off('main-sidebar')"></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> <header>
<div style="float:left; max-width: 420px;"> <div style="float:left; max-width: 420px;">
<h5></h5> <h5></h5>
@ -57,10 +57,9 @@
</header> </header>
<p style="clear: both"></p> <p style="clear: both"></p>
<footer class="w3-container"> <footer>
<p style="text-align: center;"> <p style="text-align: center;">
<button id="modal-confirm-ok">Ok</button> <button id="modal-confirm-ok" class="delete">Delete</button>
<button class="close-dialog">Cancel</button>
</p> </p>
</footer> </footer>
</dialog> </dialog>
@ -80,11 +79,11 @@
<div id="quickbox-notes"></div> <div id="quickbox-notes"></div>
</div> </div>
<div id="quickbox-footer" class="bar"> <div id="quickbox-footer">
<form method="POST"> <form method="POST">
<div class="row"> <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 id="notetext"><textarea required name="Note"></textarea></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> </div>
</form> </form>
</div> </div>

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

@ -48,7 +48,7 @@
</td> </td>
<td data-label="" class="operations"> <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-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> </button>
</td> </td>
</tr> </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 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-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> </td>
</tr> </tr>
{{ end }} {{ end }}

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

@ -108,10 +108,10 @@
<div id="footer-navbar"> <div id="footer-navbar">
<button type="submit" class="main" 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>
{{ if not (eq .item.Id 0) }} {{ 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-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_delete(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i><span>Delete</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="body" hx-swap="beforeend" 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="#dialog-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i><span>Share</span></a>
{{ end }} {{ 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> <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>

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 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-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> </td>
</tr> </tr>
{{ end }} {{ end }}

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

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

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

@ -1,5 +1,5 @@
{{define "page:content"}} {{define "page:content"}}
<dialog id="dialog"> <dialog id="dialog" class="view">
<header> <header>
<div style="float:left; max-width: 420px;"> <div style="float:left; max-width: 420px;">
<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>

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

@ -42,7 +42,7 @@
</div> </div>
<div id="footer-navbar"> <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> <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>

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="title" data-label="Title"><i class="{{.Icon}}"></i> {{.Title}}</td>
<td class="operations"> <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-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> </td>
</tr> </tr>
{{ end }} {{ end }}

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

@ -6,15 +6,12 @@
{{ if eq $rowCount 10 }} {{ if eq $rowCount 10 }}
{{ $offset := addI $.offset $rowCount}} {{ $offset := addI $.offset $rowCount}}
{{ if gt $offset -1 }} {{ if gt $offset -1 }}
hx-get="/quickbox/all?offset={{ $offset }}" hx-get="/quickbox/all?offset={{ $offset }}" hx-trigger="intersect once" hx-swap="afterbegin" hx-target="#quickbox-notes"
hx-trigger="intersect once"
hx-swap="afterbegin"
hx-target="#quickbox-notes"
{{ end }} {{ end }}
{{ end }}> {{ end }}>
<div class="buttons"> <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-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" hx-target="#modal-container" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></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>
<div class="note">{{.Note_rendered | safeHTML}}</div> <div class="note">{{.Note_rendered | safeHTML}}</div>
</div> </div>

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

@ -1,5 +1,5 @@
{{define "page:content"}} {{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"> <div class="w3-modal-content w3-round-large w3-animate-top">
<header class="w3-container"> <header class="w3-container">
<h5> <h5>
@ -103,5 +103,5 @@
</div> </div>
</form> </form>
</div> </div>
</div> </dialog>
{{ end }} {{ end }}

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

@ -47,7 +47,7 @@
<td class="title" data-label="Title">{{.Title}}</td> <td class="title" data-label="Title">{{.Title}}</td>
<td class="operations"> <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-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> </td>
</tr> </tr>
{{ end }} {{ end }}