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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy