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

Commit7df1e83

Browse files
Dan pricing page updates (#1476)
1 parent03ca54e commit7df1e83

File tree

28 files changed

+613
-47
lines changed

28 files changed

+613
-47
lines changed

‎pgml-dashboard/src/components/cards/marketing/slider/template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h5 class="title"><%- title %></h5>
1010
<ulclass="list-group gap-3">
1111
<% for bullet in bullets {%>
1212
<divclass="d-flex flex-row align-items-center gap-2">
13-
<%+ Checkmark::new().active() %><divclass="d-flex align-items-center gap-2"><%- bullet %></div>
13+
<%+ Checkmark::new() %><divclass="d-flex align-items-center gap-2"><%- bullet %></div>
1414
</div>
1515
<% } %>
1616
</ul>

‎pgml-dashboard/src/components/cards/newsletter_subscribe/newsletter_subscribe.scss

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,4 @@
11
div[data-controller="cards-newsletter-subscribe"] {
2-
.newsletter-subscribe-container {
3-
background-position:center;
4-
background-size:cover;
5-
background-repeat:no-repeat;
6-
@includemedia-breakpoint-up(md) {
7-
background-image:url("/dashboard/static/images/newsletter_subscribe_background_desktop.png");
8-
}
9-
background-image:url("/dashboard/static/images/newsletter_subscribe_background_mobile.png");
10-
background-color:#{$pink};
11-
}
12-
132
.message {
143
display:none;
154

‎pgml-dashboard/src/components/cards/newsletter_subscribe/template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
<turbo-frameid="newsletter-subscribe-frame">
3434
<divdata-controller="cards-newsletter-subscribe">
35-
<divclass="d-flex flex-column flex-lg-row gap-5 justify-content-between align-items-center newsletter-subscribe-container py-5 ps-xl-5 px-3 rounded-4">
35+
<divclass="d-flex flex-column flex-lg-row gap-5 justify-content-between align-items-center newsletter-subscribe-containerpsychedelic-pink-bgpy-5 ps-xl-5 px-3 rounded-4">
3636
<divclass="d-flex flex-column gap-4 text-center text-md-start w-100">
3737
<h3>Subscribe to our newsletter.<br> (It’s better than you think)</h3>
3838
<p>No spam. No sales pitches. Just product updates. Keep up with all our articles and news. Join our newsletter and stay up to date!</p>

‎pgml-dashboard/src/components/icons/checkmark/checkmark.scss

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
div[data-controller="icons-checkmark"] {
2-
.active {
2+
.blue {
33
.first {
44
stop-color:#3EDCFF;
55
}
@@ -8,7 +8,25 @@ div[data-controller="icons-checkmark"] {
88
}
99
}
1010

11-
.inactive {
11+
.green {
12+
.first {
13+
stop-color:#44FFDD;
14+
}
15+
.second {
16+
stop-color:#05C168;
17+
}
18+
}
19+
20+
.orange {
21+
.first {
22+
stop-color:#FFB444;
23+
}
24+
.second {
25+
stop-color:#FF6644;
26+
}
27+
}
28+
29+
.white {
1230
.first {
1331
stop-color:#{$gray-100};
1432
}
@@ -17,6 +35,15 @@ div[data-controller="icons-checkmark"] {
1735
}
1836
}
1937

38+
.purple {
39+
.first {
40+
stop-color:#5337FF;
41+
}
42+
.second {
43+
stop-color:#A175FF;
44+
}
45+
}
46+
2047
.disabled {
2148
.first {
2249
stop-color:#{$gray-500};

‎pgml-dashboard/src/components/icons/checkmark/mod.rs

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,27 @@ use sailfish::TemplateOnce;
44
#[derive(TemplateOnce,Default)]
55
#[template(path ="icons/checkmark/template.html")]
66
pubstructCheckmark{
7-
state:String,
7+
color:String,
88
twitter:bool,
9+
disabled:bool,
910
}
1011

1112
implCheckmark{
1213
pubfnnew() ->Checkmark{
1314
Checkmark{
14-
state:String::from("inactive"),
15+
color:String::from("blue"),
1516
twitter:false,
17+
disabled:false,
1618
}
1719
}
1820

19-
pubfnactive(mutself) ->Self{
20-
self.state =String::from("active");
21-
self
22-
}
23-
24-
pubfninactive(mutself) ->Self{
25-
self.state =String::from("inactive");
21+
pubfncolor(mutself,color:&str) ->Self{
22+
self.color =String::from(color);
2623
self
2724
}
2825

2926
pubfndisabled(mutself) ->Self{
30-
self.state =String::from("disabled");
27+
self.disabled =true;
3128
self
3229
}
3330

‎pgml-dashboard/src/components/icons/checkmark/template.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
use rand::Rng;
33
let mut rng = rand::thread_rng();
44
let id = rng.gen::<u16>();
5+
6+
let color_class = if disabled {
7+
"disabled"
8+
} else {
9+
&color
10+
};
511
%>
612
<divdata-controller="icons-checkmark"class="d-flex">
713
<% if twitter {%>
@@ -10,7 +16,7 @@
1016
</svg>
1117
<% } else {%>
1218

13-
<divclass="d-flex <%-state %>">
19+
<divclass="d-flex <%-color_class %>">
1420
<svgxmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 16 16"fill="none">
1521
<pathd="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16Z"fill="url(#paint0_linear_1258_466_<%- id%>)"/>
1622
<defs>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,18 @@ pub mod labels;
1212
pubmod radio;
1313
pubuse radio::Radio;
1414

15+
// src/components/inputs/range
16+
pubmod range;
17+
pubuse range::Range;
18+
1519
// src/components/inputs/range_group
1620
pubmod range_group;
1721
pubuse range_group::RangeGroup;
1822

23+
// src/components/inputs/range_group_pricing_calc
24+
pubmod range_group_pricing_calc;
25+
pubuse range_group_pricing_calc::RangeGroupPricingCalc;
26+
1927
// src/components/inputs/range_group_v_2
2028
pubmod range_group_v_2;
2129
pubuse range_group_v_2::RangeGroupV2;
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
usecrate::components::stimulus::StimulusTargetasTarget;
2+
use pgml_components::component;
3+
use sailfish::TemplateOnce;
4+
5+
#[derive(Default)]
6+
pubenumInterpolationType{
7+
#[default]
8+
Linear,
9+
Exponential,
10+
}
11+
12+
implToStringforInterpolationType{
13+
fnto_string(&self) ->String{
14+
matchself{
15+
InterpolationType::Linear =>String::from("linear"),
16+
InterpolationType::Exponential =>String::from("exponential"),
17+
}
18+
}
19+
}
20+
21+
implFrom<&str>forInterpolationType{
22+
fnfrom(s:&str) ->Self{
23+
match s{
24+
"linear" =>InterpolationType::Linear,
25+
"exponential" =>InterpolationType::Exponential,
26+
_ =>InterpolationType::Linear,
27+
}
28+
}
29+
}
30+
31+
#[derive(TemplateOnce,Default)]
32+
#[template(path ="inputs/range/template.html")]
33+
pubstructRange{
34+
color:String,
35+
min:i32,
36+
max:i32,
37+
interpolation_type:InterpolationType,
38+
target:Target,
39+
initial_value:i32,
40+
}
41+
42+
implRange{
43+
pubfnnew() ->Range{
44+
Range{
45+
color:String::from("slate"),
46+
min:1000,
47+
max:1000000,
48+
interpolation_type:InterpolationType::Linear,
49+
target:Target::new(),
50+
initial_value:0,
51+
}
52+
}
53+
54+
pubfncolor(mutself,color:&str) ->Self{
55+
self.color = color.to_string();
56+
self
57+
}
58+
59+
pubfnmin(mutself,min:i32) ->Self{
60+
self.min = min;
61+
self
62+
}
63+
64+
pubfnmax(mutself,max:i32) ->Self{
65+
self.max = max;
66+
self
67+
}
68+
69+
pubfninterpolation_type(mutself,interpolation_type:&str) ->Self{
70+
self.interpolation_type =InterpolationType::from(interpolation_type);
71+
self
72+
}
73+
74+
pubfntarget(mutself,target:Target) ->Self{
75+
self.target = target;
76+
self
77+
}
78+
79+
pubfninitial_value(mutself,initial_value:i32) ->Self{
80+
self.initial_value = initial_value;
81+
self
82+
}
83+
}
84+
85+
component!(Range);
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
div[data-controller="inputs-range"] {
2+
// This allows line overhang for rounding range edges.
3+
.overlay-offset {
4+
width:calc(100%-4px);
5+
margin-left:2px;
6+
}
7+
8+
.line {
9+
width:100%;
10+
height:5px;
11+
position:absolute;
12+
top:11px;
13+
border-radius:1rem;
14+
}
15+
16+
.grab-brightness {
17+
filter:brightness(90%)!important;
18+
}
19+
20+
.range-container {
21+
position:relative;
22+
23+
&:hover {
24+
.line {
25+
filter:brightness(110%);
26+
}
27+
28+
.active-color {
29+
filter:brightness(110%);
30+
}
31+
}
32+
}
33+
34+
// Quick resize fix. This may become a global change later.
35+
.input-group {
36+
padding:8px;
37+
}
38+
39+
@mixincolor_dependent($color) {
40+
.line {
41+
background:linear-gradient(toright,#{$color}5%,#{$form-range-track-color}5%);
42+
}
43+
44+
.form-range {
45+
& {
46+
color:#{$color};
47+
}
48+
}
49+
}
50+
.slate {
51+
@includecolor_dependent($slate-shade-100);
52+
}
53+
.neon {
54+
@includecolor_dependent($neon-shade-100);
55+
}
56+
}
Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import{Controller}from"@hotwired/stimulus";
2+
3+
exportdefaultclassextendsController{
4+
statictargets=["range","line"];
5+
6+
staticvalues={
7+
interpolationType:String,
8+
min:Number,
9+
max:Number,
10+
initial:Number,
11+
};
12+
13+
staticoutlets=[];
14+
15+
initialize(){}
16+
17+
connect(){
18+
// console.log("range connected", this.initialValue)
19+
this.rangeTarget.value=
20+
this.interpolationTypeValue==="exponential"
21+
?this.exponentialInterpolationSolveX(this.initialValue)
22+
:this.linearInterpolationSolveX(this.initialValue);
23+
}
24+
25+
onGrab(){
26+
if(this.hasLineTarget){
27+
this.lineTarget.classList.add("grab-brightness");
28+
}
29+
}
30+
31+
onRelease(){
32+
if(this.hasLineTarget){
33+
this.lineTarget.classList.remove("grab-brightness");
34+
}
35+
}
36+
37+
updateSlider(e){
38+
this.rangeTarget.value=
39+
this.interpolationTypeValue==="exponential"
40+
?this.exponentialInterpolationSolveX(e.detail)
41+
:this.linearInterpolationSolveX(e.detail);
42+
}
43+
44+
sliderMoved(){
45+
this.dispatch("sliderMoved",{
46+
detail:
47+
this.interpolationTypeValue==="exponential"
48+
?this.exponentialInterpolation(this.rangeTarget.value)
49+
:this.linearInterpolation(this.rangeTarget.value),
50+
});
51+
}
52+
53+
exponentialInterpolation(value){
54+
if(value<1){
55+
return0;
56+
}
57+
58+
letminValue=this.minValue>1 ?this.minValue :1;
59+
60+
letpow=value/100;
61+
letout=minValue*Math.pow(this.maxValue/minValue,pow);
62+
returnparseInt(Number(out.toPrecision(3)));
63+
}
64+
65+
exponentialInterpolationSolveX(value){
66+
if(value<1){
67+
returnthis.linearInterpolationSolveX(value);
68+
}
69+
70+
letminValue=this.minValue>1 ?this.minValue :1;
71+
72+
letnumerator=Math.log(value/minValue);
73+
letdenominator=Math.log(this.maxValue/minValue);
74+
letout=(numerator/denominator)*100;
75+
// console.log(numerator, denominator, out, Number(out.toPrecision(3)))
76+
returnparseInt(Number(out.toPrecision(3)));
77+
}
78+
79+
linearInterpolation(value){
80+
letout=(this.maxValue-this.minValue)*(value/100)+this.minValue;
81+
returnparseInt(Number(out.toPrecision(3)));
82+
}
83+
84+
linearInterpolationSolveX(value){
85+
// console.log("linear solve x ", value, this.minValue, this.maxValue)
86+
letout=((value-this.minValue)/(this.maxValue-this.minValue))*100;
87+
returnparseInt(Number(out.toPrecision(3)));
88+
}
89+
90+
disconnect(){}
91+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp