Skip to content

Commit 4b0888b

Browse files
chillenbergerchillenberger
authored
Dan hp update components (#1394)
1 parent 913106a commit 4b0888b

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

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

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+
pub mod slider;
6+
pub use slider::Slider;
7+
8+
// src/components/cards/marketing/twitter_testimonial
9+
pub mod twitter_testimonial;
10+
pub use twitter_testimonial::TwitterTestimonial;

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

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+
pub struct Slider {
7+
title: String,
8+
link: String,
9+
image: String,
10+
bullets: Vec<String>,
11+
state: String,
12+
}
13+
14+
impl Slider {
15+
pub fn new() -> 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+
pub fn title(mut self, title: &str) -> Self {
26+
self.title = title.to_string();
27+
self
28+
}
29+
30+
pub fn link(mut self, link: &str) -> Self {
31+
self.link = link.to_string();
32+
self
33+
}
34+
35+
pub fn image(mut self, image: &str) -> Self {
36+
self.image = image.to_string();
37+
self
38+
}
39+
40+
pub fn bullets(mut self, bullets: Vec<String>) -> Self {
41+
self.bullets = bullets;
42+
self
43+
}
44+
45+
pub fn active(mut self) -> Self {
46+
self.state = String::from("active");
47+
self
48+
}
49+
50+
pub fn disabled(mut self) -> Self {
51+
self.state = String::from("disabled");
52+
self
53+
}
54+
}
55+
56+
component!(Slider);

‎pgml-dashboard/src/components/cards/marketing/slider/slider.scss

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: 38px 24px;
6+
flex-direction: column;
7+
align-items: flex-start;
8+
gap: 24px;
9+
border-radius: 20px;
10+
transition: transform 0.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+
@include media-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+

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

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+
<div data-controller="cards-marketing-slider">
5+
<div class="card <%- state %>">
6+
<div class="card-body d-flex flex-column p-0 w-100">
7+
<img class="img-fluid" src="<%- image %>" alt="feature image">
8+
<div class="d-flex gap-3 flex-column h-100">
9+
<h5 class="title"><%- title %></h5>
10+
<ul class="list-group gap-3">
11+
<% for bullet in bullets {%>
12+
<div class="d-flex flex-row align-items-center gap-2">
13+
<%+ Checkmark::new().active() %><div class="d-flex align-items-center gap-2"><%- bullet %></div>
14+
</div>
15+
<% } %>
16+
</ul>
17+
<% if link.len() > 0 {%>
18+
<a class="link mt-auto btn btn-tertiary goto-arrow-hover-trigger p-0" href="<%- link %>">Learn More <span class="material-symbols-outlined goto-arrow-shift-animation">arrow_forward</span></a>
19+
<% } %>
20+
</div>
21+
</div>
22+
</div>
23+
</div>

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

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+
pub struct TwitterTestimonial {
7+
statement: String,
8+
image: String,
9+
name: String,
10+
handle: String,
11+
verified: bool,
12+
}
13+
14+
impl TwitterTestimonial {
15+
pub fn new() -> 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+
pub fn statement(mut self, statement: &str) -> Self {
26+
self.statement = statement.to_owned();
27+
self
28+
}
29+
30+
pub fn image(mut self, image: &str) -> Self {
31+
self.image = image.to_owned();
32+
self
33+
}
34+
35+
pub fn name(mut self, name: &str) -> Self {
36+
self.name = name.to_owned();
37+
self
38+
}
39+
40+
pub fn handle(mut self, handle: &str) -> Self {
41+
self.handle = handle.to_owned();
42+
self
43+
}
44+
45+
pub fn verified(mut self) -> Self {
46+
self.verified = true;
47+
self
48+
}
49+
}
50+
51+
component!(TwitterTestimonial);

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

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+
<div data-controller="cards-marketing-twitter-testimonial">
7+
<div class="card card-dark gap-2 rounded-4">
8+
<p class="text-soft-white"><%- statement %></p>
9+
<div class="d-flex flex-row justify-content-between align-items-center">
10+
<div class="d-flex flex-row gap-2">
11+
<img src="<%= image %>" alt="<%= name %>" class="rounded-circle" style="width: 42px; height: 42px;">
12+
<div class="d-flex flex-column text-white-300">
13+
<div class="d-flex flex-row gap-1"><p class="m-0"><%- name %></p><% if verified {%><%+ Checkmark::new().twitter() %><% } %></div>
14+
<p class="m-0">@<%- handle %></p>
15+
</div>
16+
</div>
17+
<%+ twitter_icon::new() %>
18+
</div>
19+
</div>
20+
</div>

‎pgml-dashboard/src/components/cards/marketing/twitter_testimonial/twitter_testimonial.scss

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: 32px 24px;
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
pub mod blog;
66

7+
// src/components/cards/marketing
8+
pub mod marketing;
9+
710
// src/components/cards/newsletter_subscribe
811
pub mod newsletter_subscribe;
912
pub use 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: width 0.25s;
21-
}
22-
23-
.timer-active {
24-
.timer {
25-
background-color: #00E0FF;
26-
animation: TimerGrow 5000ms;
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-
@keyframes TimerGrow {
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
export default class extends Controller {
44
static targets = ["carousel", "carouselTimer", "template"];
55

6+
static values = {
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-
let timers = this.carouselTimerTargets;
35-
let currentTimer = timers[current];
36-
let nextTimer = 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+
let pause = new CustomEvent("paginatePause", {
40+
detail: { identifier: this.identifierValue },
41+
});
42+
window.dispatchEvent(pause);
5043
}
5144

5245
Resume() {
5346
this.paused = false;
47+
let resume = new CustomEvent("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
let paused = this.paused;
6057

61-
let activeTimer = 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
let currentIndex = this.times % this.templateTargets.length;
7460
let nextIndex = (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+
let event = new CustomEvent("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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy