postgresml · chillenberger · Oct 24, 2023 · Oct 20, 2023 · Oct 23, 2023 · Oct 24, 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
@@ -4,19 +4,8 @@ div[data-controller="inputs-range-group"] {
     }
 
     .hourly-rate {
-        display: flex;
-        flex-direction: row;
         background-color: #{$gray-900};
-        border-radius: $border-radius;
-        padding: 8px 4px;
-
         color: #{$gray-400};
-        text-align: center;
-        font-size: 18px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 24px;
-        letter-spacing: 0.18px;
     }
 
     .cost {

diff --git a/pgml-dashboard/src/components/inputs/range_group/template.html b/pgml-dashboard/src/components/inputs/range_group/template.html
@@ -42,12 +42,14 @@ <h6 class="h6"><%- title %></h6>
           <div class="tick-unit">
             <div class="tick" data-inputs-range-group-target="tick"></div>
 
+            <!-- large screen content -->
             <div class="d-none d-lg-flex flex-column text-nowrap mt-2 tick-text" data-inputs-range-group-target="tickText">
               <% for info in item { %>
               <div class="legal-text fw-bold" ><%- info %></div>
               <% } %>
             </div>
 
+            <!-- small screen content  -->
             <div class="d-block d-lg-none">
               <div class="flex-column text-nowrap mt-2 tick-text" data-inputs-range-group-target="smScreenText">
                 <% for info in item { %>

diff --git a/pgml-dashboard/src/components/inputs/select/select_controller.js b/pgml-dashboard/src/components/inputs/select/select_controller.js
@@ -4,8 +4,16 @@ export default class extends Controller {
   static targets = ["input", "value"]
 
   choose(e) {
-    this.inputTarget.value = e.target.innerHTML
-    this.valueTarget.innerHTML = e.target.innerHTML
+    this.setValue(e.target.innerHTML)
+  }
+
+  resetSelect() {
+    this.setValue(this.element.dataset.initial)
+  }
+
+  setValue(value) {
+    this.inputTarget.value = value
+    this.valueTarget.innerHTML = value
     this.inputTarget.dispatchEvent(new Event('change'))
   }
 }
diff --git a/pgml-dashboard/src/components/inputs/select/template.html b/pgml-dashboard/src/components/inputs/select/template.html
@@ -2,7 +2,7 @@
 use crate::components::dropdown::Dropdown;
 use crate::components::stimulus::stimulus_target::StimulusTarget;
 %>
-<div data-controller="inputs-select">
+<div data-controller="inputs-select" data-initial="<%- value.clone() %>">
 
   <% let mut dropdown = Dropdown::new()
       .items(options)
@@ -29,5 +29,5 @@
 
   <%+ dropdown %>
 
-  <input type="hidden" name="<%= name %>" value="<%= value %>" data-inputs-select-target="input" <%- value_target %> data-action="<%- action %>" />
+  <input type="hidden" name="<%= name %>" value="<%= value %>" data-inputs-select-target="input" <%- value_target %> data-action="<%- action %> reset->inputs-select#resetSelect" />
 </div>
diff --git a/pgml-dashboard/src/components/inputs/switch/mod.rs b/pgml-dashboard/src/components/inputs/switch/mod.rs
@@ -60,8 +60,8 @@ impl Switch {
         self
     }
 
-    pub fn start_toggled(mut self) -> Switch {
-        self.initial_state = State::Right;
+    pub fn default_position(mut self, state: State) -> Switch {
+        self.initial_state = state;
         self
     }
 

diff --git a/pgml-dashboard/src/components/inputs/switch/switch.scss b/pgml-dashboard/src/components/inputs/switch/switch.scss
@@ -7,11 +7,12 @@ div[data-controller="inputs-switch"] {
     }
 
     .label {
-        padding: 8px 20px;
+        padding: 8px 40px;
         border-radius: 5rem;
         text-align: center;
         display: flex;
         justify-content: center;
+        align-items: center;
         @extend .gap-2;
     }
 

diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/editable_header.scss b/pgml-dashboard/src/components/inputs/text/editable_header/editable_header.scss
@@ -33,4 +33,10 @@ div[data-controller="inputs-text-editable-header"] {
         padding: 0px;
         margin-bottom: -2px; // compensate for border space
     }
+
+    #title {
+        &.error {
+            border-bottom: 1px solid #{$error}
+        }
+    }
 }
diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/editable_header_controller.js b/pgml-dashboard/src/components/inputs/text/editable_header/editable_header_controller.js
@@ -31,9 +31,11 @@ export default class extends Controller {
   error(e) {
     this.errorTarget.innerHTML = e.detail
     this.errorTarget.style.display = "block"
+    this.headerTarget.classList.add("error")
   }
 
   clear() {
     this.errorTarget.style.display = "none"
+    this.headerTarget.classList.remove("error")
   }
 }
diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/template.html b/pgml-dashboard/src/components/inputs/text/editable_header/template.html
@@ -5,7 +5,7 @@
   <div class="editable-header-container" style="display: block"
     data-action="click->inputs-text-editable-header#toggleEditor">
     <<%= header_type.to_string() %> class="align-items-center <%= header_type.to_string() %> d-flex gap-3">
-      <span  data-inputs-text-editable-header-target="header">
+      <span  data-inputs-text-editable-header-target="header" id="title">
         <%= value %>
       </span>
 

diff --git a/pgml-dashboard/src/components/lists/item/mod.rs b/pgml-dashboard/src/components/lists/item/mod.rs
@@ -0,0 +1,23 @@
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "lists/item/template.html")]
+pub struct Item {
+    value: String,
+}
+
+impl Item {
+    pub fn new() -> Item {
+        Item {
+            value: String::from("Your list item"),
+        }
+    }
+
+    pub fn value(mut self, value: &str) -> Item {
+        self.value = value.into();
+        self
+    }
+}
+
+component!(Item);
diff --git a/pgml-dashboard/src/components/lists/item/template.html b/pgml-dashboard/src/components/lists/item/template.html
@@ -0,0 +1,4 @@
+<div class="list-group-item d-flex align-items-center gap-2">
+  <img loading="lazy" src="/dashboard/static/images/icons/checkmark.svg" width="15" height="11" alt="Checkmark">
+  <%- value %>
+</div>
diff --git a/pgml-dashboard/src/components/lists/mod.rs b/pgml-dashboard/src/components/lists/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/lists/item
+pub mod item;
+pub use item::Item;
diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs
@@ -32,6 +32,9 @@ pub mod inputs;
 pub mod left_nav_menu;
 pub use left_nav_menu::LeftNavMenu;
 
