postgresml · chillenberger · Dec 1, 2023 · Nov 29, 2023 · Nov 30, 2023 · Nov 30, 2023
diff --git 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
@@ -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
@@ -5,10 +5,10 @@
       data-inputs-range-group-target="group"
       <%- group_target %>
       data-action="reset->inputs-range-group#reset">
-  <div class="d-flex flex-column flex-md-row">
+  <div class="d-flex flex-column flex-md-row align-items-start align-items-md-end mb-2">
     <% if show_title { %>
     <div class="flex-grow-1">
-        <h6 class="h6"><%- title %></h6>
+        <h6 class="m-md-0"><%- title %></h6>
     </div>
     <% } %>
     <div <% if !show_value { %> style="display: none"<% } %>>
@@ -25,7 +25,7 @@ <h6 class="h6"><%- title %></h6>
   </div>
 
   <div class="range-container">
-    <input class="form-range z-1 <% if options.len() > 0 { %> input-offset <% } %>" 
+    <input class="form-range z-1 overlay-offset <% if options.len() > 0 { %> input-offset <% } %>" 
       type="range"
       name="<%- identifier %>"
       min="<%- min %>"
@@ -60,8 +60,8 @@ <h6 class="h6"><%- title %></h6>
           </div>
         <% } %>
       </div>
-      <div class="line w-100" data-inputs-range-group-target="line"></div>
       <% } %>
+      <div class="line w-100" data-inputs-range-group-target="line"></div>
     </div>
 
     <% if cost_rate.is_some() { %>

diff --git 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
@@ -15,23 +15,23 @@
         State::Right => right_icon.to_string(),
       } %>
     </span>
-    <h5 class="h5 my-0" data-inputs-switch-target="toggleText">
+    <h6 class="my-0" data-inputs-switch-target="toggleText">
       <%- match initial_state {
         State::Left => left_value.to_string(),
         State::Right => right_value.to_string(),
       } %>
-    </h5>
+    </h6>
   </div>
   <div class="label choice">
     <span class="material-symbols-outlined" ><%- left_icon  %></span>
-    <h5 class="h5 my-0">
+    <h6 class="my-0">
       <%- left_value %>
-    </h5>
+    </h6>
   </div>
   <div class="label choice">
     <span class="material-symbols-outlined"><%- right_icon  %></span>
-    <h5 class="h5 my-0">
+    <h6 class="my-0">
       <%- right_value %>
-    </h5>
+    </h6>
   </div>
 </div>
diff --git 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";
 
@@ -67,6 +70,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/_bs_utility_overrides.scss 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)),
+      ),
+    ),
+  ),
+);
diff --git 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
@@ -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
@@ -0,0 +1,20 @@
+[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
@@ -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: 14px;
+
+  --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: normal;
+}
diff --git 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;
 %>
 <!DOCTYPE html>
-<html lang="en-US" data-bs-theme="dark">
+<html lang="en-US" data-bs-theme="dark" data-theme="docs">
 
   <% include!("head.html"); %>
 

diff --git a/pgml-dashboard/templates/layout/web_app_base.html b/pgml-dashboard/templates/layout/web_app_base.html
@@ -15,7 +15,7 @@
 %>
 
 <!DOCTYPE html>
-<html lang="en-US" data-bs-theme="dark">
+<html lang="en-US" data-bs-theme="dark" data-theme="product">
     <%- head %>
     <body>
         <% for component in body_components { %>