From 0cc0794807c32abcbe399edfd77e81ca29cd9adc Mon Sep 17 00:00:00 2001 From: roberto Date: Sun, 8 Dec 2024 21:07:22 +0100 Subject: [PATCH] CSS and HTM rework --- assets/static/css/main.css | 11 +- assets/static/css/orig.css | 888 ------------------------- assets/static/js/main.js | 6 +- assets/templates/categories/form.tmpl | 35 +- assets/templates/categories/list.tmpl | 48 +- assets/templates/items/form.tmpl | 13 +- assets/templates/items/read.tmpl | 62 +- assets/templates/items/read_title.tmpl | 10 +- assets/templates/notebooks/form.tmpl | 39 +- assets/templates/notebooks/list.tmpl | 49 +- assets/templates/partials/sidebar.tmpl | 4 +- assets/templates/types/form.tmpl | 35 +- assets/templates/types/list.tmpl | 42 +- 13 files changed, 90 insertions(+), 1152 deletions(-) delete mode 100644 assets/static/css/orig.css diff --git a/assets/static/css/main.css b/assets/static/css/main.css index 5def876..9bae449 100644 --- a/assets/static/css/main.css +++ b/assets/static/css/main.css @@ -540,10 +540,6 @@ th.operations, td.operations { padding: 4px; } -#sidebar-search { - display: none; -} - .sidebar-menu a { width: 100%; display: block; @@ -813,7 +809,6 @@ th.operations, td.operations { } #quickbox-footer { - height: var(--quickbox-footer-height); position:fixed; bottom:0; background-color: #999999; @@ -922,6 +917,10 @@ th.operations, td.operations { padding-left: 0; } +#item h5 { + font-size: 18px; +} + /* Small */ @media (max-width: 568px) { #page-title-container { @@ -1074,7 +1073,7 @@ th.operations, td.operations { } } -@media (min-width:60px) { +@media (min-width:601px) { .col.half { width: 49.99999%; } diff --git a/assets/static/css/orig.css b/assets/static/css/orig.css deleted file mode 100644 index 9564475..0000000 --- a/assets/static/css/orig.css +++ /dev/null @@ -1,888 +0,0 @@ -.w3-disabled, -.w3-btn:disabled, -.w3-button:disabled { - cursor: not-allowed; - opacity: 0.3 -} - -.w3-disabled *, -:disabled * { - pointer-events: none -} - -.w3-btn.w3-disabled:hover, -.w3-btn:disabled:hover { - box-shadow: none -} - -.w3-badge, -.w3-tag { - background-color: #000; - color: #fff; - display: inline-block; - padding-left: 8px; - padding-right: 8px; - text-align: center -} - -.w3-badge { - border-radius: 50% -} - -.w3-tooltip, -.w3-display-container { - position: relative -} - -.w3-tooltip .w3-text { - display: none -} - -.w3-tooltip:hover .w3-text { - display: inline-block -} - -.w3-ripple:active { - opacity: 0.5 -} - -.w3-ripple { - transition: opacity 0s -} - -.w3-bar-block .w3-dropdown-hover, -.w3-bar-block .w3-dropdown-click { - width: 100% -} - -.w3-bar-block .w3-dropdown-hover .w3-dropdown-content, -.w3-bar-block .w3-dropdown-click .w3-dropdown-content { - min-width: 100% -} - -.w3-bar-block .w3-dropdown-hover .w3-button, -.w3-bar-block .w3-dropdown-click .w3-button { - width: 100%; - text-align: left; - padding: 8px 16px -} - -.w3-main, -#main { - transition: margin-left .4s -} - -.w3-block { - display: block; - width: 100% -} - -.w3-responsive { - display: block; - overflow-x: auto -} - -.w3-container:after, -.w3-container:before, -.w3-panel:after, -.w3-panel:before, -.w3-row:after, -.w3-row:before, -.w3-row-padding:after, -.w3-row-padding:before, -.w3-cell-row:before, -.w3-cell-row:after, -.w3-clear:after, -.w3-clear:before, -.w3-bar:before, -.w3-bar:after { - content: ""; - display: table; - clear: both -} - -.w3-rest { - overflow: hidden -} - -.w3-stretch { - margin-left: -16px; - margin-right: -16px -} - -.w3-content, -.w3-auto { - margin-left: auto; - margin-right: auto -} - -.w3-content { - max-width: 980px -} - -.w3-auto { - max-width: 1140px -} - -.w3-cell-row { - display: table; - width: 100% -} - -.w3-cell { - display: table-cell -} - -.w3-cell-top { - vertical-align: top -} - -.w3-cell-middle { - vertical-align: middle -} - -.w3-cell-bottom { - vertical-align: bottom -} - -.w3-show-inline-block { - display: inline-block !important -} - -@media (max-width:1205px) { - .w3-auto { - max-width: 95% - } -} - -@media (max-width:600px) { - .w3-modal-content { - margin: 0 10px; - width: auto !important - } - - .w3-modal { - padding-top: 30px - } - - .w3-dropdown-hover.w3-mobile .w3-dropdown-content, - .w3-dropdown-click.w3-mobile .w3-dropdown-content { - position: relative - } - - .w3-mobile { - display: block; - width: 100% !important - } - - .w3-bar-item.w3-mobile, - .w3-dropdown-hover.w3-mobile, - .w3-dropdown-click.w3-mobile { - text-align: center - } - - .w3-dropdown-hover.w3-mobile, - .w3-dropdown-hover.w3-mobile .w3-btn, - .w3-dropdown-hover.w3-mobile .w3-button, - .w3-dropdown-click.w3-mobile, - .w3-dropdown-click.w3-mobile .w3-btn, - .w3-dropdown-click.w3-mobile .w3-button { - width: 100% - } -} - -@media (max-width:768px) { - #modal-confirm-dialog-content { - width: 400px; - } - - .w3-modal-content { - width: 500px - } - - .w3-modal { - padding-top: 50px - } -} - -@media (min-width:993px) { - - #modal-confirm-dialog-content { - width: 600px; - } - - .w3-modal-content { - width: 900px - } - -} - -@media (max-width:992px) { - .w3-main { - margin-left: 0 !important; - margin-right: 0 !important - } - - .w3-auto { - max-width: 100% - } -} - -.w3-top, -.w3-bottom { - position: fixed; - width: 100%; - z-index: 1 -} - -.w3-top { - top: 0 -} - -.w3-bottom { - bottom: 0 -} - -.w3-overlay { - position: fixed; - display: none; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 4; -} - -.w3-circle { - border-radius: 50% -} - -.w3-round-small { - border-radius: 2px -} - -.w3-round, -.w3-round-medium { - border-radius: 4px -} - -.w3-round-large { - border-radius: 8px -} - -.w3-round-xlarge { - border-radius: 16px -} - -.w3-round-xxlarge { - border-radius: 32px -} - -.w3-row-padding, -.w3-row-padding>.w3-half, -.w3-row-padding>.w3-third, -.w3-row-padding>.w3-twothird, -.w3-row-padding>.w3-threequarter, -.w3-row-padding>.w3-quarter, -.w3-row-padding>.w3-col { - padding: 0 8px -} - -.w3-container, -.w3-panel { - padding: 0.01em 4px -} - -.w3-panel { - margin-top: 4px; - margin-bottom: 4px -} - -.w3-spin { - animation: w3-spin 2s infinite linear -} - -@keyframes w3-spin { - 0% { - transform: rotate(0deg) - } - - 100% { - transform: rotate(359deg) - } -} - -.w3-animate-fading { - animation: fading 10s infinite -} - -@keyframes fading { - 0% { - opacity: 0 - } - - 50% { - opacity: 1 - } - - 100% { - opacity: 0 - } -} - -.w3-animate-opacity { - animation: opac 0.8s -} - -@keyframes opac { - from { - opacity: 0 - } - - to { - opacity: 1 - } -} - -.w3-animate-top { - position: relative; - animation: animatetop 0.4s -} - -@keyframes animatetop { - from { - top: -300px; - opacity: 0 - } - - to { - top: 0; - opacity: 1 - } -} - -.w3-animate-left { - position: relative; - animation: animateleft 0.4s -} - -@keyframes animateleft { - from { - left: -300px; - opacity: 0 - } - - to { - left: 0; - opacity: 1 - } -} - -.w3-animate-right { - position: relative; - animation: animateright 0.4s -} - -@keyframes animateright { - from { - right: -300px; - opacity: 0 - } - - to { - right: 0; - opacity: 1 - } -} - -.w3-animate-bottom { - position: relative; - animation: animatebottom 0.4s -} - -@keyframes animatebottom { - from { - bottom: -300px; - opacity: 0 - } - - to { - bottom: 0; - opacity: 1 - } -} - -.w3-animate-zoom { - animation: animatezoom 0.6s -} - -@keyframes animatezoom { - from { - transform: scale(0) - } - - to { - transform: scale(1) - } -} - -.w3-animate-input { - transition: width 0.4s ease-in-out -} - -.w3-animate-input:focus { - width: 100% !important -} - -.w3-opacity, -.w3-hover-opacity:hover { - opacity: 0.60 -} - -.w3-opacity-off, -.w3-hover-opacity-off:hover { - opacity: 1 -} - -.w3-opacity-max { - opacity: 0.25 -} - -.w3-opacity-min { - opacity: 0.75 -} - -.w3-greyscale-max, -.w3-grayscale-max, -.w3-hover-greyscale:hover, -.w3-hover-grayscale:hover { - filter: grayscale(100%) -} - -.w3-greyscale, -.w3-grayscale { - filter: grayscale(75%) -} - -.w3-greyscale-min, -.w3-grayscale-min { - filter: grayscale(50%) -} - -.w3-sepia { - filter: sepia(75%) -} - -.w3-sepia-max, -.w3-hover-sepia:hover { - filter: sepia(100%) -} - -.w3-sepia-min { - filter: sepia(50%) -} - -.w3-left-align { - text-align: left !important -} - -.w3-right-align { - text-align: right !important -} - -.w3-justify { - text-align: justify !important -} - -.w3-center { - text-align: center !important -} - -.w3-border-0 { - border: 0 !important -} - -.w3-border { - border: 1px solid #ccc !important -} - -.w3-border-top { - border-top: 1px solid #ccc !important -} - -.w3-border-bottom { - border-bottom: 1px solid #ccc !important -} - -.w3-border-left { - border-left: 1px solid #ccc !important -} - -.w3-border-right { - border-right: 1px solid #ccc !important -} - -.w3-topbar { - border-top: 6px solid #ccc !important -} - -.w3-bottombar { - border-bottom: 6px solid #ccc !important -} - -.w3-leftbar { - border-left: 6px solid #ccc !important -} - -.w3-rightbar { - border-right: 6px solid #ccc !important -} - -.w3-section, -.w3-code { - margin-top: 16px !important; - margin-bottom: 16px !important -} - -.w3-margin { - margin: 16px !important -} - -.w3-margin-top { - margin-top: 16px !important -} - -.w3-margin-bottom { - margin-bottom: 16px !important -} - -.w3-margin-left { - margin-left: 16px !important -} - -.w3-margin-right { - margin-right: 16px !important -} - -.w3-padding-small { - padding: 4px 8px !important -} - -.w3-padding { - padding: 8px 16px !important -} - -.w3-padding-large { - padding: 12px 24px !important -} - -.w3-padding-16 { - padding-top: 16px !important; - padding-bottom: 16px !important -} - -.w3-padding-24 { - padding-top: 24px !important; - padding-bottom: 24px !important -} - -.w3-padding-32 { - padding-top: 32px !important; - padding-bottom: 32px !important -} - -.w3-padding-48 { - padding-top: 48px !important; - padding-bottom: 48px !important -} - -.w3-padding-64 { - padding-top: 64px !important; - padding-bottom: 64px !important -} - -.w3-padding-top-64 { - padding-top: 64px !important -} - -.w3-padding-top-48 { - padding-top: 48px !important -} - -.w3-padding-top-32 { - padding-top: 32px !important -} - -.w3-padding-top-24 { - padding-top: 24px !important -} - -.w3-left { - float: left !important -} - -.w3-right { - float: right !important -} - -.w3-button:hover { - color: #000 !important; - background-color: #ccc !important -} - -.w3-transparent, -.w3-hover-none:hover { - background-color: transparent !important -} - -.w3-hover-none:hover { - box-shadow: none !important -} - -.alert-success { - color: #000; - background-color: #ccc; -} - -.alert-failure { - color: #fff; - background-color: #b91d47; -} - -.links-list a:not(:last-of-type)::after { - content: " | " -} - -.label-check { - margin-left: 5px; -} - -.w3-row .threequarter { - width: 75%; - float: left; -} - -.w3-row .quarter { - width: 25%; - float: left; -} - -.w3-button.w3-edit { - background-color: #f1f1f1; -} - -.w3-button.w3-edit:hover { - background-color: var(--bg-primary-color); -} - -.w3-button.w3-delete { - background-color: #f1f1f1; -} - -.w3-button.w3-delete:hover { - background-color: #b91d47 !important; -} - -.fields { - margin-bottom: 20px; -} - -.fields li { - padding-left: 0; -} - -.footerNavbar-container { - position: fixed; - bottom: 5px; - width: 100%; - padding-right: 8px; -} - -.footerNavbar { - overflow: hidden; - width: 100%; - background-color: var(--bg-primary-color); -} - -.footerNavbar .w3-bar-item { - padding: 3px; -} - -.footerNavbar .w3-bar-item p { - margin-top: 0; - margin-bottom: 0; - font-size: 10pt; -} - -.footerNavbar .w3-btn { - padding: 6px 4px; -} - -#searchSidebar { - display: none; -} - -#overlay { - position: fixed; - display: none; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 4; - cursor: pointer; -} - -#message { - visibility: hidden; - min-width: 250px; - margin-left: -125px; - text-align: center; - border-radius: 2px; - padding: 16px; - position: fixed; - z-index: 1; - left: 50%; - bottom: 36px; -} - -#message.show { - visibility: visible; -} - -.tag { - display: inline-block; -} - -.field-label { - font-weight: bold; -} - -.summary { - background-color: #fff; - padding: 4px -} - -.summary p { - padding: 0; - margin: 0; -} - -tr.htmx-swapping td { - opacity: 0; - transition: opacity 1s ease-out; -} - -#items_search, #all_items_search { - position: sticky; - top: 50px; - z-index: 2; - background-color: #ddd; - padding-top: 4px; - padding-bottom: 4px; -} - -.panel-search { - background-color: #fff; - padding: 4px; -} - -table.stickyheader thead { - position: sticky; - top: 50px; - z-index: 2; -} - -table.stickyheader.searchopened thead { - top: 180px; -} - -.input-container { - display: flex; - max-width: 100%; - overflow: hidden; -} - -.input-container .prefix { - margin-right: 8px; -} - -.input-container input { - flex-grow: 1; - border: none; - outline: none; - padding: 8px; -} - -.input-container:focus-within { - border-color: #777; -} - -/* Small */ -@media (max-width:600px) { - i { - font-size: 20px; - } - - fieldset { - margin-bottom: 10px; - } - - #quickbox-content { - padding-top: var(--quickbox-topbar-height); - } - - #message { - min-width: 100%; - margin-left: 0; - margin-right: 0; - left: 0; - } - - .page-container { - padding-bottom: 100px; - } - - #page-title i { - font-size: 20px; - } - - #searchBar #searchText { - width: 250px; - } - - #searchBar { - display: none; - } - - #searchSidebar { - display: block; - } - - .w3-modal-full { - width: 100vw !important; - height: 100vh !important; - padding-top:0 !important; - background-color: #fff; - } - - .w3-modal-full .w3-modal-content { - margin:0 !important; - } -} - -/* Medium */ -@media (max-width:992px) and (min-width:601px) { - #page-title-container h5 { - padding-left: 0px; - } -} - - - diff --git a/assets/static/js/main.js b/assets/static/js/main.js index 0f5babd..4de6f1b 100644 --- a/assets/static/js/main.js +++ b/assets/static/js/main.js @@ -31,10 +31,10 @@ if (typeof(_bm_yDown) == undefined) { function bm_toggle_dropdown(list_id) { var list = document.getElementById(list_id); - if (list.className.indexOf("w3-show") === -1) { - list.className += " w3-show"; + if (list.className.indexOf("show") === -1) { + list.className += "show"; } else { - list.className = list.className.replace(" w3-show", ""); + list.className = list.className.replace("show", ""); } } diff --git a/assets/templates/categories/form.tmpl b/assets/templates/categories/form.tmpl index 1a14c22..1978f77 100644 --- a/assets/templates/categories/form.tmpl +++ b/assets/templates/categories/form.tmpl @@ -16,35 +16,18 @@ />

