CSS rework

This commit is contained in:
roberto 2024-11-21 18:14:12 +01:00
parent 478ef78b76
commit 4c906261e4
10 changed files with 343 additions and 319 deletions

View File

@ -84,6 +84,34 @@ body {
min-height: 100vh;
}
.modal {
z-index: 100;
padding-top: 100px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
display: block;
}
.modal-content {
margin: auto;
background-color: #fff;
position: relative;
padding: 0;
outline: 0;
width: 600px;
color: rgb(84, 84, 84);
}
.modal-content h5 {
font-weight: 600 !important;
}
.display-topleft {
position: absolute;
left: 0;
@ -179,7 +207,7 @@ ul li:last-child {
border-bottom: none
}
.row:after {
.row:after, .row:before {
content:"";
display:table;
clear:both
@ -230,6 +258,21 @@ button {
padding: 10px 18px;
}
button.main, .button.main {
background-color: var(--primary-color);
color: #ffffff;
}
button.secondary, .button.secondary {
background-color: #4d4d4d;
color: #ffffff;
}
button.delete, .button.delete {
background-color: #aa2222;
color: #ffffff;
}
fieldset {
border-radius: 8px;
}
@ -258,6 +301,11 @@ input[type='radio'] {
accent-color: var(--primary-color);
}
input[type='text']{
height: 37px;
padding: 3px;
}
.label-checkbox {
top: 4px;
position: relative;
@ -460,6 +508,15 @@ input[type='radio'] {
margin-left: 2px !important;
}
.item-card {
position: relative;
background-color: #ffffff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 8px;
padding: 10px;
margin: 10px;
}
.menu-item-title:hover, #settings_menu a:hover{
border-radius: 8px;
background-color: var(--primary-color);
@ -471,7 +528,7 @@ input[type='radio'] {
}
#page-content {
padding-top: 4px;
padding-top: 60px;
padding-left: 4px;
padding-right: 4px;
}
@ -505,6 +562,7 @@ input[type='radio'] {
border-right: 1px solid #ccc !important;
border-left: 1px solid #ccc !important;
border-top: 1px solid #ccc !important;
font-weight: bold;
}
.tab-button.active,
@ -530,6 +588,103 @@ input[type='radio'] {
font-size: 1rem;
}
.bar {
width: 100%;
overflow: hidden
}
.center .bar {
display: inline-block;
width: auto
}
.bar .bar-item {
padding: 6px 16px;
float: left;
width: auto;
border: none;
display: block;
outline: 0
}
.bar .button {
white-space: normal
}
.bar-block .bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0
}
.bar-block.center .bar-item {
text-align: center
}
.col,
.half,
.third,
.twothird,
.threequarter,
.quarter {
float: left;
width: 100%
}
.col.s1 {
width: 8.33333%
}
.col.s2 {
width: 16.66666%
}
.col.s3 {
width: 24.99999%
}
.col.s4 {
width: 33.33333%
}
.col.s5 {
width: 41.66666%
}
.col.s6 {
width: 49.99999%
}
.col.s7 {
width: 58.33333%
}
.col.s8 {
width: 66.66666%
}
.col.s9 {
width: 74.99999%
}
.col.s10 {
width: 83.33333%
}
.col.s11 {
width: 91.66666%
}
.col.s12 {
width: 99.99999%
}
.ss-main {
padding: 3px;
}
@ -646,9 +801,95 @@ input[type='radio'] {
}
}
/* Min medium */
@media (min-width:601px) {
.home-card-summary {
height: 250px;
overflow: auto;
}
#quickbox {
width: 400px;
position: fixed;
top: 50px;
left: calc(100vw - 420px);
height: calc(100vh - 50px);
background-color: #fff !important;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
}
#quickbox-top-bar {
position: relative;
}
#quickbox-footer {
position: relative;
}
#quickbox-content {
height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-footer-height) - 42px);
}
}
/* Medium */
@media (max-width: 768px) {
.col.m1 {
width: 8.33333%
}
.col.m2 {
width: 16.66666%
}
.col.m3,
.w3-quarter {
width: 24.99999%
}
.col.m4,
.w3-third {
width: 33.33333%
}
.col.m5 {
width: 41.66666%
}
.col.m6,
.w3-half {
width: 49.99999%
}
.col.m7 {
width: 58.33333%
}
.col.m8,
.w3-twothird {
width: 66.66666%
}
.col.m9,
.w3-threequarter {
width: 74.99999%
}
.col.m10 {
width: 83.33333%
}
.col.m11 {
width: 91.66666%
}
.col.m12 {
width: 99.99999%
}
}
@media (min-width:60px) {
.col.half {
width: 49.99999%;
}
}
@media (max-width:993px) and (min-width:768px) {
@ -658,6 +899,54 @@ input[type='radio'] {
}
@media (min-width:993px) {
.col.l1 {
width: 8.33333%
}
.col.l2 {
width: 16.66666%
}
.col.l3 {
width: 24.99999%
}
.col.l4 {
width: 33.33333%
}
.col.l5 {
width: 41.66666%
}
.col.l6 {
width: 49.99999%
}
.col.l7 {
width: 58.33333%
}
.col.l8 {
width: 66.66666%
}
.col.l9 {
width: 74.99999%
}
.col.l10 {
width: 83.33333%
}
.col.l11 {
width: 91.66666%
}
.col.l12 {
width: 99.99999%
}
.hide-large {
display: none !important
}
@ -666,11 +955,11 @@ input[type='radio'] {
display: block !important;
}
.w3-row > .w3-half:first {
.row > .w3-half:first {
padding-right: 4px;
}
.w3-row > .w3-half:nth-child(2) {
.row > .w3-half:nth-child(2) {
padding-left: 4px;
}

View File

@ -72,78 +72,6 @@
transition: margin-left .4s
}
.w3-modal {
z-index: 100;
padding-top: 100px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
display: block;
}
.w3-modal-content {
margin: auto;
background-color: #fff;
position: relative;
padding: 0;
outline: 0;
width: 600px;
color: rgb(84, 84, 84);
}
.w3-modal-content h5 {
font-weight: 600 !important;
}
.w3-bar {
width: 100%;
overflow: hidden
}
.w3-center .w3-bar {
display: inline-block;
width: auto
}
.w3-bar .w3-bar-item {
padding: 6px 16px;
float: left;
width: auto;
border: none;
display: block;
outline: 0
}
.w3-bar .w3-dropdown-hover,
.w3-bar .w3-dropdown-click {
position: static;
float: left
}
.w3-bar .w3-button {
white-space: normal
}
.w3-bar-block .w3-bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0
}
.w3-bar-block.w3-center .w3-bar-item {
text-align: center
}
.w3-block {
display: block;
width: 100%
@ -173,169 +101,6 @@
clear: both
}
.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
float: left;
width: 100%
}
.w3-col.s1 {
width: 8.33333%
}
.w3-col.s2 {
width: 16.66666%
}
.w3-col.s3 {
width: 24.99999%
}
.w3-col.s4 {
width: 33.33333%
}
.w3-col.s5 {
width: 41.66666%
}
.w3-col.s6 {
width: 49.99999%
}
.w3-col.s7 {
width: 58.33333%
}
.w3-col.s8 {
width: 66.66666%
}
.w3-col.s9 {
width: 74.99999%
}
.w3-col.s10 {
width: 83.33333%
}
.w3-col.s11 {
width: 91.66666%
}
.w3-col.s12 {
width: 99.99999%
}
@media (min-width:601px) {
.w3-col.m1 {
width: 8.33333%
}
.w3-col.m2 {
width: 16.66666%
}
.w3-col.m3,
.w3-quarter {
width: 24.99999%
}
.w3-col.m4,
.w3-third {
width: 33.33333%
}
.w3-col.m5 {
width: 41.66666%
}
.w3-col.m6,
.w3-half {
width: 49.99999%
}
.w3-col.m7 {
width: 58.33333%
}
.w3-col.m8,
.w3-twothird {
width: 66.66666%
}
.w3-col.m9,
.w3-threequarter {
width: 74.99999%
}
.w3-col.m10 {
width: 83.33333%
}
.w3-col.m11 {
width: 91.66666%
}
.w3-col.m12 {
width: 99.99999%
}
}
@media (min-width:993px) {
.w3-col.l1 {
width: 8.33333%
}
.w3-col.l2 {
width: 16.66666%
}
.w3-col.l3 {
width: 24.99999%
}
.w3-col.l4 {
width: 33.33333%
}
.w3-col.l5 {
width: 41.66666%
}
.w3-col.l6 {
width: 49.99999%
}
.w3-col.l7 {
width: 58.33333%
}
.w3-col.l8 {
width: 66.66666%
}
.w3-col.l9 {
width: 74.99999%
}
.w3-col.l10 {
width: 83.33333%
}
.w3-col.l11 {
width: 91.66666%
}
.w3-col.l12 {
width: 99.99999%
}
}
.w3-rest {
overflow: hidden
}
@ -1238,33 +1003,5 @@ table.stickyheader.searchopened thead {
}
}
/* Min medium */
@media (min-width:601px) {
.home-card-summary {
height: 250px;
overflow: auto;
}
#quickbox {
width: 400px;
position: fixed;
top: 50px;
left: calc(100vw - 420px);
height: calc(100vh - 50px);
background-color: #fff !important;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
}
#quickbox-top-bar {
position: relative;
}
#quickbox-footer {
position: relative;
}
#quickbox-content {
height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-footer-height) - 42px);
}
}

