Skip to content

Commit 16c87d4

Browse files
chillenbergerchillenberger
authored
add options capability to range input, add typography to site, fix sw… (#1094)
1 parent ba1aac9 commit 16c87d4

File tree

10 files changed

+332
-25
lines changed

10 files changed

+332
-25
lines changed

‎pgml-dashboard/src/components/inputs/range_group/mod.rs

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ pub struct RangeGroup {
1616
pub cost_rate: Option<f32>,
1717
pub units: String,
1818
pub group_target: StimulusTarget,
19+
pub options: Vec<Vec<String>>,
20+
pub show_value: bool,
21+
pub show_title: bool,
1922
}
2023

2124
impl RangeGroup {
@@ -32,6 +35,9 @@ impl RangeGroup {
3235
cost_rate: None,
3336
units: String::default(),
3437
group_target: StimulusTarget::new(),
38+
options: Vec::new(),
39+
show_value: true,
40+
show_title: true,
3541
}
3642
}
3743

@@ -76,6 +82,29 @@ impl RangeGroup {
7682
self.group_target = target;
7783
self
7884
}
85+
86+
pub fn options(mut self, options: Vec<Vec<String>>) -> Self {
87+
self.options = options;
88+
self.min = 1;
89+
self.max = self.options.len() as i64;
90+
self.step = 1.0;
91+
self
92+
}
93+
94+
pub fn title(mut self, title: &str) -> Self {
95+
self.title = title.to_owned();
96+
self
97+
}
98+
99+
pub fn hide_title(mut self) -> Self {
100+
self.show_title = false;
101+
self
102+
}
103+
104+
pub fn hide_value(mut self) -> Self {
105+
self.show_value = false;
106+
self
107+
}
79108
}
80109

81110
component!(RangeGroup);

