Skip to content

add options capability to range input, add typography to site, fix sw… #1094

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 19, 2023
Merged

add options capability to range input, add typography to site, fix sw… #1094

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions pgml-dashboard/src/components/inputs/range_group/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ pub struct RangeGroup {
pub cost_rate: Option<f32>,
pub units: String,
pub group_target: StimulusTarget,
pub options: Vec<Vec<String>>,
pub show_value: bool,
pub show_title: bool,
}

impl RangeGroup {
Expand All @@ -32,6 +35,9 @@ impl RangeGroup {
cost_rate: None,
units: String::default(),
group_target: StimulusTarget::new(),
options: Vec::new(),
show_value: true,
show_title: true,
}
}

Expand Down Expand Up @@ -76,6 +82,29 @@ impl RangeGroup {
self.group_target = target;
self
}

pub fn options(mut self, options: Vec<Vec<String>>) -> Self {
self.options = options;
self.min = 1;
self.max = self.options.len() as i64;
self.step = 1.0;
self
}

pub fn title(mut self, title: &str) -> Self {
self.title = title.to_owned();
self
}

pub fn hide_title(mut self) -> Self {
self.show_title = false;
self
}

pub fn hide_value(mut self) -> Self {
self.show_value = false;
self
}
}

component!(RangeGroup);
69 changes: 69 additions & 0 deletions pgml-dashboard/src/components/inputs/range_group/range_group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,73 @@ div[data-controller="inputs-range-group"] {
.unit {
width: 28px;
}

.tick {
width: 5px;
height: 1.5rem;
background-color: $form-range-track-color;
border-radius: 1rem;

&.active-color {
background-color: #{$neon-shade-100} !important;
}
}

.input-offset {
width: 80%;
margin-left: 3%;
display: flex;
}

.tick-container {
position: relative;
top: -24px;
margin-bottom: -24px;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 80%;
margin-left: 3%;
padding-left: 10px;
padding-right: 10px;
}

.tick-unit {
overflow: visible;
width: 5px;
}

.tick-text {
color: #{$slate-tint-100};
&.active-color {
color: #{$slate-tint-700};
}
}

.line {
width: 100%;
height: 5px;
background: linear-gradient(to right, #{$neon-shade-100} 5%, #{$form-range-track-color} 5%);
position: absolute;
top: 11px;
border-radius: 1rem;
}

.grab-brightness {
filter: brightness(90%) !important;
}

.range-container {
position: relative;

&:hover {
.line {
filter: brightness(110%);
}

.active-color {
filter: brightness(110%);
}
}
}
}
74 changes: 71 additions & 3 deletions pgml-dashboard/src/components/inputs/range_group/range_group_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@ export default class extends Controller {
static targets = [
"range",
"text",
"group"
"group",
"line",
"tick",
"tickText",
"smScreenText"
]

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

initialize() {
this.textTarget.value = this.rangeTarget.value
this.updateTicks(this.rangeTarget.value)
this.updateTicksText(this.rangeTarget.value)
}

updateText(e) {
this.textTarget.value = e.target.value
this.groupTarget.dispatchEvent(new Event("rangeInput"))
this.element.dataset.detail = e.target.value
this.groupTarget.dispatchEvent(new CustomEvent("rangeInput", { detail: e.target.value }))
}

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

this.groupTarget.dispatchEvent(new Event("rangeInput"))
this.element.dataset.detail = this.rangeTarget.value
this.groupTarget.dispatchEvent(new CustomEvent("rangeInput", { detail: this.rangeTarget.value }))
}

isNumeric(n) {
Expand All @@ -44,5 +52,65 @@ export default class extends Controller {
reset() {
this.rangeTarget.value = this.initialValue
this.textTarget.value = this.initialValue
this.updateTicks(this.initialValue)
this.updateTicksText(this.initialValue)
this.element.dataset.detail = this.initialValue
this.groupTarget.dispatchEvent(new CustomEvent("rangeInput", { detail: this.rangeTarget.value }))
}

on_grab () {
if(!this.hasTickTarget || !this.hasLineTarget ) return;

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")
}})
}

on_release() {
if(!this.hasTickTarget || !this.hasLineTarget ) return;

this.lineTarget.classList.remove("grab-brightness")
this.tickTargets.forEach((tick, index) => {
if( index < this.rangeTarget.value ) {
tick.classList.remove("grab-brightness")
}})
}

updateTicks(value) {
if(!this.hasTickTarget) return;

this.tickTargets.forEach((tick, index) => {
if( index < value ) {
tick.classList.add("active-color")
} else {
tick.classList.remove("active-color")
}
})
}

updateTicksText(value) {
if(this.hasTickTextTarget && this.hasSmScreenTextTarget) {
this.tickTextTargets.forEach((tickText, index) => {
if( index + 1 == value ) {
tickText.classList.add("active-color")
this.smScreenTextTargets[index].style.display = "flex"
} else {
tickText.classList.remove("active-color")
this.smScreenTextTargets[index].style.display = "none"
}
})
}
}

updateTicksEventWrapper(e) {
this.updateTicks(e.target.value)
}

updateTicksTextEventWrapper(e) {
this.updateTicksText(e.target.value)
}
}
52 changes: 41 additions & 11 deletions pgml-dashboard/src/components/inputs/range_group/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<div data-controller="inputs-range-group"
data-inputs-range-group-bounds-value='{"min": <%- min%>, "max": <%- max%>}'
data-inputs-range-group-initial-value="<%- initial_value.to_string() %>"
data-detail="<%- initial_value.to_string() %>"
data-inputs-range-group-target="group"
<%- group_target %>
data-action="reset->inputs-range-group#reset">
<div class="d-flex flex-column flex-md-row">
<% if show_title { %>
<div class="flex-grow-1">
<h6 class="h6"><%- title %></h6>
</div>
<div>
<% } %>
<div <% if !show_value { %> style="display: none"<% } %>>
<div class="input-group">
<input class="text-input form-control text-end text-white fw-bold" maxlength="5" type="text"
data-inputs-range-group-target="text"
Expand All @@ -21,16 +24,43 @@ <h6 class="h6"><%- title %></h6>
</div>
</div>