View File

@ -1,4 +1,4 @@
const cacheVersion = "0.281"
const cacheVersion = "0.282"
const cacheName = "speedtech-brainminder"
const cacheFiles = [
'/static/bootstrap-icons/font/bootstrap-icons.min.css',

View File

@ -9,7 +9,6 @@
<link rel="stylesheet" href="/static/easymde/easymde.min.css" />
<link rel="stylesheet" href="/static/css/slimselect.css" />
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/css/orig.css" />
<link rel="icon" type="image/svg+xml" href="/static/img/brainminder-icon.svg">
{{block "page:meta" . }}
@ -49,8 +48,8 @@
<div id="modal-container"></div>
<div id="overlay" onclick="bm_overlay_off('main-sidebar')"></div>
<div id="modal-confirm-dialog" class="w3-modal" style="display: none;">
<div id="modal-confirm-dialog-content" class="w3-modal-content w3-round-large w3-padding w3-animate-top">
<div id="modal-confirm-dialog" class="modal" style="display: none;">
<div id="modal-confirm-dialog-content" class="modal-content w3-round-large w3-padding w3-animate-top">
<header class="w3-container">
<span _="on click hide #modal-confirm-dialog" class="w3-button w3-small w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
<h5></h5>
@ -88,11 +87,11 @@
<div id="quickbox-notes"></div>
</div>
<div id="quickbox-footer" class="w3-bar">
<div id="quickbox-footer" class="bar">
<form method="POST">
<div class="w3-row">
<div class="w3-col w3-right button"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend" class="w3-bar-item w3-right w3-round-large" id="quickbox-send"><i class='bi bi-caret-right-square-fill' style="margin-top: 4px;"></i></button></div>
<div class="w3-rest textarea"><textarea required class=" w3-border w3-round-large" id="quickbox-note" style="resize: none;" name="Note"></textarea></div>
<div class="row">
<div class="col w3-right button"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend" class="bar-item w3-right w3-round-large" id="quickbox-send"><i class='bi bi-caret-right-square-fill' style="margin-top: 4px;"></i></button></div>
<div class="rest textarea"><textarea required class=" w3-border w3-round-large" id="quickbox-note" style="resize: none;" name="Note"></textarea></div>
</div>
</form>
</div>

View File

@ -7,7 +7,6 @@
<link rel="manifest" href="/static/manifest.json">
<link rel="stylesheet" href="/static/bootstrap-icons/font/bootstrap-icons.min.css" />
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/css/orig.css" />
<link rel="icon" type="image/x-icon" href="/static/img/brainminder-icon.svg">
{{block "page:meta" . }}

View File

@ -16,8 +16,8 @@
</div>
<div id="general" class="tab" style="display: block">
<div class="w3-row">
<div class="w3-half">
<div class="row">
<div class="col half">
<p>
<label for="item-title">Title</label>
<input name="Title" id="item-title" type="text" value="{{.item.Title}}" />
@ -26,7 +26,7 @@
{{ widget_select "Type_id" "Type" .item.Type_id .types `style="width: 100%"` }}
</p>
</div>
<div class="w3-half">
<div class="col half">
<p>
{{ widget_checkboxes "Notebooks" "Notebooks" .item.Notebooks .notebooks `` }}
</p>
@ -50,14 +50,14 @@
<textarea name="Description" class=" w3-border" id="item-description" rows="10">{{.item.Description}}</textarea>
</p>
{{ end }}
<div class="w3-row">
<div class="w3-half">
<div class="row">
<div class="col half">
<p>
<label for="item-tags">Tags</label>
<input name="Tags" id="item-tags" type="text" value="{{.item.Tags}}" />
</p>
</div>
<div class="w3-half">
<div class="col half">
<p>
{{ widget_slim_select "Categories" "Categories" .item.Categories .categories `multiple="true"` }}
</p>
@ -90,13 +90,13 @@
</fieldset>
<fieldset class="w3-round-medium" style="margin-top: 8px;">
<legend>Add items</legend>
<div class="w3-row">
<div class="w3-col l6 m9 s10">
<div class="row">
<div class="col l6 m9 s10">
<input id="search-item-relation" name="SearchText" type="text" value="" placeholder="Search" hx-get="/items/search-for-relations/{{.item.Id}}" hx-trigger="search-item-relation, keyup changed delay:1s" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations"
/>
</div>
<div class="w3-col l6 m3 s1" style="padding-left: 10px;">
<a class="button w3-metro-blue" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations" hx-get="/items/search-for-relations/{{.item.Id}}"><i class="bi bi-search"></i><span class="hide-small"> Find</span></a>
<div class="col l6 m3 s1" style="padding-left: 10px;">
<a class="button main" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations" hx-get="/items/search-for-relations/{{.item.Id}}"><i class="bi bi-search"></i><span class="hide-small"> Find</span></a>
</div>
</div>
<div id="items-list-for-relations" style="margin-top:10px">
@ -105,34 +105,34 @@
</div>
</div>
<p class="hide-small w3-container">
<button class="w3-metro-dark-blue">
<button class="main">
<i class="bi bi-floppy"></i> Save
</button>
{{ if not (eq .item.Id 0) }}
<a class="button w3-metro-blue" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i> View</a>
<a class="button w3-metro-blue w3-delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"><i class="bi bi-trash"></i> Delete</a>
<a class="button w3-metro-blue" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i> Share</a>
<a class="button secondary" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i> View</a>
<a class="button delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"><i class="bi bi-trash"></i> Delete</a>
<a class="button secondary" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i> Share</a>
{{ end }}
<a class="button w3-metro-blue" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i> Back</a>
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i> Back</a>
</p>
<div class="footerNavbar-container">
<div class="w3-bar footerNavbar hide-medium hide-large">
<div class="w3-bar-item">
<button type="submit" class="w3-metro-dark-blue" title="Save">
<div id="footer-navbar-container">
<div id="footer-navbar" class="bar hide-medium hide-large">
<div class="bar-item">
<button type="submit" class="main" title="Save">
<i class="bi bi-floppy"></i>
</button>
</div>
{{ if not (eq .item.Id 0) }}
<div class="w3-bar-item">
<a class="button w3-metro-dark-blue w3-delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i>
<div class="bar-item">
<a class="button delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i>
</a>
</div>
<div class="w3-bar-item">
<a class="button w3-metro-dark-blue" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i></a>
<div class="bar-item">
<a class="button secondary" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i></a>
</div>
<div class="w3-bar-item">
<a class="button w3-metro-dark-blue" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="View"><i class="bi bi-binoculars"></i>
<div class="bar-item">
<a class="button secondary" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="View"><i class="bi bi-binoculars"></i>
</a>
</div>
{{ end }}

View File

@ -20,8 +20,8 @@
{{ template "item:relations_view" .}}
<div class="w3-row">
<div class="w3-half">
<div class="row">
<div class="half">
{{if gt (len .item.Categories) 0 }}
<i class="hide-medium hide-large bi bi-tags-fill"></i>
<strong class="hide-small">Categories</strong>
@ -40,7 +40,7 @@
{{ end }}
{{ end }}
</div>
<div class="w3-half">
<div class="half">
{{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 ",")}}
@ -60,7 +60,7 @@
</div>
<a
class="w3-btn w3-metro-dark-blue w3-round-large hide-small"
class="button main hide-small"
hx-get="/item/update/{{.item.Id}}"
hx-push-url="true"
hx-target="#page-content"
@ -68,7 +68,7 @@
><i class="bi bi-pencil"></i> Edit</a
>
<a
class="w3-btn w3-metro-blue w3-round-large hide-small"
class="button main hide-small"
href="#"
hx-target="#modal-container"
hx-get="/item/share/{{.item.Id}}"

