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

Commit16c87d4

Browse files
add options capability to range input, add typography to site, fix sw… (#1094)
1 parentba1aac9 commit16c87d4

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
pubcost_rate:Option<f32>,
1717
pubunits:String,
1818
pubgroup_target:StimulusTarget,
19+
puboptions:Vec<Vec<String>>,
20+
pubshow_value:bool,
21+
pubshow_title:bool,
1922
}
2023

2124
implRangeGroup{
@@ -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+
pubfnoptions(mutself,options:Vec<Vec<String>>) ->Self{
87+
self.options = options;
88+
self.min =1;
89+
self.max =self.options.len()asi64;
90+
self.step =1.0;
91+
self
92+
}
93+
94+
pubfntitle(mutself,title:&str) ->Self{
95+
self.title = title.to_owned();
96+
self
97+
}
98+
99+
pubfnhide_title(mutself) ->Self{
100+
self.show_title =false;
101+
self
102+
}
103+
104+
pubfnhide_value(mutself) ->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(toright,#{$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
statictargets=[
66
"range",
77
"text",
8-
"group"
8+
"group",
9+
"line",
10+
"tick",
11+
"tickText",
12+
"smScreenText"
913
]
1014

1115
staticvalues={
@@ -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(newEvent("rangeInput"))
28+
this.element.dataset.detail=e.target.value
29+
this.groupTarget.dispatchEvent(newCustomEvent("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(newEvent("rangeInput"))
44+
this.element.dataset.detail=this.rangeTarget.value
45+
this.groupTarget.dispatchEvent(newCustomEvent("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(newCustomEvent("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
<divdata-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
<divclass="d-flex flex-column flex-md-row">
9+
<% if show_title { %>
810
<divclass="flex-grow-1">
911
<h6class="h6"><%- title %></h6>
1012
</div>
11-
<div>
13+
<% } %>
14+
<div<% if !show_value { %> style="display: none"<% } %>>
1215
<divclass="input-group">
1316
<inputclass="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-
<inputclass="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+
<divclass="range-container">
28+
<inputclass="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+
<divclass="tick-container">
41+
<% for item in &options { %>
42+
<divclass="tick-unit">
43+
<divclass="tick"data-inputs-range-group-target="tick"></div>
44+
45+
<divclass="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+
<divclass="legal-text fw-bold"><%- info %></div>
48+
<% } %>
49+
</div>
50+
51+
<divclass="d-block d-lg-none">
52+
<divclass="flex-column text-nowrap mt-2 tick-text"data-inputs-range-group-target="smScreenText">
53+
<% for info in item { %>
54+
<divclass="legal-text fw-bold"><%- info.replace("Memory", "") %></div>
55+
<% } %>
56+
</div>
57+
</div>
58+
</div>
59+
<% } %>
60+
</div>
61+
<divclass="line w-100"data-inputs-range-group-target="line"></div>
62+
<% } %>
63+
</div>
3464

3565
<% if cost_rate.is_some() { %>
3666
<divclass="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+
@includemedia-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+
@includemedia-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+
@includemedia-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+
@includemedia-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+
@includemedia-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+
@includemedia-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+
@includemedia-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+
@includemedia-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)
[8]ページ先頭
©2009-2025 Movatter.jp