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

Dan hp update components#1394

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 8 commits intomasterfromdan-hp-update-components
Apr 4, 2024
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
10 changes: 10 additions & 0 deletionspgml-dashboard/src/components/cards/marketing/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
// This file is automatically generated.
// You shouldn't modify it manually.

// src/components/cards/marketing/slider
pub mod slider;
pub use slider::Slider;

// src/components/cards/marketing/twitter_testimonial
pub mod twitter_testimonial;
pub use twitter_testimonial::TwitterTestimonial;
56 changes: 56 additions & 0 deletionspgml-dashboard/src/components/cards/marketing/slider/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
use pgml_components::component;
use sailfish::TemplateOnce;

#[derive(TemplateOnce, Default, Clone)]
#[template(path = "cards/marketing/slider/template.html")]
pub struct Slider {
title: String,
link: String,
image: String,
bullets: Vec<String>,
state: String,
}

impl Slider {
pub fn new() -> Slider {
Slider {
title: String::new(),
link: String::new(),
image: String::new(),
bullets: Vec::new(),
state: String::new(),
}
}

pub fn title(mut self, title: &str) -> Self {
self.title = title.to_string();
self
}

pub fn link(mut self, link: &str) -> Self {
self.link = link.to_string();
self
}

pub fn image(mut self, image: &str) -> Self {
self.image = image.to_string();
self
}

pub fn bullets(mut self, bullets: Vec<String>) -> Self {
self.bullets = bullets;
self
}

pub fn active(mut self) -> Self {
self.state = String::from("active");
self
}

pub fn disabled(mut self) -> Self {
self.state = String::from("disabled");
self
}
}

component!(Slider);
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
div[data-controller="cards-marketing-slider"] {
.card {
display: flex;
max-width: 440px;
padding: 38px 24px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
border-radius: 20px;
transition: transform 0.3s;

width: 440px;
height: 100%;
min-height: 550px;
background: #{$gray-700};

&.disabled {
transform: scale(0.9);
background: #{$gray-800} !important;
min-height: 492px;
}
}
@include media-breakpoint-down(sm) {
.card, .card.disabled {
width: 100%;
}
}

.card-body {
gap: 24px;
}

.link {
display: flex;
width: fit-content;
}
}

.disabled {
div[data-controller="cards-marketing-slider"] {
.card {
transform: scale(0.9);
background: #{$gray-800} !important;
min-height: 492px;

.card-body, .title {
color: #{$gray-300};
}

.link {
visibility: hidden;
}
}
}
}


View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
<%
use crate::components::icons::Checkmark;
%>
<div data-controller="cards-marketing-slider">
<div class="card <%- state %>">
<div class="card-body d-flex flex-column p-0 w-100">
<img class="img-fluid" src="<%- image %>" alt="feature image">
<div class="d-flex gap-3 flex-column h-100">
<h5 class="title"><%- title %></h5>
<ul class="list-group gap-3">
<% for bullet in bullets {%>
<div class="d-flex flex-row align-items-center gap-2">
<%+ Checkmark::new().active() %><div class="d-flex align-items-center gap-2"><%- bullet %></div>
</div>
<% } %>
</ul>
<% if link.len() > 0 {%>
<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>
<% } %>
</div>
</div>
</div>
</div>
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
use pgml_components::component;
use sailfish::TemplateOnce;

#[derive(TemplateOnce, Default, Clone)]
#[template(path = "cards/marketing/twitter_testimonial/template.html")]
pub struct TwitterTestimonial {
statement: String,
image: String,
name: String,
handle: String,
verified: bool,
}

impl TwitterTestimonial {
pub fn new() -> TwitterTestimonial {
TwitterTestimonial {
statement: String::from("src/components/cards/marketing/twitter_testimonial"),
image: String::new(),
name: String::new(),
handle: String::new(),
verified: false,
}
}

pub fn statement(mut self, statement: &str) -> Self {
self.statement = statement.to_owned();
self
}

pub fn image(mut self, image: &str) -> Self {
self.image = image.to_owned();
self
}

pub fn name(mut self, name: &str) -> Self {
self.name = name.to_owned();
self
}

pub fn handle(mut self, handle: &str) -> Self {
self.handle = handle.to_owned();
self
}

pub fn verified(mut self) -> Self {
self.verified = true;
self
}
}

component!(TwitterTestimonial);
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
<%
use crate::components::icons::Twitter as twitter_icon;
use crate::components::icons::Checkmark;
%>

