CSS rework

This commit is contained in:
roberto 2024-12-03 17:55:25 +01:00
parent 6531c9ecaf
commit 7eac6b45c1
3 changed files with 58 additions and 26 deletions

View File

@ -697,6 +697,10 @@ input[type='text']{
width: 100% width: 100%
} }
.col.rest {
overflow: hidden;
}
.col.s1 { .col.s1 {
width: 8.33333% width: 8.33333%
} }
@ -781,8 +785,22 @@ input[type='text']{
z-index: 5; z-index: 5;
} }
#quickbox-title {
float: left;
margin-left: 8px;
margin-top: 10px;
}
#quickbox-close {
float: right;
margin-top: 4px;
}
#quickbox-top-bar { #quickbox-top-bar {
color: #fff;
background-color: var(--primary-color);
height: var(--quickbox-topbar-height); height: var(--quickbox-topbar-height);
font-size: 18px;
} }
#quickbox-footer { #quickbox-footer {
@ -797,14 +815,38 @@ input[type='text']{
flex-direction: column-reverse; flex-direction: column-reverse;
} }
#quickbox-content .w3-button { .quickbox-row {
border: 1px solid #cccccc;
display: block;
width: 100%;
padding: 8px 16px;
border-radius: 8px;
}
.quickbox-row:before {
content: "";
display: table;
}
.quickbox-row:after {
content: "";
display: table;
clear: both;
}
#quickbox-content .button {
padding: 6px 10px; padding: 6px 10px;
} }
#quickbox-content .buttons { .quickbox-row .buttons {
float: right;
width: 32px; width: 32px;
} }
.quickbox-row .note {
overflow: hidden;
}
#quickbox-content .buttons :first-child { #quickbox-content .buttons :first-child {
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -836,13 +878,10 @@ input[type='text']{
.quickbox-row { .quickbox-row {
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
}
#quickbox-content .w3-row {
background-color: #fff; background-color: #fff;
} }
#quickbox-content div:nth-child(2n+1) { #quickbox-notes div:nth-child(2n+1) {
background-color: #fafafa; background-color: #fafafa;
} }

View File

@ -67,20 +67,15 @@
</div> </div>
</div> </div>
<div id="quickbox" class="w3-light-gray"> <div id="quickbox">
<div class="w3-bar w3-top w3-metro-dark-blue w3-large noswipe" id="quickbox-top-bar"> <div class="noswipe" id="quickbox-top-bar">
<div class="w3-bar-item" id="quickbox-title-container"> <button type="button" class="w3-bar-item w3-button hide-large w3-hover-none w3-hover-text-light-grey" onclick="bm_toggle_sidebar('main-sidebar');" style="padding-left: 4px; padding-right: 10px;">
<button type="button" class="w3-bar-item w3-button hide-large w3-hover-none w3-hover-text-light-grey" <img alt="BrainMinder" src="/static/img/brainminder.svg" style="height: 32px;">
onclick="bm_toggle_sidebar('main-sidebar');" style="padding-left: 4px; padding-right: 10px;"> </button>
<img class="hide-large" alt="BrainMinder" src="/static/img/brainminder.svg" style="height: 32px;"> <div id="quickbox-title">Quickbox</div>
</button> <div id="quickbox-close">
<div id="quickbox-title"> <button class="button" onclick="bm_hide_quickbox()"><i class="bi bi-x-circle-fill" style="margin-top: 4px;"></i></button>
<div class="w3-left"><h5>Quickbox</h5></div>
<div class="w3-right" style="margin-top: 6px; margin-right: 12px;">
<button class="w3-button w3-medium w3-round-large" style="padding: 2px 6px;" onclick="bm_hide_quickbox()"><i class="bi bi-x-circle-fill" style="margin-top: 4px;"></i></button>
</div> </div>
</div>
</div>
</div> </div>
<div id="quickbox-content"> <div id="quickbox-content">

View File

@ -1,7 +1,7 @@
{{define "quickbox:list"}} {{define "quickbox:list"}}
{{ $rowCount := 0 }} {{ $rowCount := 0 }}
{{ range .quicknotes}} {{ range .quicknotes}}
<div id="quicknote-{{.Id}}" class="w3-row w3-container w3-border w3-padding w3-round-large quickbox-row" <div id="quicknote-{{.Id}}" class="quickbox-row"
{{ $rowCount = incr $rowCount}} {{ $rowCount = incr $rowCount}}
{{ if eq $rowCount 10 }} {{ if eq $rowCount 10 }}
{{ $offset := addI $.offset $rowCount}} {{ $offset := addI $.offset $rowCount}}
@ -12,13 +12,11 @@ hx-swap="afterbegin"
hx-target="#quickbox-notes" hx-target="#quickbox-notes"
{{ end }} {{ end }}
{{ end }}> {{ end }}>
<div class="w3-col w3-right buttons"> <div class="buttons">
<button class="w3-button w3-delete w3-small w3-border w3-round-large" hx-delete="/quickbox/delete/{{.Id}}" hx-target="closest div.w3-row" hx-swap="outerHTML swap:1s" hx-trigger='confirmed' <button class="button" hx-delete="/quickbox/delete/{{.Id}}" hx-target="closest div.w3-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>
onClick="bm_show_confirm(this, 'Quickbox', 'Delete this note ?')"> <button class="button" hx-target="#modal-container" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
<i class="bi bi-dash-square"></i></button>
<button class="w3-button w3-edit w3-small w3-border w3-round-large" hx-target="#modal-container" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
</div> </div>
<div class="w3-rest">{{.Note_rendered | safeHTML}}</div> <div class="note">{{.Note_rendered | safeHTML}}</div>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}