View File

@ -1,6 +1,6 @@
{{define "page:content"}}
<div id="modal" class="w3-modal">
<div class="w3-modal-content w3-round-large">
<div id="modal" class="modal">
<div class="modal-content w3-round-large">
<header class="w3-container" style="margin-bottom: 20px; font-weight: bold;">
<span _="on click remove #modal"
class="w3-button w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 2px;"><i class='bi bi-x-circle-fill'></i></span>
@ -27,8 +27,8 @@
{{ template "item:relations_view" .}}
<div class="w3-row" style="margin-bottom: 20px">
<div class="w3-half">
<div class="row" style="margin-bottom: 20px">
<div class="col half">
<strong>Categories</strong>
{{ range (stringToArray .item.Categories "|")}}
{{ $category_name := index $.categoriesMap .}}
@ -43,7 +43,7 @@
</div>
{{ end }}
</div>
<div class="w3-half">
<div class="col half">
{{ if gt (len .item.Tags) 0 }}
<strong>Tags</strong> {{ range (stringToArray .item.Tags ",")}}
<div class="tag" style="padding: 3px">
@ -61,9 +61,9 @@
</div>
</div>
<div class="w3-row" style="margin-bottom: 20px">
<div class="row" style="margin-bottom: 20px">
<a
class="w3-btn w3-metro-dark-blue w3-round-large"
class="button main"
hx-get="/item/update/{{.item.Id}}"
hx-push-url="true"
hx-target="#page-content"

View File

@ -1,5 +1,5 @@
{{define "page:content"}}
<div class="w3-row-padding" id="dashboard" style="padding-top: 10px;">
<div id="dashboard">
{{ template "home:items" .}}

View File

@ -3,7 +3,7 @@
{{ $itemCount := 0 }}
{{ range.items }}
<div class="w3-col l4 m6 s12 item" style="margin-bottom: 10px;"
<div class="col l4 m6 s12 item" style="margin-bottom: 10px;"
{{ $itemCount = incr $itemCount}}
{{ if eq $itemCount 10 }}
{{ $offset := addI $.offset $itemCount}}
@ -12,16 +12,16 @@
hx-swap="afterend"
{{ end }}
>
<div class="w3-card w3-display-container w3-round-large" style="padding: 10px; background-color: #fff;">
<div class="w3-row">
<div class="w3-col l11 m11 s11">
<div class="item-card">
<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="#modal-container"><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="w3-col l1 m1 s1">
<div class="col l1 m1 s1">
<a
class="w3-btn w3-medium w3-round-large"
style="float: right; padding: 8px 8px"