From 2067b9e6ed8be4b9529cefd90b334cb6c5c20c1a Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Wed, 29 Nov 2023 16:40:06 -0700 Subject: [PATCH 1/5] add theme to manage marketing, product, docs --- .../static/css/bootstrap-theme.scss | 3 +++ .../static/css/scss/base/_typography.scss | 19 +++++++++---------- .../static/css/scss/themes/docs.scss | 19 +++++++++++++++++++ .../static/css/scss/themes/marketing.scss | 19 +++++++++++++++++++ .../static/css/scss/themes/product.scss | 19 +++++++++++++++++++ pgml-dashboard/templates/layout/base.html | 2 +- .../templates/layout/web_app_base.html | 2 +- 7 files changed, 71 insertions(+), 12 deletions(-) create mode 100644 pgml-dashboard/static/css/scss/themes/docs.scss create mode 100644 pgml-dashboard/static/css/scss/themes/marketing.scss create mode 100644 pgml-dashboard/static/css/scss/themes/product.scss diff --git a/pgml-dashboard/static/css/bootstrap-theme.scss b/pgml-dashboard/static/css/bootstrap-theme.scss index eaebd00ab..3b347906f 100644 --- a/pgml-dashboard/static/css/bootstrap-theme.scss +++ b/pgml-dashboard/static/css/bootstrap-theme.scss @@ -67,6 +67,9 @@ // themes @import 'scss/themes/dark'; @import 'scss/themes/light'; +@import 'scss/themes/marketing'; +@import 'scss/themes/product'; +@import 'scss/themes/docs'; // layout @import 'scss/layout/containers'; @import 'scss/layout/utilities'; diff --git a/pgml-dashboard/static/css/scss/base/_typography.scss b/pgml-dashboard/static/css/scss/base/_typography.scss index b7e8347b7..21310cca0 100644 --- a/pgml-dashboard/static/css/scss/base/_typography.scss +++ b/pgml-dashboard/static/css/scss/base/_typography.scss @@ -6,50 +6,50 @@ } .h1-big { - font-weight: $font-weight-bold; font-size: 80px; line-height: 84px; + font-weight: $font-weight-bold; font-size: var(--h1-big-font-size); line-height: var(--h1-big-line-height); @include media-breakpoint-down(md) { font-size: 48px; line-height: 52px; } } h1, .h1 { - font-weight: $font-weight-bold; font-size: 64px; line-height: 72px; + font-weight: $font-weight-bold; font-size: var(--h1-font-size); line-height: var(--h1-line-height); @include media-breakpoint-down(md) { - font-size: 44px; line-height: 48px; + font-size: $h1-font-size; line-height: 48px; } } h2, .h2 { - font-weight: $font-weight-bold; font-size: 48px; line-height: 54px; + font-weight: $font-weight-bold; font-size: var(--h2-font-size); line-height: var(--h2-line-height); @include media-breakpoint-down(md) { font-size: 40px; line-height: 44px; } } h3, .h3 { - font-weight: $font-weight-bold; font-size: 40px; line-height: 46px; + font-weight: $font-weight-bold; font-size: var(--h3-font-size); line-height: var(--h3-line-height); @include media-breakpoint-down(md) { font-size: 32px; line-height: 36px; } } h4, .h4 { - font-weight: $font-weight-bold; font-size: 32px; line-height: 40px; + font-weight: $font-weight-bold; font-size: var(--h4-font-size); line-height: var(--h4-line-height); @include media-breakpoint-down(md) { font-size: 28px; line-height: 32px; } } h5, .h5 { - font-weight: $font-weight-bold; font-size: 28px; line-height: 34px; + font-weight: $font-weight-bold; font-size: var(--h5-font-size); line-height: var(--h5-line-height); @include media-breakpoint-down(md) { font-size: 24px; line-height: 28px; } } h6, .h6 { - font-weight: $font-weight-bold; font-size: 24px; line-height: 30px; + font-weight: $font-weight-bold; font-size: var(--h6-font-size); line-height: var(--h6-line-height); @include media-breakpoint-down(md) { font-size: 20px; line-height: 26px; } } .eyebrow { - font-weight: $font-weight-bold; font-size: 18px; line-height: 24px; + font-weight: $font-weight-bold; font-size: var(--eyebrow-font-size); line-height: var(--eyebrow-line-height); @include media-breakpoint-down(md) { font-size: 16px; line-height: 22px; } @@ -109,7 +109,6 @@ h6, .h6 { @include text-gradient($gradient-text); } - .marketing-body-large { font-size: 20px; line-height: 26px; diff --git a/pgml-dashboard/static/css/scss/themes/docs.scss b/pgml-dashboard/static/css/scss/themes/docs.scss new file mode 100644 index 000000000..71923e18d --- /dev/null +++ b/pgml-dashboard/static/css/scss/themes/docs.scss @@ -0,0 +1,19 @@ +[data-theme="docs"] { + --h1-big-font-size: 80px; + --h1-font-size: 64px; + --h2-font-size: 48px; + --h3-font-size: 40px; + --h4-font-size: 32px; + --h5-font-size: 24px; + --h6-font-size: 20px; + --eyebrow-font-size: 18px; + + --h1-big-line-height: 84px; + --h1-line-height: 72px; + --h2-line-height: 54px; + --h3-line-height: 46px; + --h4-line-height: 36px; + --h5-line-height: 30px; + --h6-line-height: 24px; + --eyebrow-line-height: 24px; +} diff --git a/pgml-dashboard/static/css/scss/themes/marketing.scss b/pgml-dashboard/static/css/scss/themes/marketing.scss new file mode 100644 index 000000000..e2c68223b --- /dev/null +++ b/pgml-dashboard/static/css/scss/themes/marketing.scss @@ -0,0 +1,19 @@ +[data-theme="marketing"] { + --h1-big-font-size: 80px; + --h1-font-size: 64px; + --h2-font-size: 48px; + --h3-font-size: 40px; + --h4-font-size: 32px; + --h5-font-size: 28px; + --h6-font-size: 24px; + --eyebrow-font-size: 18px; + + --h1-big-line-height: 84px; + --h1-line-height: 72px; + --h2-line-height: 54px; + --h3-line-height: 46px; + --h4-line-height: 40px; + --h5-line-height: 34px; + --h6-line-height: 30px; + --eyebrow-line-height: 24px; +} diff --git a/pgml-dashboard/static/css/scss/themes/product.scss b/pgml-dashboard/static/css/scss/themes/product.scss new file mode 100644 index 000000000..9b8e969b0 --- /dev/null +++ b/pgml-dashboard/static/css/scss/themes/product.scss @@ -0,0 +1,19 @@ +[data-theme="product"] { + --h1-big-font-size: 80px; + --h1-font-size: 64px; + --h2-font-size: 48px; + --h3-font-size: 40px; + --h4-font-size: 32px; + --h5-font-size: 24px; + --h6-font-size: 20px; + --eyebrow-font-size: 18px; + + --h1-big-line-height: 84px; + --h1-line-height: 72px; + --h2-line-height: 54px; + --h3-line-height: 46px; + --h4-line-height: 36px; + --h5-line-height: 30px; + --h6-line-height: 24px; + --eyebrow-line-height: 24px; +} diff --git a/pgml-dashboard/templates/layout/base.html b/pgml-dashboard/templates/layout/base.html index cefc9329a..62d42efee 100644 --- a/pgml-dashboard/templates/layout/base.html +++ b/pgml-dashboard/templates/layout/base.html @@ -2,7 +2,7 @@ use crate::components::navigation::navbar::marketing::Marketing as MarketingNavbar; %> - + <% include!("head.html"); %> diff --git a/pgml-dashboard/templates/layout/web_app_base.html b/pgml-dashboard/templates/layout/web_app_base.html index e3ababb5e..79691dcbc 100644 --- a/pgml-dashboard/templates/layout/web_app_base.html +++ b/pgml-dashboard/templates/layout/web_app_base.html @@ -15,7 +15,7 @@ %> - + <%- head %> <% for component in body_components { %> From 8bd5d7a726e51d67e383b919edfff1308e01107d Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Thu, 30 Nov 2023 13:11:10 -0700 Subject: [PATCH 2/5] range input sizing --- .../inputs/range_group/range_group.scss | 12 +++++++ .../range_group/range_group_controller.js | 36 +++++++++++-------- .../inputs/range_group/template.html | 8 ++--- .../static/css/bootstrap-theme.scss | 3 ++ .../css/scss/base/_bs_utility_overrides.scss | 24 +++++++++++++ .../static/css/scss/themes/marketing.scss | 24 +++++++++++++ 6 files changed, 89 insertions(+), 18 deletions(-) create mode 100644 pgml-dashboard/static/css/scss/base/_bs_utility_overrides.scss diff --git a/pgml-dashboard/src/components/inputs/range_group/range_group.scss b/pgml-dashboard/src/components/inputs/range_group/range_group.scss index cc2186951..1e4c7e308 100644 --- a/pgml-dashboard/src/components/inputs/range_group/range_group.scss +++ b/pgml-dashboard/src/components/inputs/range_group/range_group.scss @@ -27,6 +27,13 @@ div[data-controller="inputs-range-group"] { } } + // This allows line overhang for rounding range edges. + .overlay-offset { + width: calc(100% - 2px); + margin-left: 1px; + } + + // Increase offset for ranges with ticks. .input-offset { width: 80%; margin-left: 3%; @@ -84,4 +91,9 @@ div[data-controller="inputs-range-group"] { } } } + + // Quick resize fix. This may become a global change later. + .input-group { + padding: 8px; + } } diff --git a/pgml-dashboard/src/components/inputs/range_group/range_group_controller.js b/pgml-dashboard/src/components/inputs/range_group/range_group_controller.js index d16e868cb..77cb092ba 100644 --- a/pgml-dashboard/src/components/inputs/range_group/range_group_controller.js +++ b/pgml-dashboard/src/components/inputs/range_group/range_group_controller.js @@ -59,25 +59,33 @@ export default class extends Controller { } on_grab () { - if(!this.hasTickTarget || !this.hasLineTarget ) return; + if( this.hasLineTarget ) { + this.lineTarget.classList.add("grab-brightness") + } - this.lineTarget.classList.add("grab-brightness") - this.tickTargets.forEach((tick, index) => { - if( index < this.rangeTarget.value ) { - tick.classList.add("grab-brightness") - } else { - tick.classList.remove("grab-brightness") - }}) + if( this.hasTickTarget ) { + this.tickTargets.forEach((tick, index) => { + if( index < this.rangeTarget.value ) { + tick.classList.add("grab-brightness") + } else { + tick.classList.remove("grab-brightness") + } + }) + } } on_release() { - if(!this.hasTickTarget || !this.hasLineTarget ) return; + if( this.hasLineTarget ) { + this.lineTarget.classList.remove("grab-brightness") + } - this.lineTarget.classList.remove("grab-brightness") - this.tickTargets.forEach((tick, index) => { - if( index < this.rangeTarget.value ) { - tick.classList.remove("grab-brightness") - }}) + if( this.hasTickTarget ) { + this.tickTargets.forEach((tick, index) => { + if( index < this.rangeTarget.value ) { + tick.classList.remove("grab-brightness") + } + }) + } } updateTicks(value) { diff --git a/pgml-dashboard/src/components/inputs/range_group/template.html b/pgml-dashboard/src/components/inputs/range_group/template.html index 14f38b536..7cff46dc4 100644 --- a/pgml-dashboard/src/components/inputs/range_group/template.html +++ b/pgml-dashboard/src/components/inputs/range_group/template.html @@ -5,10 +5,10 @@ data-inputs-range-group-target="group" <%- group_target %> data-action="reset->inputs-range-group#reset"> -
+
<% if show_title { %>
-
<%- title %>
+
<%- title %>
<% } %>
style="display: none"<% } %>> @@ -25,7 +25,7 @@
<%- title %>
- <%- title %>
<% } %>
-
<% } %> +
<% if cost_rate.is_some() { %> diff --git a/pgml-dashboard/static/css/bootstrap-theme.scss b/pgml-dashboard/static/css/bootstrap-theme.scss index 3b347906f..5fdd42443 100644 --- a/pgml-dashboard/static/css/bootstrap-theme.scss +++ b/pgml-dashboard/static/css/bootstrap-theme.scss @@ -9,6 +9,9 @@ @import "./bootstrap-5.3.0-alpha1/scss/mixins"; @import "./bootstrap-5.3.0-alpha1/scss/utilities"; +// Adjust bs-utility classes to suit our needs +@import "scss/base/bs_utility_overrides.scss"; + // Font @import "scss/base/font.scss"; diff --git a/pgml-dashboard/static/css/scss/base/_bs_utility_overrides.scss b/pgml-dashboard/static/css/scss/base/_bs_utility_overrides.scss new file mode 100644 index 000000000..40af97169 --- /dev/null +++ b/pgml-dashboard/static/css/scss/base/_bs_utility_overrides.scss @@ -0,0 +1,24 @@ + +// Keeps bs fs-1 to fs-6 in sync with our h1 to h6 based on theme +$font-sizes: ( + 1: var(--h1-font-size), + 2: var(--h2-font-size), + 3: var(--h3-font-size), + 4: var(--h4-font-size), + 5: var(--h5-font-size), + 6: var(--h6-font-size) +); + +$utilities: map-merge( +$utilities, +( + "font-size": map-merge( + map-get($utilities, "font-size"), + ( + values: map-merge( + map-get(map-get($utilities, "font-size"), "values"), + ($font-sizes)), + ), + ), + ), +); \ No newline at end of file diff --git a/pgml-dashboard/static/css/scss/themes/marketing.scss b/pgml-dashboard/static/css/scss/themes/marketing.scss index e2c68223b..d7e4da6d2 100644 --- a/pgml-dashboard/static/css/scss/themes/marketing.scss +++ b/pgml-dashboard/static/css/scss/themes/marketing.scss @@ -1,4 +1,5 @@ [data-theme="marketing"] { + --h1-big-font-size: 80px; --h1-font-size: 64px; --h2-font-size: 48px; @@ -16,4 +17,27 @@ --h5-line-height: 34px; --h6-line-height: 30px; --eyebrow-line-height: 24px; + + $font-sizes: ( + 1: --h1-font-size, + 2: --h2-font-size, + 3: --h3-font-size, + 4: --h4-font-size, + 5: --h5-font-size, + 6: --h6-font-size + ); + + $utilities: map-merge( + $utilities, + ( + "font-size": map-merge( + map-get($utilities, "font-size"), + ( + values: map-merge( + map-get(map-get($utilities, "font-size"), "values"), + ($font-sizes)), + ), + ), + ), + ); } From e576a32a8a87d04bf7446ec47b0004f4b867a648 Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:28:21 -0700 Subject: [PATCH 3/5] Compute Selector Resize --- .../src/components/inputs/switch/switch.scss | 6 +++++- .../src/components/inputs/switch/template.html | 12 ++++++------ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/pgml-dashboard/src/components/inputs/switch/switch.scss b/pgml-dashboard/src/components/inputs/switch/switch.scss index af6e97af8..42dea3e56 100644 --- a/pgml-dashboard/src/components/inputs/switch/switch.scss +++ b/pgml-dashboard/src/components/inputs/switch/switch.scss @@ -13,7 +13,7 @@ div[data-controller="inputs-switch"] { display: flex; justify-content: center; align-items: center; - @extend .gap-2; + @extend .gap-1; } .toggle { @@ -42,4 +42,8 @@ div[data-controller="inputs-switch"] { left: 50%; transition: all $animation-timer; } + + .material-symbols-outlined { + font-size: 22px; + } } diff --git a/pgml-dashboard/src/components/inputs/switch/template.html b/pgml-dashboard/src/components/inputs/switch/template.html index deb9c8688..35a02078a 100644 --- a/pgml-dashboard/src/components/inputs/switch/template.html +++ b/pgml-dashboard/src/components/inputs/switch/template.html @@ -15,23 +15,23 @@ State::Right => right_icon.to_string(), } %> -
+
<%- match initial_state { State::Left => left_value.to_string(), State::Right => right_value.to_string(), } %> -
+
<%- left_icon %> -
+
<%- left_value %> -
+
<%- right_icon %> -
+
<%- right_value %> -
+
From b1164c002c55e9e69077ca6cae9948c1d7776a2e Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:43:22 -0700 Subject: [PATCH 4/5] eyebrow resize --- pgml-dashboard/static/css/scss/themes/product.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pgml-dashboard/static/css/scss/themes/product.scss b/pgml-dashboard/static/css/scss/themes/product.scss index 9b8e969b0..c97eec4a1 100644 --- a/pgml-dashboard/static/css/scss/themes/product.scss +++ b/pgml-dashboard/static/css/scss/themes/product.scss @@ -6,7 +6,7 @@ --h4-font-size: 32px; --h5-font-size: 24px; --h6-font-size: 20px; - --eyebrow-font-size: 18px; + --eyebrow-font-size: 14px; --h1-big-line-height: 84px; --h1-line-height: 72px; @@ -15,5 +15,5 @@ --h4-line-height: 36px; --h5-line-height: 30px; --h6-line-height: 24px; - --eyebrow-line-height: 24px; + --eyebrow-line-height: normal; } From 10773b24b052e5b3dc720a43f496dfe70faa73ff Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Thu, 30 Nov 2023 17:08:02 -0700 Subject: [PATCH 5/5] code cleanup --- .../css/scss/base/_bs_utility_overrides.scss | 2 +- .../static/css/scss/themes/marketing.scss | 23 ------------------- 2 files changed, 1 insertion(+), 24 deletions(-) diff --git a/pgml-dashboard/static/css/scss/base/_bs_utility_overrides.scss b/pgml-dashboard/static/css/scss/base/_bs_utility_overrides.scss index 40af97169..8ce2897cd 100644 --- a/pgml-dashboard/static/css/scss/base/_bs_utility_overrides.scss +++ b/pgml-dashboard/static/css/scss/base/_bs_utility_overrides.scss @@ -21,4 +21,4 @@ $utilities, ), ), ), -); \ No newline at end of file +); diff --git a/pgml-dashboard/static/css/scss/themes/marketing.scss b/pgml-dashboard/static/css/scss/themes/marketing.scss index d7e4da6d2..7dbef098f 100644 --- a/pgml-dashboard/static/css/scss/themes/marketing.scss +++ b/pgml-dashboard/static/css/scss/themes/marketing.scss @@ -17,27 +17,4 @@ --h5-line-height: 34px; --h6-line-height: 30px; --eyebrow-line-height: 24px; - - $font-sizes: ( - 1: --h1-font-size, - 2: --h2-font-size, - 3: --h3-font-size, - 4: --h4-font-size, - 5: --h5-font-size, - 6: --h6-font-size - ); - - $utilities: map-merge( - $utilities, - ( - "font-size": map-merge( - map-get($utilities, "font-size"), - ( - values: map-merge( - map-get(map-get($utilities, "font-size"), "values"), - ($font-sizes)), - ), - ), - ), - ); }