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

Commit4b0888b

Browse files
Dan hp update components (#1394)
1 parent913106a commit4b0888b

File tree

59 files changed

+832
-103
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+832
-103
lines changed
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// This file is automatically generated.
2+
// You shouldn't modify it manually.
3+
4+
// src/components/cards/marketing/slider
5+
pubmod slider;
6+
pubuse slider::Slider;
7+
8+
// src/components/cards/marketing/twitter_testimonial
9+
pubmod twitter_testimonial;
10+
pubuse twitter_testimonial::TwitterTestimonial;
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
use pgml_components::component;
2+
use sailfish::TemplateOnce;
3+
4+
#[derive(TemplateOnce,Default,Clone)]
5+
#[template(path ="cards/marketing/slider/template.html")]
6+
pubstructSlider{
7+
title:String,
8+
link:String,
9+
image:String,
10+
bullets:Vec<String>,
11+
state:String,
12+
}
13+
14+
implSlider{
15+
pubfnnew() ->Slider{
16+
Slider{
17+
title:String::new(),
18+
link:String::new(),
19+
image:String::new(),
20+
bullets:Vec::new(),
21+
state:String::new(),
22+
}
23+
}
24+
25+
pubfntitle(mutself,title:&str) ->Self{
26+
self.title = title.to_string();
27+
self
28+
}
29+
30+
pubfnlink(mutself,link:&str) ->Self{
31+
self.link = link.to_string();
32+
self
33+
}
34+
35+
pubfnimage(mutself,image:&str) ->Self{
36+
self.image = image.to_string();
37+
self
38+
}
39+
40+
pubfnbullets(mutself,bullets:Vec<String>) ->Self{
41+
self.bullets = bullets;
42+
self
43+
}
44+
45+
pubfnactive(mutself) ->Self{
46+
self.state =String::from("active");
47+
self
48+
}
49+
50+
pubfndisabled(mutself) ->Self{
51+
self.state =String::from("disabled");
52+
self
53+
}
54+
}
55+
56+
component!(Slider);
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
div[data-controller="cards-marketing-slider"] {
2+
.card {
3+
display:flex;
4+
max-width:440px;
5+
padding:38px24px;
6+
flex-direction:column;
7+
align-items:flex-start;
8+
gap:24px;
9+
border-radius:20px;
10+
transition:transform0.3s;
11+
12+
width:440px;
13+
height:100%;
14+
min-height:550px;
15+
background:#{$gray-700};
16+
17+
&.disabled {
18+
transform:scale(0.9);
19+
background:#{$gray-800}!important;
20+
min-height:492px;
21+
}
22+
}
23+
@includemedia-breakpoint-down(sm) {
24+
.card,.card.disabled {
25+
width:100%;
26+
}
27+
}
28+
29+
.card-body {
30+
gap:24px;
31+
}
32+
33+
.link {
34+
display:flex;
35+
width:fit-content;
36+
}
37+
}
38+
39+
.disabled {
40+
div[data-controller="cards-marketing-slider"] {
41+
.card {
42+
transform:scale(0.9);
43+
background:#{$gray-800}!important;
44+
min-height:492px;
45+
46+
.card-body,.title {
47+
color:#{$gray-300};
48+
}
49+
50+
.link {
51+
visibility:hidden;
52+
}
53+
}
54+
}
55+
}
56+
57+
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<%
2+
use crate::components::icons::Checkmark;
3+
%>
4+
<divdata-controller="cards-marketing-slider">
5+
<divclass="card <%- state %>">
6+
<divclass="card-body d-flex flex-column p-0 w-100">
7+
<imgclass="img-fluid"src="<%- image %>"alt="feature image">
8+
<divclass="d-flex gap-3 flex-column h-100">
9+
<h5class="title"><%- title %></h5>
10+
<ulclass="list-group gap-3">
11+
<% for bullet in bullets {%>
12+
<divclass="d-flex flex-row align-items-center gap-2">
13+
<%+ Checkmark::new().active() %><divclass="d-flex align-items-center gap-2"><%- bullet %></div>
14+
</div>
15+
<% } %>
16+
</ul>
17+
<% if link.len()> 0 {%>
18+
<aclass="link mt-auto btn btn-tertiary goto-arrow-hover-trigger p-0"href="<%- link %>">Learn More<spanclass="material-symbols-outlined goto-arrow-shift-animation">arrow_forward</span></a>
19+
<% } %>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
use pgml_components::component;
2+
use sailfish::TemplateOnce;
3+
4+
#[derive(TemplateOnce,Default,Clone)]
5+
#[template(path ="cards/marketing/twitter_testimonial/template.html")]
6+
pubstructTwitterTestimonial{
7+
statement:String,
8+
image:String,
9+
name:String,
10+
handle:String,
11+
verified:bool,
12+
}
13+
14+
implTwitterTestimonial{
15+
pubfnnew() ->TwitterTestimonial{
16+
TwitterTestimonial{
17+
statement:String::from("src/components/cards/marketing/twitter_testimonial"),
18+
image:String::new(),
19+
name:String::new(),
20+
handle:String::new(),
21+
verified:false,
22+
}
23+
}
24+
25+
pubfnstatement(mutself,statement:&str) ->Self{
26+
self.statement = statement.to_owned();
27+
self
28+
}
29+
30+
pubfnimage(mutself,image:&str) ->Self{
31+
self.image = image.to_owned();
32+
self
33+
}
34+
35+
pubfnname(mutself,name:&str) ->Self{
36+
self.name = name.to_owned();
37+
self
38+
}
39+
40+
pubfnhandle(mutself,handle:&str) ->Self{
41+
self.handle = handle.to_owned();
42+
self
43+
}
44+
45+
pubfnverified(mutself) ->Self{
46+
self.verified =true;
47+
self
48+
}
49+
}
50+
51+
component!(TwitterTestimonial);
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<%
2+
use crate::components::icons::Twitter as twitter_icon;
3+
use crate::components::icons::Checkmark;
4+
%>
5+
6+
<divdata-controller="cards-marketing-twitter-testimonial">
7+
<divclass="card card-dark gap-2 rounded-4">
8+
<pclass="text-soft-white"><%- statement %></p>
9+
<divclass="d-flex flex-row justify-content-between align-items-center">
10+
<divclass="d-flex flex-row gap-2">
11+
<imgsrc="<%= image %>"alt="<%= name %>"class="rounded-circle"style="width: 42px; height: 42px;">
12+
<divclass="d-flex flex-column text-white-300">
13+
<divclass="d-flex flex-row gap-1"><pclass="m-0"><%- name %></p><% if verified {%><%+ Checkmark::new().twitter() %><% } %></div>
14+
<pclass="m-0">@<%- handle %></p>
15+
</div>
16+
</div>
17+
<%+ twitter_icon::new() %>
18+
</div>
19+
</div>
20+
</div>
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
div[data-controller="cards-marketing-twitter-testimonial"] {
2+
.card {
3+
padding:32px24px;
4+
min-width:288px;
5+
}
6+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
// src/components/cards/blog
55
pubmod blog;
66

7+
// src/components/cards/marketing
8+
pubmod marketing;
9+
710
// src/components/cards/newsletter_subscribe
811
pubmod newsletter_subscribe;
912
pubuse newsletter_subscribe::NewsletterSubscribe;

‎pgml-dashboard/src/components/carousel/carousel.scss

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,4 @@ div[data-controller="carousel"] {
44
transition-property:margin-left;
55
transition-duration:700ms;
66
}
7-
8-
.carousel-indicator {
9-
display:flex;
10-
gap:11px;
11-
justify-content:center;
12-
align-items:center;
13-
}
14-
15-
.timer-container {
16-
width:1rem;
17-
height:1rem;
18-
background-color:#{$gray-700};
19-
border-radius:1rem;
20-
transition:width0.25s;
21-
}
22-
23-
.timer-active {
24-
.timer {
25-
background-color:#00E0FF;
26-
animation: TimerGrow5000ms;
27-
}
28-
}
29-
30-
.timer {
31-
width:1rem;
32-
height:1rem;
33-
border-radius:1rem;
34-
background-color:#{$gray-700};
35-
animation-fill-mode:forwards;
36-
}
37-
38-
@keyframesTimerGrow {
39-
from {width:1rem;}
40-
to {width:4rem;}
41-
}
42-
43-
.timer-pause {
44-
.timer {
45-
animation-play-state:paused!important;
46-
}
47-
}
487
}

‎pgml-dashboard/src/components/carousel/carousel_controller.js

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { Controller } from "@hotwired/stimulus";
33
exportdefaultclassextendsController{
44
statictargets=["carousel","carouselTimer","template"];
55

6+
staticvalues={
7+
identifier:Number,
8+
};
9+
610
initialize(){
711
this.paused=false;
812
this.runtime=0;
@@ -30,50 +34,32 @@ export default class extends Controller {
3034
}
3135
}
3236

33-
changeIndicator(current,next){
34-
lettimers=this.carouselTimerTargets;
35-
letcurrentTimer=timers[current];
36-
letnextTimer=timers[next];
37-
38-
if(currentTimer){
39-
currentTimer.classList.remove("timer-active");
40-
currentTimer.style.width="1rem";
41-
}
42-
if(nextTimer){
43-
nextTimer.style.width="4rem";
44-
nextTimer.classList.add("timer-active");
45-
}
46-
}
47-
4837
Pause(){
4938
this.paused=true;
39+
letpause=newCustomEvent("paginatePause",{
40+
detail:{identifier:this.identifierValue},
41+
});
42+
window.dispatchEvent(pause);
5043
}
5144

5245
Resume(){
5346
this.paused=false;
47+
letresume=newCustomEvent("paginateResume",{
48+
detail:{identifier:this.identifierValue},
49+
});
50+
window.dispatchEvent(resume);
5451
}
5552

5653
cycle(){
5754
this.interval=setInterval(()=>{
5855
// maintain paused state through entire loop
5956
letpaused=this.paused;
6057

61-
letactiveTimer=document.getElementsByClassName("timer-active")[0];
62-
if(paused){
63-
if(activeTimer){
64-
activeTimer.classList.add("timer-pause");
65-
}
66-
}else{
67-
if(activeTimer&&activeTimer.classList.contains("timer-pause")){
68-
activeTimer.classList.remove("timer-pause");
69-
}
70-
}
71-
7258
if(!paused&&this.runtime%5==0){
7359
letcurrentIndex=this.times%this.templateTargets.length;
7460
letnextIndex=(this.times+1)%this.templateTargets.length;
7561

76-
this.changeIndicator(currentIndex,nextIndex);
62+
this.changePagination(currentIndex,nextIndex);
7763
this.changeFeatured(this.templateTargets[nextIndex]);
7864
this.times++;
7965
}
@@ -84,6 +70,17 @@ export default class extends Controller {
8470
},1000);
8571
}
8672

73+
changePagination(current,next){
74+
letevent=newCustomEvent("paginateNext",{
75+
detail:{
76+
current:current,
77+
next:next,
78+
identifier:this.identifierValue,
79+
},
80+
});
81+
window.dispatchEvent(event);
82+
}
83+
8784
disconnect(){
8885
clearInterval(this.interval);
8986
}

0 commit comments

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