diff --git a/.gitignore b/.gitignore index 32ca81cf..a4db107f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ nidus-sync +htmlpage/static/css/bootstrap.css +scss/.sass-cache/ tmp/ diff --git a/.gitmodules b/.gitmodules index dc0c25cc..d33f3b73 100644 --- a/.gitmodules +++ b/.gitmodules @@ -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 diff --git a/README.md b/README.md index 936e7461..27749fc2 100644 --- a/README.md +++ b/README.md @@ -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; diff --git a/bootstrap b/bootstrap new file mode 160000 index 00000000..25aa8cc0 --- /dev/null +++ b/bootstrap @@ -0,0 +1 @@ +Subproject commit 25aa8cc0b32f0d1a54be575347e6d84b70b1acd7 diff --git a/flake.nix b/flake.nix index 12fd6c72..fba2b1fa 100644 --- a/flake.nix +++ b/flake.nix @@ -20,10 +20,12 @@ devShells.default = pkgs.mkShell { buildInputs = [ pkgs.air + pkgs.autoprefixer pkgs.go pkgs.goose pkgs.gotools pkgs.lefthook + pkgs.sass ]; }; } diff --git a/htmlpage/static/css/placeholder b/htmlpage/static/css/placeholder new file mode 100644 index 00000000..e69de29b diff --git a/scss/custom.scss b/scss/custom.scss new file mode 100644 index 00000000..733d7c9b --- /dev/null +++ b/scss/custom.scss @@ -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); diff --git a/scss/sidebar.scss b/scss/sidebar.scss new file mode 100644 index 00000000..858c04f7 --- /dev/null +++ b/scss/sidebar.scss @@ -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); +} diff --git a/sync/template/authenticated.html b/sync/template/authenticated.html index 4fc97cc4..ba12bf54 100644 --- a/sync/template/authenticated.html +++ b/sync/template/authenticated.html @@ -5,109 +5,13 @@ {{template "title" .}} - Nidus Sync - + - + - {{block "extraheader" .}} {{end}} diff --git a/sync/template/components/sidebar.html b/sync/template/components/sidebar.html index 2786092a..be4f03b4 100644 --- a/sync/template/components/sidebar.html +++ b/sync/template/components/sidebar.html @@ -1,52 +1,52 @@ {{define "sidebar"}} - + {{end}} diff --git a/sync/template/layout-test.html b/sync/template/layout-test.html index 9abc1750..7a2a135d 100644 --- a/sync/template/layout-test.html +++ b/sync/template/layout-test.html @@ -4,47 +4,72 @@ {{end}} {{define "content"}} -
- - -
-
-
-
-
-
Welcome to the Dashboard
-

This is an example of a Bootstrap layout with a collapsible sidebar.

-

The sidebar can be toggled using the button in the navigation bar. When the sidebar collapses, only the icons remain visible.

-
-
-
-
- -
-
-
-
-
Card 1
-

Some example content for the first card.

-
-
-
-
-
-
-
Card 2
-

Some example content for the second card.

-
-
-
-
-
-
+
+ + +
+
+
+
+
+
Welcome to the Dashboard
+

This is an example of a Bootstrap layout with a collapsible sidebar.

+

The sidebar can be toggled using the button in the navigation bar. When the sidebar collapses, only the icons remain visible.

+
+
+
+
+ +
+
+
+
+
Card 1
+

Some example content for the first card.

+
+
+
+
+
+
+
Card 2
+

Some example content for the second card.

+
+
+
+
+
+
+
+
Primary
+
Primary-100
+
Primary-200
+
Primary-300
+
+
+
Secondary
+
+
+
Success
+
+
+
+
+
Danger
+
+
+
Warning
+
+
+
Info
+
+
+
{{end}}