-

- - Back +

+ + Back

-
-
-
- +
-
- +
+
- - {{ - range .categories - }} + {{ range .categories }} - - - {{ - end - }} + {{ end }}
Name - - + + +
- {{.Name}} + {{.Name}} - - + +
diff --git a/assets/templates/items/form.tmpl b/assets/templates/items/form.tmpl index e880acf..4770760 100644 --- a/assets/templates/items/form.tmpl +++ b/assets/templates/items/form.tmpl @@ -104,10 +104,8 @@
-

- +

+ {{ if not (eq .item.Id 0) }} View Delete @@ -119,14 +117,11 @@

-
-
-
- - -
-
- - + diff --git a/assets/templates/items/read_title.tmpl b/assets/templates/items/read_title.tmpl index ff6c084..13b10bd 100644 --- a/assets/templates/items/read_title.tmpl +++ b/assets/templates/items/read_title.tmpl @@ -1,8 +1,6 @@ {{define "page:title"}} -
-
{{ .item.Type_title }}
-
-
- -
+
{{ .item.Type_title }}
+
+ +
{{end}} diff --git a/assets/templates/notebooks/form.tmpl b/assets/templates/notebooks/form.tmpl index 83ca181..c840565 100644 --- a/assets/templates/notebooks/form.tmpl +++ b/assets/templates/notebooks/form.tmpl @@ -40,36 +40,19 @@ >