<input class="form-range"
type="range"
name="<%- identifier %>"
min="<%- min %>"
max="<%- max %>"
step="<%- step %>"
value="<%- initial_value.to_string() %>"
data-action="inputs-range-group#updateText"
data-inputs-range-group-target="range"
<%- range_target %>>
<div class="range-container">
<input class="form-range z-1 <% if options.len() > 0 { %> input-offset <% } %>"
type="range"
name="<%- identifier %>"
min="<%- min %>"
max="<%- max %>"
step="<%- step %>"
value="<%- initial_value.to_string() %>"
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"
data-inputs-range-group-target="range"
<%- range_target %>>

<% if options.len() > 0 { %>
<div class="tick-container">
<% for item in &options { %>
<div class="tick-unit">
<div class="tick" data-inputs-range-group-target="tick"></div>

<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>

<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 { %>
<div class="legal-text fw-bold" ><%- info.replace("Memory", "") %></div>
<% } %>
</div>
</div>
</div>
<% } %>
</div>
<div class="line w-100" data-inputs-range-group-target="line"></div>
<% } %>
</div>

<% if cost_rate.is_some() { %>
<div class="w-100 d-flex justify-content-end">
Expand Down
1 change: 1 addition & 0 deletions pgml-dashboard/src/components/inputs/switch/switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ div[data-controller="inputs-switch"] {
border-radius: 5rem;
text-align: center;
display: flex;
justify-content: center;
@extend .gap-2;
}

Expand Down
1 change: 1 addition & 0 deletions pgml-dashboard/static/css/scss/abstracts/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ $form-check-radio-checked-bg-image: none;

$form-range-track-height: .4rem;
$form-range-track-box-shadow: none;
$form-range-track-color: #{$gray-600};
$form-range-thumb-width: 1rem;
$form-range-thumb-box-shadow: none;
$form-range-thumb-transition: none;
Expand Down
60 changes: 52 additions & 8 deletions pgml-dashboard/static/css/scss/base/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,62 @@
// all other displays are default bootstrap styling
.display-2 {
font-weight: 700;
font-weight: $font-weight-bold;
font-size: 4rem;
line-height: 80px;
}

// TODO: Go through html and ensure headers use appropriate header class, header and class do not need to match.
// .h1 {font-weight: 700; font-size: 64px; line-height: 72px;}
// .h2 {font-weight: 700; font-size: 48px; line-height: 54px;}
// .h3 {font-weight: 700; font-size: 40px; line-height: 46px;}
// .h4 {font-weight: 700; font-size: 32px; line-height: 40px;}
// .h5 {font-weight: 700; font-size: 28px; line-height: 34px;}
// .h6 {font-weight: 700; font-size: 24px; line-height: 30px;}
.h1-big {
font-weight: $font-weight-bold; font-size: 80px; line-height: 84px;
@include media-breakpoint-down(md) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this right? I remember last time we did this, the fonts were too small on mobile, not too big.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe you're also looking for "display" classes which are the headers but "big": https://getbootstrap.com/docs/5.3/content/typography/#display-headings

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On another note, I don't think we should be using pixels anymore, but rems.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No before they were too big on mobile. I'll send you the slack conversation.

Copy link
Contributor Author

@chillenberger chillenberger Oct 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly this can be redone the bootstap way (setitng the scss variables). Unfortunately some of the measurements in rem are pretty ugly fractions

Copy link
Contributor

@levkk levkk Oct 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should adjust our typography accordingly I think. Pixels are not responsive if I remember correctly, that's why the industry switched to ems and then to rems. I could be wrong about the reasoning, but I'm pretty certain everyone uses rems these days.

font-size: 48px; line-height: 52px;
}
}
h1, .h1 {
font-weight: $font-weight-bold; font-size: 64px; line-height: 72px;
@include media-breakpoint-down(md) {
font-size: 44px; line-height: 48px;
}
}
h2, .h2 {
font-weight: $font-weight-bold; font-size: 48px; line-height: 54px;
@include media-breakpoint-down(md) {
font-size: 40px; line-height: 44px;
}
}
h3, .h3 {
font-weight: $font-weight-bold; font-size: 40px; line-height: 46px;
@include media-breakpoint-down(md) {
font-size: 32px; line-height: 36px;
}
}
h4, .h4 {
font-weight: $font-weight-bold; font-size: 32px; line-height: 40px;
@include media-breakpoint-down(md) {
font-size: 28px; line-height: 32px;
}
}
h5, .h5 {
font-weight: $font-weight-bold; font-size: 28px; line-height: 34px;
@include media-breakpoint-down(md) {
font-size: 24px; line-height: 28px;
}
}
h6, .h6 {
font-weight: $font-weight-bold; font-size: 24px; line-height: 30px;
@include media-breakpoint-down(md) {
font-size: 20px; line-height: 26px;
}
}

.eyebrow {
font-weight: $font-weight-bold; font-size: 18px; line-height: 24px;
@include media-breakpoint-down(md) {
font-size: 16px; line-height: 22px;
}
}

.subcopy-text {
font-family: Inter;
font-size: 18px;
line-height: 22px;
}
Expand All @@ -22,6 +65,7 @@
line-height: 20px;
}
.legal-text {
font-family: Inter;
font-size: 12px;
line-height: 16px;
}
Expand Down
Loading