CSS rework

This commit is contained in:
roberto 2024-11-29 17:56:53 +01:00
parent 4c906261e4
commit 6531c9ecaf
23 changed files with 209 additions and 202 deletions

View File

@ -84,6 +84,19 @@ body {
min-height: 100vh;
}
#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;
}
.modal {
z-index: 100;
padding-top: 100px;
@ -373,8 +386,16 @@ input[type='text']{
width: 100%;
}
#full-main-container:before,#full-main-container:after {
content: "";
display: table;
clear: both;
padding: 0.01em 4px;
}
#form-login-container {
position: relative;
min-height: 400px;
}
#form-login {
@ -390,10 +411,33 @@ input[type='text']{
padding: 12px 24px !important;
}
#form-login img {
height: 50px;
padding-right: 10px;
}
#form-login h2 {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
#form-login input {
border: 1px solid #ccc !important
}
#form-login button {
text-align: center;
display: block;
width: 100%;
color: var(--primary-color);
background-color: #ffffff;
font-weight: bold;
margin-top: 50px;
margin-bottom: 20px;
}
#main-sidebar {
width: 300px;
z-index: 5;
@ -456,6 +500,7 @@ input[type='text']{
margin-left: 8px;
padding: 0;
width: 100%;
display: block;
}
#page-title-container h5 {
@ -464,22 +509,30 @@ input[type='text']{
}
#page-title {
float: left;
padding: 4px 4px;
font-size: 1.4rem;
}
#page-title h5 {
#page-title-title {
color: #ffffff;
float: left;
}
#top-toolbar {
float: right;
}
#top-toolbar .button, #top-toolbar button {
padding-top: 0px;
padding-bottom: 0px;
}
#search-bar {
float: right;
}
#search-bar button {
#search-bar button, #search-bar .button, #top-toolbar .button {
color: #ffffff;
margin-top: 2px;
}
#search-text {
@ -489,7 +542,11 @@ input[type='text']{
}
.sidebar-block {
padding: 0.01em 4px;
padding: 4px;
}
#sidebar-search {
display: none;
}
.sidebar-menu a {
@ -508,6 +565,10 @@ input[type='text']{
margin-left: 2px !important;
}
.types_menu, .settings_menu {
float: right;
}
.item-card {
position: relative;
background-color: #ffffff;
@ -684,9 +745,9 @@ input[type='text']{
width: 99.99999%
}
.ss-main {
padding: 3px;
height: 37px;
}
.ss-value {
@ -794,8 +855,62 @@ input[type='text']{
display: block !important
}
#footer-navbar .bar-item:first-child {
padding-left: 0;
}
/* Small */
@media (max-width: 568px) {
.table-all.responsive table,
.table-all.responsive thead,
.table-all.responsive tbody,
.table-all.responsive th,
.table-all.responsive td,
.table-all.responsive tr {
display: block;
}
.table-all thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.table-all.responsive tr {
margin-bottom: 10px;
border: 1px solid #ddd;
}
.table-all.responsive td {
border: none;
position: relative;
padding-left: 30%;
}
.table-all.responsive td.no-label {
padding-left: 6px;
}
.table-all.responsive td.title {
color: #2b5797;
font-weight: 400;
font-size: 18px;
}
.table-all.responsive td:before {
position: absolute;
left: 6px;
content: attr(data-label);
font-weight: bold;
}
.table-all.responsive td.no-label:before {
position: absolute;
left: 6px;
content: "";
font-weight: bold;
}
.hide-small {
display: none !important
}
@ -831,7 +946,7 @@ input[type='text']{
}
/* Medium */
@media (max-width: 768px) {
@media (min-width: 768px) {
.col.m1 {
width: 8.33333%
}
@ -841,12 +956,12 @@ input[type='text']{
}
.col.m3,
.w3-quarter {
.quarter {
width: 24.99999%
}
.col.m4,
.w3-third {
.third {
width: 33.33333%
}
@ -855,7 +970,7 @@ input[type='text']{
}
.col.m6,
.w3-half {
.half {
width: 49.99999%
}
@ -864,7 +979,7 @@ input[type='text']{
}
.col.m8,
.w3-twothird {
.twothird {
width: 66.66666%
}
@ -970,4 +1085,4 @@ input[type='text']{
#page-top-bar {
padding-right: 300px;
}
}
}

View File

@ -857,10 +857,6 @@ table.stickyheader.searchopened thead {
width: 250px;
}
#form-login {
width: 96%;
}
#searchBar {
display: none;
}
@ -869,56 +865,6 @@ table.stickyheader.searchopened thead {
display: block;
}
.w3-table-all.responsive table,
.w3-table-all.responsive thead,
.w3-table-all.responsive tbody,
.w3-table-all.responsive th,
.w3-table-all.responsive td,
.w3-table-all.responsive tr {
display: block;
}
.w3-table-all thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.w3-table-all.responsive tr {
margin-bottom: 10px;
border: 1px solid #ddd;
}
.w3-table-all.responsive td {
border: none;
position: relative;
padding-left: 30%;
}
.w3-table-all.responsive td.no-label {
padding-left: 6px;
}
.w3-table-all.responsive td.title {
color: #2b5797;
font-weight: 400;
font-size: 18px;
}
.w3-table-all.responsive td:before {
position: absolute;
left: 6px;
content: attr(data-label);
font-weight: bold;
}
.w3-table-all.responsive td.no-label:before {
position: absolute;
left: 6px;
content: "";
font-weight: bold;
}
.w3-modal-full {
width: 100vw !important;
height: 100vh !important;

View File

@ -23,17 +23,17 @@
<div id="page-main">
<div id="page-top-bar">
<div id="page-title-container">
<a class="hide-large" onclick="bm_toggle_sidebar('main-sidebar'); return false" href="#" style="float: left; padding-left: 4px; padding-right: 10px;">
<a class="hide-large" onclick="bm_toggle_sidebar('main-sidebar'); return false" href="#" style="float: left; padding-right: 10px;">
<img src="/static/img/brainminder.svg" alt="BrainMinder" style="height: 32px;" />
</a>
<div id="page-title">{{template "page:title" .}}</div>
<div id="search-bar">
<form class="hide-small" method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" style="float: left">
<div id="search-bar" class="hide-small">
<form method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" style="float: left">
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
<input type="text" id="search-text" name="SearchText" class="w3-bar-item" placeholder="Search.." />
<button type="submit"><i class="bi bi-search"></i></button>
</form>
<button type="button" onclick="bm_toggle_quickbox();"><i class="bi bi-inbox-fill"></i></button>
<a class="button" onclick="bm_toggle_quickbox();"><i class="bi bi-inbox-fill"></i></a>
</div>
</div>
</div>

View File

@ -1,8 +1,6 @@
{{define "page:title"}}
<div class="w3-left">
<h5>New Category</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
</div>
<div id="page-title-title"><h5>New Category</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -1,14 +1,7 @@
{{define "page:title"}}
<div class="w3-left">
<h5>Categories</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a
class="w3-button w3-medium"
hx-get="/category/create"
hx-push-url="true"
hx-target="#page-content"
><i class="bi bi-plus-square-fill"></i></a>
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
<div id="page-title-title"><h5>Categories</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a class="button" hx-get="/category/create" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
<a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -1,8 +1,6 @@
{{define "page:title"}}
<div class="w3-left">
<h5>Edit Category</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
</div>
<div id="page-title-title"><h5>Edit Category</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -15,7 +15,7 @@
}}
</head>
<body>
<div class="w3-container">
<div id="full-main-container">
<div id="page-content">{{template "page:content" .}}</div>
</div>
{{template "partial:footer" .}}

View File

@ -1,3 +1,6 @@
{{define "page:title"}}
<h5>All Items</h5>
<div id="page-title-title"><h5>All Items</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="button"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -1,3 +1,6 @@
{{define "page:title"}}
<h5>New {{ .type.Title}}</h5>
<div id="page-title-title"><h5>New {{ .type.Title}}</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="button"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -17,7 +17,7 @@
<div id="general" class="tab" style="display: block">
<div class="row">
<div class="col half">
<div class="col m6 s12">
<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="col half">
<div class="col m6 s12">
<p>
{{ widget_checkboxes "Notebooks" "Notebooks" .item.Notebooks .notebooks `` }}
</p>
@ -51,13 +51,13 @@
</p>
{{ end }}
<div class="row">
<div class="col half">
<div class="col m6 s12">
<p>
<label for="item-tags">Tags</label>
<input name="Tags" id="item-tags" type="text" value="{{.item.Tags}}" />
</p>
</div>
<div class="col half">
<div class="col m6 s12">
<p>
{{ widget_slim_select "Categories" "Categories" .item.Categories .categories `multiple="true"` }}
</p>

View File

@ -52,7 +52,7 @@
</div>
</div>
<div id="items" class="list">
<table class="table-all responsive w3-striped stickyheader">
<table class="table-all responsive striped stickyheader">
<thead>
<tr>
<th>Title</th>

View File

@ -1,19 +1,8 @@
{{define "page:title"}}
<div class="w3-left">
<h5>{{.type.Title}} Items</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a
class="w3-button w3-medium w3-round-large"
href="#"
onclick="bm_toggle_visibility('items_search'); return false;"
><i class="bi bi-search"></i></a>
<a
class="w3-button w3-medium w3-round-large"
hx-get="/item/create/{{.type.Id}}"
hx-push-url="true"
hx-target="#page-content"
><i class="bi bi-plus-square-fill"></i></a>
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
<div id="page-title-title"><h5>{{.type.Title}} Items</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a class="button" href="#" onclick="bm_toggle_visibility('items_search'); return false;" ><i class="bi bi-search"></i></a>
<a class="button" hx-get="/item/create/{{.type.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
<a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -1,3 +1,6 @@
{{define "page:title"}}
<h5>Edit {{.item.Type_title}}</h5>
<div id="page-title-title"> <h5>Edit {{.item.Type_title}}</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -33,13 +33,7 @@
{{ range (stringToArray .item.Categories "|")}}
{{ $category_name := index $.categoriesMap .}}
<div class="tag" style="padding: 3px">
<a
hx-post="/items"
hx-target="#page-content"
hx-push-url="true"
href="#"
hx-vals="{category_id&quot; : &quot;{{ . }}&quot;}">{{ $category_name }}</a
>
<a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{category_id&quot; : &quot;{{ . }}&quot;}">{{ $category_name }}</a>
</div>
{{ end }}
</div>
@ -47,14 +41,7 @@
{{ if gt (len .item.Tags) 0 }}
<strong>Tags</strong> {{ 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&quot; : &quot;{{.}}&quot;}"
>{{ . }}</a
>
<a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
</div>
{{ end }}
{{ end }}
@ -62,13 +49,7 @@
</div>
<div class="row" style="margin-bottom: 20px">
<a
class="button main"
hx-get="/item/update/{{.item.Id}}"
hx-push-url="true"
hx-target="#page-content"
_="on click remove #modal"
href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i> Edit</a>
<a class="button main" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"_="on click remove #modal" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i> Edit</a>
</div>
</div>
</div>

View File

@ -1,8 +1,6 @@
{{define "page:title"}}
<div class="w3-left">
<h5>New Notebook</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
</div>
<div id="page-title-title"><h5>New Notebook</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -1,14 +1,7 @@
{{define "page:title"}}
<div class="w3-left">
<h5>Notebooks</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a
class="w3-button w3-medium"
hx-get="/notebook/create"
hx-push-url="true"
hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
<div id="page-title-title"><h5>Notebooks</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a class="button" hx-get="/notebook/create" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
<a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -1,8 +1,6 @@
{{define "page:title"}}
<div class="w3-left">
<h5>Edit Notebook</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
</div>
<div id="page-title-title"><h5>Edit Notebook</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -1,8 +1,6 @@
{{define "page:title"}}
<div class="w3-left">
<h5>Dashboard</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
</div>
<div id="page-title-title"><h5>Dashboard</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="button"><i class='bi bi-inbox-fill'></i></a>
</div>
{{ end }}

View File

@ -2,20 +2,20 @@
{{define "page:content"}}
<div id="form-login-container" style="min-height: 400px;">
<div id="form-login-container">
<div id="form-login">
<h2 class="w3-center"><img src="/static/img/brainminder.svg" style="height: 50px; padding-right: 10px;" /><span style="font-weight: bold;">B</span>rain<span style="font-weight: bold;">M</span>inder</h2>
<h2><img src="/static/img/brainminder.svg" /><span style="font-weight: bold;">B</span>rain<span style="font-weight: bold;">M</span>inder</h2>
<form method="POST" action="/login">
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
<p>
<label for="email">Email:</label>
<label for="email">Email</label>
<input id="email" type="email" name="Email" value="{{.Form.Email}}" />
</p>
<p>
<label for="password">Password:</label>
<label for="password">Password</label>
<input id="password" type="password" name="Password" />
</p>
<button class="w3-block w3-btn w3-metro-light-blue w3-round-medium" style="margin-top: 50px; margin-bottom: 20px;"><i class='bi bi-lock'></i> Login</button>
<button><i class='bi bi-lock'></i> Login</button>
</form>
</div>
</div>

View File

@ -4,16 +4,20 @@
<div id="app-title">
<a class="hide-large" href="#" onclick="bm_toggle_sidebar('main-sidebar'); return false;">
<img src="/static/img/brainminder.svg" alt="BrainMinder" />
</a>
<a class="hide-large" href="#" onclick="bm_toggle_sidebar('main-sidebar'); return false;">
<span>BrainMinder</span>
</a>
<a class="hide-small hide-medium" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content">
<img src="/static/img/brainminder.svg" alt="BrainMinder" />
</a>
<a class="hide-small hide-medium" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content">
<span>BrainMinder</span>
</a>
</div>
<div id="main-sidebar-content">
<div class="w3-bar-block w3-container" id="searchSidebar">
<div class="w3-bar-block w3-container" id="sidebar-search">
<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">
@ -45,7 +49,7 @@
<div class="sidebar-block">
<h5 class="accordion" onclick="bm_toggle_visibility('types_menu')">
<i class="bi bi-list-task"></i> Items <i class='w3-right bi bi-chevron-down types_menu'></i><i class='w3-right bi bi-chevron-up hidden types_menu'></i>
<i class="bi bi-list-task"></i> Items <i class='bi bi-chevron-down types_menu'></i><i class='w3-right bi bi-chevron-up hidden types_menu'></i>
</h5>
</div>
@ -62,7 +66,7 @@
<div class="sidebar-block">
<h5 class="accordion" onclick="bm_toggle_visibility('settings_menu')">
<i class="bi bi-gear-fill"></i> Settings <i class='w3-right bi bi-chevron-down settings_menu'></i><i class='w3-right bi bi-chevron-up hidden settings_menu'></i>
<i class="bi bi-gear-fill"></i> Settings <i class='bi bi-chevron-down settings_menu'></i><i class='w3-right bi bi-chevron-up hidden settings_menu'></i>
</h5>
</div>

View File

@ -1,8 +1,6 @@
{{define "page:title"}}
<div class="w3-left">
<h5>New Type</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
</div>
<div id="page-title-title"><h5>New Type</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -1,15 +1,7 @@
{{define "page:title"}}
<div class="w3-left">
<h5>Types</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a
class="w3-button w3-medium"
hx-get="/type/create"
hx-push-url="true"
hx-target="#page-content"
><i class="bi bi-plus-square-fill"></i
></a>
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
<div id="page-title-title"><h5>Types</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a class="button" hx-get="/type/create" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
<a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}

View File

@ -1,9 +1,6 @@
{{define "page:title"}}
<div class="w3-left">
<h5>Edit Type</h5>
</div>
<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
<a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
</div>
<div id="page-title-title"><h5>Edit Type</h5></div>
<div class="hide-medium hide-large" id="top-toolbar">
<a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
</div>
{{end}}