From 451eb14d442d81362a735726b8636e0bb8d72b32 Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Fri, 29 Mar 2024 15:01:11 -0600 Subject: [PATCH 1/6] add components for new homepage --- pgml-dashboard/Cargo.lock | 5 +- .../src/components/cards/marketing/mod.rs | 6 ++ .../components/cards/marketing/slider/mod.rs | 56 ++++++++++++ .../cards/marketing/slider/slider.scss | 54 ++++++++++++ .../cards/marketing/slider/template.html | 21 +++++ pgml-dashboard/src/components/cards/mod.rs | 3 + .../src/components/carousel/carousel.scss | 41 --------- .../carousel/carousel_controller.js | 39 +++------ .../src/components/carousel/template.html | 17 ++-- .../components/icons/checkmark/checkmark.scss | 42 +++++++++ .../src/components/icons/checkmark/mod.rs | 40 +++++++++ .../components/icons/checkmark/template.html | 25 ++++++ pgml-dashboard/src/components/icons/mod.rs | 6 ++ pgml-dashboard/src/components/mod.rs | 11 +++ .../left_nav/docs/docs_controller.js | 68 +++++++-------- .../feature_banner/feature_banner.scss | 5 -- .../marketing/feature_banner/template.html | 4 +- .../careers/landing_page/landing_page.scss | 7 -- .../pages/careers/landing_page/template.html | 8 +- .../docs/landing_page/alt_card_template.html | 4 +- .../src/components/pagination/mod.rs | 32 +++++++ .../src/components/pagination/pagination.scss | 59 +++++++++++++ .../pagination/pagination_controller.js | 51 +++++++++++ .../src/components/pagination/template.html | 21 +++++ pgml-dashboard/src/components/slider/mod.rs | 22 +++++ .../src/components/slider/slider.scss | 16 ++++ .../components/slider/slider_controller.js | 82 ++++++++++++++++++ .../src/components/slider/template.html | 23 +++++ pgml-dashboard/src/lib.rs | 1 + pgml-dashboard/static/css/modules.scss | 4 + .../static/css/scss/base/_animations.scss | 11 ++- .../images/illustrations/death_star_plans.png | Bin 0 -> 177246 bytes .../static/images/illustrations/field.png | Bin 0 -> 180108 bytes .../static/images/illustrations/gravity.png | Bin 0 -> 190507 bytes .../images/illustrations/singularity.png | Bin 0 -> 106903 bytes .../images/illustrations/transverse_wave.png | Bin 0 -> 108821 bytes .../templates/content/playground.html | 33 +++++++ 37 files changed, 680 insertions(+), 137 deletions(-) create mode 100644 pgml-dashboard/src/components/cards/marketing/mod.rs create mode 100644 pgml-dashboard/src/components/cards/marketing/slider/mod.rs create mode 100644 pgml-dashboard/src/components/cards/marketing/slider/slider.scss create mode 100644 pgml-dashboard/src/components/cards/marketing/slider/template.html create mode 100644 pgml-dashboard/src/components/icons/checkmark/checkmark.scss create mode 100644 pgml-dashboard/src/components/icons/checkmark/mod.rs create mode 100644 pgml-dashboard/src/components/icons/checkmark/template.html create mode 100644 pgml-dashboard/src/components/icons/mod.rs create mode 100644 pgml-dashboard/src/components/pagination/mod.rs create mode 100644 pgml-dashboard/src/components/pagination/pagination.scss create mode 100644 pgml-dashboard/src/components/pagination/pagination_controller.js create mode 100644 pgml-dashboard/src/components/pagination/template.html create mode 100644 pgml-dashboard/src/components/slider/mod.rs create mode 100644 pgml-dashboard/src/components/slider/slider.scss create mode 100644 pgml-dashboard/src/components/slider/slider_controller.js create mode 100644 pgml-dashboard/src/components/slider/template.html create mode 100644 pgml-dashboard/static/images/illustrations/death_star_plans.png create mode 100644 pgml-dashboard/static/images/illustrations/field.png create mode 100644 pgml-dashboard/static/images/illustrations/gravity.png create mode 100644 pgml-dashboard/static/images/illustrations/singularity.png create mode 100644 pgml-dashboard/static/images/illustrations/transverse_wave.png diff --git a/pgml-dashboard/Cargo.lock b/pgml-dashboard/Cargo.lock index 6d9483caf..52b8acdef 100644 --- a/pgml-dashboard/Cargo.lock +++ b/pgml-dashboard/Cargo.lock @@ -2354,9 +2354,9 @@ dependencies = [ [[package]] name = "once_cell" -version = "1.18.0" +version = "1.19.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "dd8b5dd2ae5ed71462c540258bedcb51965123ad7e7ccf4b9a8cafaa4a63576d" +checksum = "3fdb12b2476b595f9358c5161aa467c2438859caa136dec86c26fdd2efe17b92" [[package]] name = "oneshot" @@ -2559,6 +2559,7 @@ dependencies = [ "itertools", "lopdf", "md5", + "once_cell", "parking_lot", "regex", "reqwest", diff --git a/pgml-dashboard/src/components/cards/marketing/mod.rs b/pgml-dashboard/src/components/cards/marketing/mod.rs new file mode 100644 index 000000000..18f036336 --- /dev/null +++ b/pgml-dashboard/src/components/cards/marketing/mod.rs @@ -0,0 +1,6 @@ +// This file is automatically generated. +// You shouldn't modify it manually. + +// src/components/cards/marketing/slider +pub mod slider; +pub use slider::Slider; diff --git a/pgml-dashboard/src/components/cards/marketing/slider/mod.rs b/pgml-dashboard/src/components/cards/marketing/slider/mod.rs new file mode 100644 index 000000000..a7b7b380b --- /dev/null +++ b/pgml-dashboard/src/components/cards/marketing/slider/mod.rs @@ -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, + 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) -> 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); diff --git a/pgml-dashboard/src/components/cards/marketing/slider/slider.scss b/pgml-dashboard/src/components/cards/marketing/slider/slider.scss new file mode 100644 index 000000000..184d7160f --- /dev/null +++ b/pgml-dashboard/src/components/cards/marketing/slider/slider.scss @@ -0,0 +1,54 @@ +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}; + } + } + @include media-breakpoint-down(sm) { + .card, .card.disabled { + width: 100%; + } + } + + .card-body { + gap: 24px; + } + + .link { + display: flex; + width: fit-content; + } +} + + + +.disabled { + .card { + transform: scale(0.9); + background: #{$gray-800} !important; + min-height: 492px; + + .card-body, .title { + color: #{$gray-300}; + } + + .link { + display: none; + } + } +} diff --git a/pgml-dashboard/src/components/cards/marketing/slider/template.html b/pgml-dashboard/src/components/cards/marketing/slider/template.html new file mode 100644 index 000000000..3713b468b --- /dev/null +++ b/pgml-dashboard/src/components/cards/marketing/slider/template.html @@ -0,0 +1,21 @@ +<% + use crate::components::icons::Checkmark; +%> +
+
+
+ feature image +
+
<%- title %>
+
    + <% for bullet in bullets {%> +
    + <%+ Checkmark::new().active() %>
    <%- bullet %>
    +
    + <% } %> +
+ Learn More arrow_forward +
+
+
+
diff --git a/pgml-dashboard/src/components/cards/mod.rs b/pgml-dashboard/src/components/cards/mod.rs index 00dfd1a7c..81c47ee92 100644 --- a/pgml-dashboard/src/components/cards/mod.rs +++ b/pgml-dashboard/src/components/cards/mod.rs @@ -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; diff --git a/pgml-dashboard/src/components/carousel/carousel.scss b/pgml-dashboard/src/components/carousel/carousel.scss index 9d02a3867..7b2dbd34e 100644 --- a/pgml-dashboard/src/components/carousel/carousel.scss +++ b/pgml-dashboard/src/components/carousel/carousel.scss @@ -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; - } - } } diff --git a/pgml-dashboard/src/components/carousel/carousel_controller.js b/pgml-dashboard/src/components/carousel/carousel_controller.js index 367a3ea49..c8702d054 100644 --- a/pgml-dashboard/src/components/carousel/carousel_controller.js +++ b/pgml-dashboard/src/components/carousel/carousel_controller.js @@ -30,27 +30,16 @@ 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", {}); + window.dispatchEvent(pause); } Resume() { this.paused = false; + let resume = new CustomEvent("paginateResume", {}); + window.dispatchEvent(resume); } cycle() { @@ -58,22 +47,11 @@ export default class extends Controller { // 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++; } @@ -84,6 +62,13 @@ export default class extends Controller { }, 1000); } + changePagination(current, next) { + let event = new CustomEvent("paginateNext", { + detail: { current: current, next: next }, + }); + window.dispatchEvent(event); + } + disconnect() { clearInterval(this.interval); } diff --git a/pgml-dashboard/src/components/carousel/template.html b/pgml-dashboard/src/components/carousel/template.html index 4228ba03e..569c68dd9 100644 --- a/pgml-dashboard/src/components/carousel/template.html +++ b/pgml-dashboard/src/components/carousel/template.html @@ -1,3 +1,8 @@ +<% + use crate::components::Pagination; + let items_len = items.len(); +%> +
<% for item in &items {%>