<div data-controller="cards-marketing-twitter-testimonial">
<div class="card card-dark gap-2 rounded-4">
<p class="text-soft-white"><%- statement %></p>
<div class="d-flex flex-row justify-content-between align-items-center">
<div class="d-flex flex-row gap-2">
<img src="<%= image %>" alt="<%= name %>" class="rounded-circle" style="width: 42px; height: 42px;">
<div class="d-flex flex-column text-white-300">
<div class="d-flex flex-row gap-1"><p class="m-0"><%- name %></p><% if verified {%><%+ Checkmark::new().twitter() %><% } %></div>
<p class="m-0">@<%- handle %></p>
</div>
</div>
<%+ twitter_icon::new() %>
</div>
</div>
</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
div[data-controller="cards-marketing-twitter-testimonial"] {
.card {
padding: 32px 24px;
min-width: 288px;
}
}
3 changes: 3 additions & 0 deletionspgml-dashboard/src/components/cards/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,9 @@
// src/components/cards/blog
pub mod blog;

// src/components/cards/marketing
pub mod marketing;

// src/components/cards/newsletter_subscribe
pub mod newsletter_subscribe;
pub use newsletter_subscribe::NewsletterSubscribe;
Expand Down
41 changes: 0 additions & 41 deletionspgml-dashboard/src/components/carousel/carousel.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,45 +4,4 @@ div[data-controller="carousel"] {
transition-property: margin-left;
transition-duration: 700ms;
}

.carousel-indicator {
display: flex;
gap: 11px;
justify-content: center;
align-items: center;
}

.timer-container {
width: 1rem;
height: 1rem;
background-color: #{$gray-700};
border-radius: 1rem;
transition: width 0.25s;
}

.timer-active {
.timer {
background-color: #00E0FF;
animation: TimerGrow 5000ms;
}
}

.timer {
width: 1rem;
height: 1rem;
border-radius: 1rem;
background-color: #{$gray-700};
animation-fill-mode: forwards;
}

@keyframes TimerGrow {
from {width: 1rem;}
to {width: 4rem;}
}

.timer-pause {
.timer {
animation-play-state: paused !important;
}
}
}
51 changes: 24 additions & 27 deletionspgml-dashboard/src/components/carousel/carousel_controller.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,10 @@ import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
static targets = ["carousel", "carouselTimer", "template"];

static values = {
identifier: Number,
};

initialize() {
this.paused = false;
this.runtime = 0;
Expand DownExpand Up@@ -30,50 +34,32 @@ export default class extends Controller {
}
}

changeIndicator(current, next) {
let timers = this.carouselTimerTargets;
let currentTimer = timers[current];
let nextTimer = timers[next];

if (currentTimer) {
currentTimer.classList.remove("timer-active");
currentTimer.style.width = "1rem";
}
if (nextTimer) {
nextTimer.style.width = "4rem";
nextTimer.classList.add("timer-active");
}
}

Pause() {
this.paused = true;
let pause = new CustomEvent("paginatePause", {
detail: { identifier: this.identifierValue },
});
window.dispatchEvent(pause);
}

Resume() {
this.paused = false;
let resume = new CustomEvent("paginateResume", {
detail: { identifier: this.identifierValue },
});
window.dispatchEvent(resume);
}

cycle() {
this.interval = setInterval(() => {
// maintain paused state through entire loop
let paused = this.paused;

let activeTimer = document.getElementsByClassName("timer-active")[0];
if (paused) {
if (activeTimer) {
activeTimer.classList.add("timer-pause");
}
} else {
if (activeTimer && activeTimer.classList.contains("timer-pause")) {
activeTimer.classList.remove("timer-pause");
}
}

if (!paused && this.runtime % 5 == 0) {
let currentIndex = this.times % this.templateTargets.length;
let nextIndex = (this.times + 1) % this.templateTargets.length;

this.changeIndicator(currentIndex, nextIndex);
this.changePagination(currentIndex, nextIndex);
this.changeFeatured(this.templateTargets[nextIndex]);
this.times++;
}
Expand All@@ -84,6 +70,17 @@ export default class extends Controller {
}, 1000);
}

changePagination(current, next) {
let event = new CustomEvent("paginateNext", {
detail: {
current: current,
next: next,
identifier: this.identifierValue,
},
});
window.dispatchEvent(event);
}

disconnect() {
clearInterval(this.interval);
}
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp