Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add customized CSS theme for bootstrap

Browse source
This commit is contained in:
Eli Ribble 2026-01-28 22:25:02 +00:00
parent 082fdeebdd
commit 5d4a7a4155
No known key found for this signature in database
11 changed files with 279 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,2 +1,4 @@
nidus-sync
htmlpage/static/css/bootstrap.css
scss/.sass-cache/
tmp/

3
.gitmodules vendored
View file

@ -4,3 +4,6 @@
[submodule "go-geojson2h3"]
path = go-geojson2h3
url = git@github.com:Gleipnir-Technology/go-geojson2h3.git
[submodule "bootstrap"]
path = bootstrap
url = https://github.com/twbs/bootstrap.git

10
README.md
View file

@ -13,6 +13,16 @@ nix develop
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
You'll need a number of environment variables for configuring things;

1
bootstrap Submodule

@ -0,0 +1 @@
Subproject commit 25aa8cc0b32f0d1a54be575347e6d84b70b1acd7

2
flake.nix
View file

@ -20,10 +20,12 @@
devShells.default = pkgs.mkShell {
buildInputs = [
pkgs.air
pkgs.autoprefixer
pkgs.go
pkgs.goose
pkgs.gotools
pkgs.lefthook
pkgs.sass
];
};
}

0
htmlpage/static/css/placeholder Normal file
View file

51
scss/custom.scss Normal file
View 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
View 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);
}

100
sync/template/authenticated.html
View file

@ -5,109 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{template "title" .}} - Nidus Sync</title>
<!-- Bootstrap CSS -->
<link href="/static/vendor/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/bootstrap.css" rel="stylesheet">
<!-- Fontawesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- 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 -->
<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}}
</head>
<body>

100
sync/template/components/sidebar.html
View file

@ -1,52 +1,52 @@
{{define "sidebar"}}
<div id="sidebar">
<div class="sidebar-header">
<h4>Dashboard</h4>
</div>
<ul class="sidebar-menu">
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-house"></i></div>
<span class="menu-text ms-2">Home</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-graph-up"></i></div>
<span class="menu-text ms-2">Analytics</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-file-earmark"></i></div>
<span class="menu-text ms-2">Reports</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-people"></i></div>
<span class="menu-text ms-2">Users</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-chat-dots"></i></div>
<span class="menu-text ms-2">Messages</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-gear"></i></div>
<span class="menu-text ms-2">Settings</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-question-circle"></i></div>
<span class="menu-text ms-2">Help</span>
</a>
</li>
</ul>
</div>
<div id="sidebar">
<div class="sidebar-header">
<img src="/static/img/nidus-logo-256-transparent.png" width="128"/>
</div>
<ul class="sidebar-menu">
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-house"></i></div>
<span class="menu-text ms-2">Home</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-graph-up"></i></div>
<span class="menu-text ms-2">Analytics</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-file-earmark"></i></div>
<span class="menu-text ms-2">Reports</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-people"></i></div>
<span class="menu-text ms-2">Users</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-chat-dots"></i></div>
<span class="menu-text ms-2">Messages</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-gear"></i></div>
<span class="menu-text ms-2">Settings</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-icon"><i class="bi bi-question-circle"></i></div>
<span class="menu-text ms-2">Help</span>
</a>
</li>
</ul>
</div>
{{end}}

111
sync/template/layout-test.html
View file

@ -4,47 +4,72 @@
{{end}}
{{define "content"}}
<!-- Main Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 shadow-sm">
<div class="container-fluid">
<button id="sidebarToggle" class="btn btn-outline-secondary">
<i class="bi bi-chevron-left"></i>
</button>
<span class="navbar-brand ms-3">My Application</span>
</div>
</nav>
<div class="container-fluid">
<div class="row mb-4">
<div class="col">
<div class="card">
<div class="card-body">
<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>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 class="row">
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some example content for the first card.</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Some example content for the second card.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 shadow-sm">
<div class="container-fluid">
<button id="sidebarToggle" class="btn btn-outline-secondary">
<i class="bi bi-chevron-left"></i>
</button>
<span class="navbar-brand ms-3">My Application</span>
</div>
</nav>
<div class="container-fluid">
<div class="row mb-4">
<div class="col">
<div class="card">
<div class="card-body">
<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>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 class="row">
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some example content for the first card.</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Some example content for the second card.</p>
</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}}