Dialog UI fixes

This commit is contained in:
roberto 2024-12-15 20:35:52 +01:00
parent 1a11db7d6c
commit a7ba6145b2
5 changed files with 32 additions and 75 deletions

View File

@ -920,6 +920,19 @@ dialog {
z-index:100;
}
dialog header {
display: flex;
align-items: center
}
dialog header h5 {
flex-grow:1;
}
dialog header .close {
text-align: end;
}
dialog::backdrop {
opacity: 0.7;
}
@ -944,7 +957,7 @@ dialog .content {
min-width: 300px;
}
dialog.share {
dialog.share, dialog.quickbox-transform {
min-width: 400px;
}

View File

@ -48,13 +48,10 @@
<dialog class="dialog-confirm" id="dialog-confirm-delete">
<header>
<div style="float:left; max-width: 420px;">
<h5></h5>
</div>
<div style="float:right">
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</div>
<h5></h5>
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</header>
<p style="clear: both"></p>
<footer>

View File

@ -1,13 +1,8 @@
{{define "page:content"}}
<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>
@ -66,6 +61,9 @@
</div>
</div>
</fieldset>
<footer>
<button type="submit" class="main" title="Share"><i class='bi bi-share-fill'></i> Share</button>
</footer>
</form>
</div>
</dialog>

View File

@ -1,15 +1,9 @@
{{define "page:content"}}
<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>
</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>
<h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5>
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</header>
<div class="content">
{{ if gt (len .item.Summary) 0}}
<span style="font-weight: bold;">Summary</span>
@ -50,7 +44,7 @@
{{ end }}
</div>
</div>
<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> Edit</a>
</div>
</dialog>
{{ end }}

View File

@ -1,21 +1,14 @@
{{define "page:content"}}
<dialog id="dialog" class="quickbox-transform">
<header>
<h5>
<i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Quicknote transform
</h5>
</header>
<header>
<h5><i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Quicknote transform</h5>
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</header>
<form hx-post="/quickbox/transform/{{ .quicknote.Id }}" hx-target="#message">
<div class="w3-padding" style="overflow: auto;">
<p>
<label for="item-title">Title</label>
<input
name="Title"
class=" w3-border"
id="item-title"
type="text"
value=""
/>
<input name="Title" id="item-title" type="text" value=""/>
</p>
<div class="w3-row">
<div class="w3-half" style="padding-right: 4px">
@ -33,13 +26,7 @@
<div class="w3-half" style="padding-right: 4px">
<p>
<label for="item-tags">Tags</label>
<input
name="Tags"
class=" w3-border"
id="item-tags"
type="text"
value=""
/>
<input name="Tags" id="item-tags" type="text" value=""/>
</p>
</div>
<div class="w3-half" style="padding-left: 4px">
@ -50,14 +37,7 @@
</div>
<p>
<label for="item-description">Description</label>
<textarea
name="Description"
class=" w3-border"
id="item-description"
type="text"
rows="5"
>{{.quicknote.Note}}</textarea
>
<textarea name="Description" id="item-description" rows="5">{{.quicknote.Note}}</textarea>
</p>
<p>
<label class="switch">
@ -71,35 +51,10 @@
><span class="label-checkbox">Keep in Quickbox</span>
</p>
<p class="hide-small w3-container" style="text-align: center;">
<button
type="submit"
class="w3-btn w3-metro-dark-blue w3-round-large"
>
<i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Transform
</button>
<button
type="button"
_="on click remove #modal"
class="w3-btn w3-light-gray w3-round-large"
>
Cancel
</button>
<button class="main"><i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Transform</button>
</p>
</div>
<div class="footerNavbar-container" style="padding-left:8px;">
<div class="w3-bar footerNavbar hide-medium hide-large w3-round-large">
<div class="w3-bar-item">
<button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large">
<i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i>
</button>
</div>
<div class="w3-bar-item">
<button type="button" _="on click remove #modal" class="w3-btn w3-metro-dark-blue w3-round-large">
<i class="bi bi-x-circle-fill"></i>
</button>
</div>
</div>
</div>
</form>
</dialog>
{{ end }}