+// src/components/lists
+pub mod lists;
+
 // src/components/modal
 pub mod modal;
 pub use modal::Modal;

diff --git a/pgml-dashboard/static/css/scss/abstracts/variables.scss b/pgml-dashboard/static/css/scss/abstracts/variables.scss
@@ -97,13 +97,24 @@ $slate-shade-800: #2B274C;
 $slate-shade-900: #1D1A33;
 $slate-shade-1000: #0E0D19;
 
+$magenta-shade-100: #E6008A;
+$magenta-shade-200: #cf007c;
+$magenta-shade-300: #b8006e;
+$magenta-shade-400: #a10060;
+$magenta-shade-500: #8a0052;
+$magenta-shade-600: #730045;
+$magenta-shade-700: #5c0037;
+$magenta-shade-800: #450029;
+$magenta-shade-900: #2e001b;
+$magenta-shade-1000: #17000d;
+
 // Colors
 $primary: #0D0D0E;
 $secondary: $gray-100;
 $danger: $peach-shade-100;
 $error: $peach-shade-100;
 $purple: $slate-tint-100;
-$pink: #e7477c;
+$pink: $magenta-shade-100;
 $hp-white: #{$gray-200};
 
 // Background Colors

diff --git a/pgml-dashboard/static/css/scss/components/_badges.scss b/pgml-dashboard/static/css/scss/components/_badges.scss
@@ -5,8 +5,7 @@
     align-items: center;
 }
 
-.version-badge {
-    @extend .badge;
+.eyebrow-badge {
     text-transform: uppercase;
     color: #{$pink};
 }

diff --git a/pgml-dashboard/static/css/scss/components/_forms.scss b/pgml-dashboard/static/css/scss/components/_forms.scss
@@ -256,3 +256,20 @@
     background: transparent;
     caret-color: #{$input-color};
 }
+
+.hourly-rate {
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+    background-color: #{$gray-900};
+    border-radius: $border-radius;
+    padding: 16px 20px;
+
+    color: #{$gray-400};
+    text-align: center;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0.18px;
+}
diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html
@@ -7,7 +7,7 @@
 use crate::components::stimulus::stimulus_action::StimulusAction;
 use crate::components::stimulus::stimulus_action::StimulusEvents;
 use crate::components::inputs::select::Select;
-use crate::components::inputs::switch::Switch;
+use crate::components::inputs::switch::{Switch, State};
 %>
 
 <div class="min-height: 100vh;" data-controller="playground">
@@ -223,7 +223,7 @@ <h3 class="h3">Inputs</h3>
               .name("switch"))
             .left("CPU", "memory")
             .right("GPU", "mode_fan")
-            .start_toggled() %>
+            .default_position(State::Right) %>
           </div>
           <div>
             <button data-action="click->playground#resetSwitch">Reset Switch</button>

diff --git a/pgml-dashboard/templates/layout/web_app_base.html b/pgml-dashboard/templates/layout/web_app_base.html
@@ -30,7 +30,7 @@
                         <%+ WebAppLeftNav::new( upper_left_nav, lower_left_nav, dropdown_nav ) %>
 
                         <div class="clear-from-under-navbar flex-grow-1 min-vw-0">
-                            <div class="px-5 py-3" style="position: absolute">
+                            <div class="px-4 px-sm-5 py-3" style="position: absolute">
                                 <%- Breadcrumbs::render( breadcrumbs ) %>
                             </div>