Various UI fixes
This commit is contained in:
parent
53b65e9986
commit
716d427805
@ -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%
|
||||
}
|
||||
|
@ -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 = ''
|
||||
|
@ -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>
|
||||
|
@ -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 }}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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="{"Tags" : "{{.}}"}">{{ . }}</a>
|
||||
</div>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user