Various UI fixes

This commit is contained in:
roberto 2024-12-12 17:50:19 +01:00
parent 53b65e9986
commit 716d427805
12 changed files with 53 additions and 39 deletions

View File

@ -63,7 +63,7 @@ a {
body {
color: #000 !important;
background-color: #f1f1f1 !important;
background-color: #f1f1f1;
}
html {
@ -184,7 +184,7 @@ ul {
}
ul li {
padding: 8px 16px;
padding: 8px 0px;
border-bottom: 1px solid #ddd
}
@ -371,7 +371,6 @@ th.operations, td.operations {
}
#form-login {
width: 600px;
background-color: var(--primary-color);
color: #ffffff;
position: absolute;
@ -910,12 +909,8 @@ dialog {
z-index:100;
}
#dialog-container dialog {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: auto;
dialog::backdrop {
opacity: 0.7;
}
dialog header {
@ -936,6 +931,18 @@ dialog .content {
/* Small */
@media (max-width: 568px) {
body.full {
background-color: var(--primary-color);
}
body.full input {
padding: 4px;
}
#form-login {
width: 100%;
}
#page-title-container {
display: flex;
align-items: center;
@ -1006,6 +1013,7 @@ dialog .content {
/* Min medium */
@media (min-width:601px) {
.home-card-summary {
height: 250px;
overflow: auto;
@ -1014,12 +1022,12 @@ dialog .content {
#quickbox {
width: 400px;
position: fixed;
top: 50px;
top: 54px;
left: calc(100vw - 420px);
height: calc(100vh - 50px);
height: calc(100vh - 46px);
background-color: #fff !important;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border: 2px solid var(--primary-color);
border-radius: 8px;
}
#quickbox-top-bar {
position: relative;
@ -1036,6 +1044,10 @@ dialog .content {
/* Medium */
@media (min-width: 768px) {
#form-login{
width: 600px;
}
.col.m1 {
width: 8.33333%
}

View File

@ -180,14 +180,18 @@ document.addEventListener("DOMContentLoaded", function(event){
if (event.target.classList.contains("close-dialog")) {
event.target.closest('dialog').close();
}
})
});
document.querySelector('#dialog-container').addEventListener('click', (event) => {
document.querySelector('body').addEventListener('click', (event) => {
if (event.target.classList.contains("close-dialog")) {
event.target.closest('dialog').close();
event.target.closest('dialog').remove();
event.target.closest('#dialog').close();
event.target.closest('#dialog').remove();
}
})
});
document.body.addEventListener("showModalDialog", function(evt){
document.getElementById("dialog").showModal();
});
document.body.addEventListener("quickboxNoteClear", function(evt){
document.getElementById("quickbox-note").value = ''

View File

@ -17,7 +17,7 @@
end
}}
</head>
<body hx-headers='{"X-CSRF-TOKEN": "{{ .CSRFToken }}"}'>
<body class="base" hx-headers='{"X-CSRF-TOKEN": "{{ .CSRFToken }}"}'>
{{template "partial:sidebar" .}}
<div id="page-main">
<div id="page-top-bar">
@ -45,7 +45,6 @@
{{template "partial:footer" .}}
<div id="message"></div>
<div id="overlay" onclick="bm_overlay_off('main-sidebar')"></div>
<div id="dialog-container"></div>
<dialog role="dialog" id="dialog-confirm">
<header>

View File

@ -14,11 +14,10 @@
end
}}
</head>
<body>
<body class="full">
<div id="full-main-container">
<div id="page-content">{{template "page:content" .}}</div>
</div>
{{template "partial:footer" .}}
</body>
</html>
{{ end }}

View File

@ -42,7 +42,7 @@
{{ template "item:add_to_dashboard" .Id }}
{{ end }}
<button href="#" hx-target="#dialog-container" 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-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>

View File

@ -50,7 +50,7 @@
{{ template "item:add_to_dashboard" .Id }}
{{ end }}
<button href="#" hx-target="#dialog-container" 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-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>

View File

@ -21,10 +21,9 @@
{{ template "item:relations_view" .}}
<div class="row">
<div class="half">
<div class="col s6">
{{if gt (len .item.Categories) 0 }}
<i class="hide-medium hide-large bi bi-tags-fill"></i>
<strong class="hide-small">Categories</strong>
<p><i class="bi bi-tags-fill"></i><strong>Categories</strong></p>
{{ range (stringToArray .item.Categories "|")}}
{{ $category_name := index $.categoriesMap .}}
<div class="tag" style="padding: 3px">
@ -33,10 +32,10 @@
{{ end }}
{{ end }}
</div>
<div class="half">
<div class="col s6">
{{if gt (len .item.Tags) 0 }}
<i class="hide-medium hide-large bi bi-tags"></i>
<strong class="hide-small">Tags</strong> {{ range (stringToArray .item.Tags ",")}}
<p><i class="bi bi-tags"></i><strong>Tags</strong></p>
{{ range (stringToArray .item.Tags ",")}}
<div class="tag" style="padding: 3px">
<a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{&quot;Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
</div>

View File

@ -1,5 +1,5 @@
{{define "page:content"}}
<dialog role="dialog" aria-modal="true" open>
<dialog id="dialog">
<header>
<div style="float:left; max-width: 420px;">
<h5><i class="bi bi-share-fill" title="Share"></i> Share item</h5>

View File

@ -1,5 +1,5 @@
{{define "page:content"}}
<dialog role="dialog" aria-modal="true" open>
<dialog id="dialog">
<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>

View File

@ -16,14 +16,14 @@
<div class="row">
<div class="col l11 m11 s11">
<h5>
<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-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="body" hx-swap="beforeend"><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>
<div class="home-card-summary">{{.Summary | markdownfy | safeHTML}}</div>
</div>
<div class="col l1 m1 s1">
<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>
<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>
<a class="button" style="float: right; padding: 8px 8px" href="#" hx-target="body" hx-swap="beforeend" hx-get="/item/share/{{.Id}}" title="Share"><i class="bi bi-share-fill"></i> </a>
<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>
</div>
</div>

View File

@ -20,12 +20,12 @@
<div id="sidebar-search" class="hide-large">
<form method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" hx-on:submit="bm_sidebar_click('main-sidebar')">
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
<div class="row">
<div class="threequarter">
<div style="display: flex;">
<div style="flex-grow:1">
<input type="text" id="searchText" name="SearchText" placeholder="Search.." />
</div>
<div class="quarter">
<button type="submit" class="w3-right w3-button w3-round-large w3-metro-dark-blue" style="padding: 4px 8px; margin-top: 5px; margin-right: 8px;"><i class='bi bi-search'></i></button>
<div>
<button type="submit" class="main" style="padding: 4px 8px; margin-top: 5px; margin-left: 4px; margin-right: 4px;"><i class='bi bi-search'></i></button>
</div>
</div>
</form>

View File

@ -665,6 +665,7 @@ func (app *application) itemView(w http.ResponseWriter, r *http.Request) {
if err != nil {
app.serverError(w, r, err)
}
w.Header().Add("HX-Trigger-After-Settle", `{"showModalDialog": ""}`)
fullBuf.WriteTo(w)
} else {
err := response.Page(w, http.StatusOK, data, []string{"items/read_title.tmpl", "items/relations_view.tmpl", "items/read.tmpl"})
@ -673,7 +674,6 @@ func (app *application) itemView(w http.ResponseWriter, r *http.Request) {
}
}
w.WriteHeader(http.StatusOK)
}
@ -916,6 +916,7 @@ func (app *application) itemShare(w http.ResponseWriter, r *http.Request) {
app.serverError(w, r, err)
}
w.Header().Add("HX-Trigger-After-Settle", `{"showModalDialog": ""}`)
fullBuf.WriteTo(w)
case http.MethodPost:
var itemShareFromForm itemShareForm