‎pgml-dashboard/src/components/inputs/range_group/range_group.scss

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,73 @@ div[data-controller="inputs-range-group"] {
2626
.unit {
2727
width: 28px;
2828
}
29+
30+
.tick {
31+
width: 5px;
32+
height: 1.5rem;
33+
background-color: $form-range-track-color;
34+
border-radius: 1rem;
35+
36+
&.active-color {
37+
background-color: #{$neon-shade-100} !important;
38+
}
39+
}
40+
41+
.input-offset {
42+
width: 80%;
43+
margin-left: 3%;
44+
display: flex;
45+
}
46+
47+
.tick-container {
48+
position: relative;
49+
top: -24px;
50+
margin-bottom: -24px;
51+
display: flex;
52+
flex-direction: row;
53+
justify-content: space-between;
54+
width: 80%;
55+
margin-left: 3%;
56+
padding-left: 10px;
57+
padding-right: 10px;
58+
}
59+
60+
.tick-unit {
61+
overflow: visible;
62+
width: 5px;
63+
}
64+
65+
.tick-text {
66+
color: #{$slate-tint-100};
67+
&.active-color {
68+
color: #{$slate-tint-700};
69+
}
70+
}
71+
72+
.line {
73+
width: 100%;
74+
height: 5px;
75+
background: linear-gradient(to right, #{$neon-shade-100} 5%, #{$form-range-track-color} 5%);
76+
position: absolute;
77+
top: 11px;
78+
border-radius: 1rem;
79+
}
80+
81+
.grab-brightness {
82+
filter: brightness(90%) !important;
83+
}
84+
85+
.range-container {
86+
position: relative;
87+
88+
&:hover {
89+
.line {
90+
filter: brightness(110%);
91+
}
92+
93+
.active-color {
94+
filter: brightness(110%);
95+
}
96+
}
97+
}
2998
}

‎pgml-dashboard/src/components/inputs/range_group/range_group_controller.js

Lines changed: 71 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ export default class extends Controller {
55
static targets = [
66
"range",
77
"text",
8-
"group"
8+
"group",
9+
"line",
10+
"tick",
11+
"tickText",
12+
"smScreenText"
913
]
1014

1115
static values = {
@@ -15,11 +19,14 @@ export default class extends Controller {
1519

1620
initialize() {
1721
this.textTarget.value = this.rangeTarget.value
22+
this.updateTicks(this.rangeTarget.value)
23+
this.updateTicksText(this.rangeTarget.value)
1824
}
1925

2026
updateText(e) {
2127
this.textTarget.value = e.target.value
22-
this.groupTarget.dispatchEvent(new Event("rangeInput"))
28+
this.element.dataset.detail = e.target.value
29+
this.groupTarget.dispatchEvent(new CustomEvent("rangeInput", { detail: e.target.value }))
2330
}
2431

2532
updateRange(e) {
@@ -34,7 +41,8 @@ export default class extends Controller {
3441
this.rangeTarget.value = e.target.value
3542
}
3643

37-
this.groupTarget.dispatchEvent(new Event("rangeInput"))
44+
this.element.dataset.detail = this.rangeTarget.value
45+
this.groupTarget.dispatchEvent(new CustomEvent("rangeInput", { detail: this.rangeTarget.value }))
3846
}
3947

4048
isNumeric(n) {
@@ -44,5 +52,65 @@ export default class extends Controller {
4452
reset() {
4553
this.rangeTarget.value = this.initialValue
4654
this.textTarget.value = this.initialValue
55+
this.updateTicks(this.initialValue)
56+
this.updateTicksText(this.initialValue)
57+
this.element.dataset.detail = this.initialValue
58+
this.groupTarget.dispatchEvent(new CustomEvent("rangeInput", { detail: this.rangeTarget.value }))
59+
}
60+
61+
on_grab () {
62+
if(!this.hasTickTarget || !this.hasLineTarget ) return;
63+
64+
this.lineTarget.classList.add("grab-brightness")
65+
this.tickTargets.forEach((tick, index) => {
66+
if( index < this.rangeTarget.value ) {
67+
tick.classList.add("grab-brightness")
68+
} else {
69+
tick.classList.remove("grab-brightness")
70+
}})
71+
}
72+
73+
on_release() {
74+
if(!this.hasTickTarget || !this.hasLineTarget ) return;
75+
76+
this.lineTarget.classList.remove("grab-brightness")
77+
this.tickTargets.forEach((tick, index) => {
78+
if( index < this.rangeTarget.value ) {
79+
tick.classList.remove("grab-brightness")
80+
}})
81+
}
82+
83+
updateTicks(value) {
84+
if(!this.hasTickTarget) return;
85+
86+
this.tickTargets.forEach((tick, index) => {
87+
if( index < value ) {
88+
tick.classList.add("active-color")
89+
} else {
90+
tick.classList.remove("active-color")
91+
}
92+
})
93+
}
94+
95+
updateTicksText(value) {
96+
if(this.hasTickTextTarget && this.hasSmScreenTextTarget) {
97+
this.tickTextTargets.forEach((tickText, index) => {
98+
if( index + 1 == value ) {
99+
tickText.classList.add("active-color")
100+
this.smScreenTextTargets[index].style.display = "flex"
101+
} else {
102+
tickText.classList.remove("active-color")
103+
this.smScreenTextTargets[index].style.display = "none"
104+
}
105+
})
106+
}
107+
}
108+
109+
updateTicksEventWrapper(e) {
110+
this.updateTicks(e.target.value)
111+
}
112+
113+
updateTicksTextEventWrapper(e) {
114+
this.updateTicksText(e.target.value)
47115
}
48116
}

‎pgml-dashboard/src/components/inputs/range_group/template.html

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<div data-controller="inputs-range-group"
22
data-inputs-range-group-bounds-value='{"min": <%- min%>, "max": <%- max%>}'
33
data-inputs-range-group-initial-value="<%- initial_value.to_string() %>"
4+
data-detail="<%- initial_value.to_string() %>"
45
data-inputs-range-group-target="group"
56
<%- group_target %>
67
data-action="reset->inputs-range-group#reset">
78
<div class="d-flex flex-column flex-md-row">
9+
<% if show_title { %>
810
<div class="flex-grow-1">
911
<h6 class="h6"><%- title %></h6>
1012
</div>
11-
<div>
13+
<% } %>
14+
<div <% if !show_value { %> style="display: none"<% } %>>
1215
<div class="input-group">
1316
<input class="text-input form-control text-end text-white fw-bold" maxlength="5" type="text"
1417
data-inputs-range-group-target="text"
@@ -21,16 +24,43 @@ <h6 class="h6"><%- title %></h6>
2124
</div>
2225
</div>
2326

24-
<input class="form-range"
25-
type="range"
26-
name="<%- identifier %>"
27-
min="<%- min %>"
28-
max="<%- max %>"
29-
step="<%- step %>"
30-
value="<%- initial_value.to_string() %>"
31-
data-action="inputs-range-group#updateText"
32-
data-inputs-range-group-target="range"
33-
<%- range_target %>>
27+
<div class="range-container">
28+
<input class="form-range z-1 <% if options.len() > 0 { %> input-offset <% } %>"
29+
type="range"
30+
name="<%- identifier %>"
31+
min="<%- min %>"
32+
max="<%- max %>"
33+
step="<%- step %>"
34+
value="<%- initial_value.to_string() %>"
35+
data-action="inputs-range-group#updateText mousedown->inputs-range-group#on_grab mouseup->inputs-range-group#on_release inputs-range-group#updateTicksEventWrapper inputs-range-group#updateTicksTextEventWrapper"
36+
data-inputs-range-group-target="range"
37+
<%- range_target %>>
38+
39+
<% if options.len() > 0 { %>
40+
<div class="tick-container">
41+
<% for item in &options { %>
42+
<div class="tick-unit">
43+
<div class="tick" data-inputs-range-group-target="tick"></div>
44+
45+
<div class="d-none d-lg-flex flex-column text-nowrap mt-2 tick-text" data-inputs-range-group-target="tickText">
46+
<% for info in item { %>
47+
<div class="legal-text fw-bold" ><%- info %></div>
48+
<% } %>
49+
</div>
50+
51+
<div class="d-block d-lg-none">
52+
<div class="flex-column text-nowrap mt-2 tick-text" data-inputs-range-group-target="smScreenText">
53+
<% for info in item { %>
54+
<div class="legal-text fw-bold" ><%- info.replace("Memory", "") %></div>
55+
<% } %>
56+
</div>
57+
</div>
58+
</div>
59+
<% } %>
60+
</div>
61+
<div class="line w-100" data-inputs-range-group-target="line"></div>
62+
<% } %>
63+
</div>
3464

3565
<% if cost_rate.is_some() { %>
3666
<div class="w-100 d-flex justify-content-end">

‎pgml-dashboard/src/components/inputs/switch/switch.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ div[data-controller="inputs-switch"] {
1111
border-radius: 5rem;
1212
text-align: center;
1313
display: flex;
14+
justify-content: center;
1415
@extend .gap-2;
1516
}
1617

‎pgml-dashboard/static/css/scss/abstracts/variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ $form-check-radio-checked-bg-image: none;
174174

175175
$form-range-track-height: .4rem;
176176
$form-range-track-box-shadow: none;
177+
$form-range-track-color: #{$gray-600};
177178
$form-range-thumb-width: 1rem;
178179
$form-range-thumb-box-shadow: none;
179180
$form-range-thumb-transition: none;

‎pgml-dashboard/static/css/scss/base/_typography.scss

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,62 @@
11
// all other displays are default bootstrap styling
22
.display-2 {
3-
font-weight: 700;
3+
font-weight: $font-weight-bold;
44
font-size: 4rem;
55
line-height: 80px;
66
}
77

8-
// TODO: Go through html and ensure headers use appropriate header class, header and class do not need to match.
9-
// .h1 {font-weight: 700; font-size: 64px; line-height: 72px;}
10-
// .h2 {font-weight: 700; font-size: 48px; line-height: 54px;}
11-
// .h3 {font-weight: 700; font-size: 40px; line-height: 46px;}
12-
// .h4 {font-weight: 700; font-size: 32px; line-height: 40px;}
13-
// .h5 {font-weight: 700; font-size: 28px; line-height: 34px;}
14-
// .h6 {font-weight: 700; font-size: 24px; line-height: 30px;}
8+
.h1-big {
9+
font-weight: $font-weight-bold; font-size: 80px; line-height: 84px;
10+
@include media-breakpoint-down(md) {
11+
font-size: 48px; line-height: 52px;
12+
}
13+
}
14+
h1, .h1 {
15+
font-weight: $font-weight-bold; font-size: 64px; line-height: 72px;
16+
@include media-breakpoint-down(md) {
17+
font-size: 44px; line-height: 48px;
18+
}
19+
}
20+
h2, .h2 {
21+
font-weight: $font-weight-bold; font-size: 48px; line-height: 54px;
22+
@include media-breakpoint-down(md) {
23+
font-size: 40px; line-height: 44px;
24+
}
25+
}
26+
h3, .h3 {
27+
font-weight: $font-weight-bold; font-size: 40px; line-height: 46px;
28+
@include media-breakpoint-down(md) {
29+
font-size: 32px; line-height: 36px;
30+
}
31+
}
32+
h4, .h4 {
33+
font-weight: $font-weight-bold; font-size: 32px; line-height: 40px;
34+
@include media-breakpoint-down(md) {
35+
font-size: 28px; line-height: 32px;
36+
}
37+
}
38+
h5, .h5 {
39+
font-weight: $font-weight-bold; font-size: 28px; line-height: 34px;
40+
@include media-breakpoint-down(md) {
41+
font-size: 24px; line-height: 28px;
42+
}
43+
}
44+
h6, .h6 {
45+
font-weight: $font-weight-bold; font-size: 24px; line-height: 30px;
46+
@include media-breakpoint-down(md) {
47+
font-size: 20px; line-height: 26px;
48+
}
49+
}
50+
51+
.eyebrow {
52+
font-weight: $font-weight-bold; font-size: 18px; line-height: 24px;
53+
@include media-breakpoint-down(md) {
54+
font-size: 16px; line-height: 22px;
55+
}
56+
}
1557

1658
.subcopy-text {
59+
font-family: Inter;
1760
font-size: 18px;
1861
line-height: 22px;
1962
}
@@ -22,6 +65,7 @@
2265
line-height: 20px;
2366
}
2467
.legal-text {
68+
font-family: Inter;
2569
font-size: 12px;
2670
line-height: 16px;
2771
}

0 commit comments

Comments
 (0)