Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
chillenberger merged 1 commit intomasterfromdan-range-input-update
Oct 19, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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 deletionspgml-dashboard/src/components/inputs/range_group/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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);
View file
Open in desktop
Original file line numberDiff line numberDiff 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%);
}
}
}
}
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionspgml-dashboard/src/components/inputs/range_group/template.html
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionspgml-dashboard/static/css/scss/base/_typography.scss
View file
Open in desktop
Original file line numberDiff line numberDiff 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
ContributorAuthor

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.

levkk reacted with thumbs up emoji
Copy link
ContributorAuthor

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

@levkklevkkOct 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
[8]ページ先頭
©2009-2025 Movatter.jp