-

- - Back +

+ + Back

-
-
-
- -
-
- - -
+
-
- +
+
- - {{ - range .notebooks - }} + {{ range .notebooks }} - - + - {{ - end - }} + {{ end }}
Title - - + + +
- {{.Title}} - - - + {{.Title}} + +
diff --git a/assets/templates/partials/sidebar.tmpl b/assets/templates/partials/sidebar.tmpl index 2e97e60..e094122 100644 --- a/assets/templates/partials/sidebar.tmpl +++ b/assets/templates/partials/sidebar.tmpl @@ -17,7 +17,7 @@
- +
diff --git a/assets/templates/types/form.tmpl b/assets/templates/types/form.tmpl index ed4c5b6..2d562ca 100644 --- a/assets/templates/types/form.tmpl +++ b/assets/templates/types/form.tmpl @@ -115,32 +115,19 @@
-

- - Back +

+ + Back

-
-
-
- -
-
- -
+ diff --git a/assets/templates/types/list.tmpl b/assets/templates/types/list.tmpl index 4ee04a4..e1522a4 100644 --- a/assets/templates/types/list.tmpl +++ b/assets/templates/types/list.tmpl @@ -35,48 +35,22 @@ Title - - - + + + - {{ - range .types - }} + {{ range .types }} {{.Title}} - - - + + + - {{ - end - }} + {{ end }}