Add customized CSS theme for bootstrap
This commit is contained in:
parent
082fdeebdd
commit
5d4a7a4155
11 changed files with 279 additions and 191 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,2 +1,4 @@
|
||||||
nidus-sync
|
nidus-sync
|
||||||
|
htmlpage/static/css/bootstrap.css
|
||||||
|
scss/.sass-cache/
|
||||||
tmp/
|
tmp/
|
||||||
|
|
|
||||||
3
.gitmodules
vendored
3
.gitmodules
vendored
|
|
@ -4,3 +4,6 @@
|
||||||
[submodule "go-geojson2h3"]
|
[submodule "go-geojson2h3"]
|
||||||
path = go-geojson2h3
|
path = go-geojson2h3
|
||||||
url = git@github.com:Gleipnir-Technology/go-geojson2h3.git
|
url = git@github.com:Gleipnir-Technology/go-geojson2h3.git
|
||||||
|
[submodule "bootstrap"]
|
||||||
|
path = bootstrap
|
||||||
|
url = https://github.com/twbs/bootstrap.git
|
||||||
|
|
|
||||||
10
README.md
10
README.md
|
|
@ -13,6 +13,16 @@ nix develop
|
||||||
go build .
|
go build .
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Building Custom Theme
|
||||||
|
|
||||||
|
We're using a customized Bootstrap theme for this site. You'll need to build the SCSS into CSS:
|
||||||
|
|
||||||
|
```
|
||||||
|
nix develop
|
||||||
|
cd scss
|
||||||
|
scss custom.scss > ../htmlpage/static/css/bootstrap.css
|
||||||
|
```
|
||||||
|
|
||||||
## Running
|
## Running
|
||||||
|
|
||||||
You'll need a number of environment variables for configuring things;
|
You'll need a number of environment variables for configuring things;
|
||||||
|
|
|
||||||
1
bootstrap
Submodule
1
bootstrap
Submodule
|
|
@ -0,0 +1 @@
|
||||||
|
Subproject commit 25aa8cc0b32f0d1a54be575347e6d84b70b1acd7
|
||||||
|
|
@ -20,10 +20,12 @@
|
||||||
devShells.default = pkgs.mkShell {
|
devShells.default = pkgs.mkShell {
|
||||||
buildInputs = [
|
buildInputs = [
|
||||||
pkgs.air
|
pkgs.air
|
||||||
|
pkgs.autoprefixer
|
||||||
pkgs.go
|
pkgs.go
|
||||||
pkgs.goose
|
pkgs.goose
|
||||||
pkgs.gotools
|
pkgs.gotools
|
||||||
pkgs.lefthook
|
pkgs.lefthook
|
||||||
|
pkgs.sass
|
||||||
];
|
];
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
0
htmlpage/static/css/placeholder
Normal file
0
htmlpage/static/css/placeholder
Normal file
51
scss/custom.scss
Normal file
51
scss/custom.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
// Custom.scss
|
||||||
|
// Option B: Include parts of Bootstrap
|
||||||
|
|
||||||
|
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
|
||||||
|
@import "../bootstrap/scss/functions";
|
||||||
|
|
||||||
|
// 2. Include any default variable overrides here
|
||||||
|
$primary: #F76436;
|
||||||
|
$secondary: #3C552D;
|
||||||
|
$success: #8BAE67;
|
||||||
|
$danger: #FFC01B;
|
||||||
|
$info: #D7B26D;
|
||||||
|
|
||||||
|
|
||||||
|
// 3. Include remainder of required Bootstrap stylesheets
|
||||||
|
@import "../bootstrap/scss/variables";
|
||||||
|
|
||||||
|
// 4. Include any default map overrides here
|
||||||
|
|
||||||
|
// 5. Include remainder of required parts
|
||||||
|
@import "../bootstrap/scss/maps";
|
||||||
|
@import "../bootstrap/scss/mixins";
|
||||||
|
@import "../bootstrap/scss/root";
|
||||||
|
|
||||||
|
// 6. Optionally include any other parts as needed
|
||||||
|
@import "../bootstrap/scss/utilities";
|
||||||
|
@import "../bootstrap/scss/reboot";
|
||||||
|
@import "../bootstrap/scss/type";
|
||||||
|
@import "../bootstrap/scss/images";
|
||||||
|
@import "../bootstrap/scss/containers";
|
||||||
|
@import "../bootstrap/scss/grid";
|
||||||
|
@import "../bootstrap/scss/helpers";
|
||||||
|
|
||||||
|
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
|
||||||
|
@import "../bootstrap/scss/utilities/api";
|
||||||
|
|
||||||
|
// 8. Add additional custom code here
|
||||||
|
$custom-colors: (
|
||||||
|
"color1": $primary,
|
||||||
|
"color2": $danger,
|
||||||
|
"color3": #8C552D,
|
||||||
|
"color4": $success,
|
||||||
|
"color5": $info,
|
||||||
|
);
|
||||||
|
$off-white: #F8F9FA;
|
||||||
|
$off-black: #495057;
|
||||||
|
|
||||||
|
@import "./sidebar.scss";
|
||||||
|
|
||||||
|
// Merge the maps
|
||||||
|
$theme-colors: map-merge($theme-colors, $custom-colors);
|
||||||
90
scss/sidebar.scss
Normal file
90
scss/sidebar.scss
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
#sidebar {
|
||||||
|
background-color: $off-white;
|
||||||
|
min-height: 100vh;
|
||||||
|
transition: all 0.3s;
|
||||||
|
width: 250px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar.collapsed {
|
||||||
|
width: 70px;
|
||||||
|
padding: 20px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
transition: all 0.3s;
|
||||||
|
margin-left: 250px;
|
||||||
|
width: calc(100% - 250px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content.expanded {
|
||||||
|
margin-left: 70px;
|
||||||
|
width: calc(100% - 70px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-header {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid #dee2e6;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu li {
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu li a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $off-black;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu li a:hover {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu .menu-icon {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
min-width: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu .menu-text {
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar.collapsed .menu-text {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar.collapsed .sidebar-header h4 {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar.collapsed .sidebar-menu .menu-icon {
|
||||||
|
min-width: 100%;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebarToggle i {
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar.collapsed + #content #sidebarToggle i {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
@ -5,109 +5,13 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>{{template "title" .}} - Nidus Sync</title>
|
<title>{{template "title" .}} - Nidus Sync</title>
|
||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap CSS -->
|
||||||
<link href="/static/vendor/css/bootstrap.min.css" rel="stylesheet">
|
<link href="/static/css/bootstrap.css" rel="stylesheet">
|
||||||
<!-- Fontawesome Icons -->
|
<!-- Fontawesome Icons -->
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
<!-- Bootstrap Icons -->
|
<!-- Bootstrap Icons -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||||
<!-- favicon -->
|
<!-- favicon -->
|
||||||
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"/>
|
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"/>
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar {
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
min-height: 100vh;
|
|
||||||
transition: all 0.3s;
|
|
||||||
width: 250px;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1000;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar.collapsed {
|
|
||||||
width: 70px;
|
|
||||||
padding: 20px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
transition: all 0.3s;
|
|
||||||
margin-left: 250px;
|
|
||||||
width: calc(100% - 250px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#content.expanded {
|
|
||||||
margin-left: 70px;
|
|
||||||
width: calc(100% - 70px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-header {
|
|
||||||
padding-bottom: 20px;
|
|
||||||
border-bottom: 1px solid #dee2e6;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-menu {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-menu li {
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-menu li a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #495057;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-menu li a:hover {
|
|
||||||
color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-menu .menu-icon {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
min-width: 30px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-menu .menu-text {
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar.collapsed .menu-text {
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar.collapsed .sidebar-header h4 {
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar.collapsed .sidebar-menu .menu-icon {
|
|
||||||
min-width: 100%;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebarToggle i {
|
|
||||||
transition: transform 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar.collapsed + #content #sidebarToggle i {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{{block "extraheader" .}} {{end}}
|
{{block "extraheader" .}} {{end}}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -1,52 +1,52 @@
|
||||||
{{define "sidebar"}}
|
{{define "sidebar"}}
|
||||||
<div id="sidebar">
|
<div id="sidebar">
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<h4>Dashboard</h4>
|
<img src="/static/img/nidus-logo-256-transparent.png" width="128"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="sidebar-menu">
|
<ul class="sidebar-menu">
|
||||||
<li>
|
<li>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="menu-icon"><i class="bi bi-house"></i></div>
|
<div class="menu-icon"><i class="bi bi-house"></i></div>
|
||||||
<span class="menu-text ms-2">Home</span>
|
<span class="menu-text ms-2">Home</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="menu-icon"><i class="bi bi-graph-up"></i></div>
|
<div class="menu-icon"><i class="bi bi-graph-up"></i></div>
|
||||||
<span class="menu-text ms-2">Analytics</span>
|
<span class="menu-text ms-2">Analytics</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="menu-icon"><i class="bi bi-file-earmark"></i></div>
|
<div class="menu-icon"><i class="bi bi-file-earmark"></i></div>
|
||||||
<span class="menu-text ms-2">Reports</span>
|
<span class="menu-text ms-2">Reports</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="menu-icon"><i class="bi bi-people"></i></div>
|
<div class="menu-icon"><i class="bi bi-people"></i></div>
|
||||||
<span class="menu-text ms-2">Users</span>
|
<span class="menu-text ms-2">Users</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="menu-icon"><i class="bi bi-chat-dots"></i></div>
|
<div class="menu-icon"><i class="bi bi-chat-dots"></i></div>
|
||||||
<span class="menu-text ms-2">Messages</span>
|
<span class="menu-text ms-2">Messages</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="menu-icon"><i class="bi bi-gear"></i></div>
|
<div class="menu-icon"><i class="bi bi-gear"></i></div>
|
||||||
<span class="menu-text ms-2">Settings</span>
|
<span class="menu-text ms-2">Settings</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="menu-icon"><i class="bi bi-question-circle"></i></div>
|
<div class="menu-icon"><i class="bi bi-question-circle"></i></div>
|
||||||
<span class="menu-text ms-2">Help</span>
|
<span class="menu-text ms-2">Help</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
|
||||||
|
|
@ -4,47 +4,72 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
{{define "content"}}
|
{{define "content"}}
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 shadow-sm">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 shadow-sm">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<button id="sidebarToggle" class="btn btn-outline-secondary">
|
<button id="sidebarToggle" class="btn btn-outline-secondary">
|
||||||
<i class="bi bi-chevron-left"></i>
|
<i class="bi bi-chevron-left"></i>
|
||||||
</button>
|
</button>
|
||||||
<span class="navbar-brand ms-3">My Application</span>
|
<span class="navbar-brand ms-3">My Application</span>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row mb-4">
|
<div class="row mb-4">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">Welcome to the Dashboard</h5>
|
<h5 class="card-title">Welcome to the Dashboard</h5>
|
||||||
<p class="card-text">This is an example of a Bootstrap layout with a collapsible sidebar.</p>
|
<p class="card-text">This is an example of a Bootstrap layout with a collapsible sidebar.</p>
|
||||||
<p>The sidebar can be toggled using the button in the navigation bar. When the sidebar collapses, only the icons remain visible.</p>
|
<p>The sidebar can be toggled using the button in the navigation bar. When the sidebar collapses, only the icons remain visible.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">Card 1</h5>
|
<h5 class="card-title">Card 1</h5>
|
||||||
<p class="card-text">Some example content for the first card.</p>
|
<p class="card-text">Some example content for the first card.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">Card 2</h5>
|
<h5 class="card-title">Card 2</h5>
|
||||||
<p class="card-text">Some example content for the second card.</p>
|
<p class="card-text">Some example content for the second card.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
|
||||||
|
<div class="p-3 mb-3 bg-primary-100 text-white">Primary-100</div>
|
||||||
|
<div class="p-3 mb-3 bg-primary-200 text-white">Primary-200</div>
|
||||||
|
<div class="p-3 mb-3 bg-primary-300 text-white">Primary-300</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="p-3 mb-3 bg-success text-white">Success</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="p-3 mb-3 bg-warning text-white">Warning</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="p-3 mb-3 bg-info text-white">Info</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue