You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pulsar.apache.org by ur...@apache.org on 2022/03/30 01:31:30 UTC
[pulsar-site] branch main updated: community page image carousel
This is an automated email from the ASF dual-hosted git repository.
urfree pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
The following commit(s) were added to refs/heads/main by this push:
new 4d46854 community page image carousel
new d78b52e Merge pull request #34 from Paul-TT/paul-tt-website-new
4d46854 is described below
commit 4d46854a56102020119d95d99f6b0a99b3f62876
Author: Paul Thomas Au <pa...@traverstodd.com>
AuthorDate: Mon Mar 28 16:48:33 2022 -0700
community page image carousel
---
site2/website-next/src/components/EventCards.js | 2 +-
site2/website-next/src/css/custom.css | 3 ++
site2/website-next/src/pages/community.js | 37 ++++++++++++++++++++-
.../website-next/static/img/community-image-2.jpg | Bin 0 -> 85712 bytes
.../website-next/static/img/community-image-3.jpg | Bin 0 -> 91308 bytes
5 files changed, 40 insertions(+), 2 deletions(-)
diff --git a/site2/website-next/src/components/EventCards.js b/site2/website-next/src/components/EventCards.js
index 6167e36..7439c51 100644
--- a/site2/website-next/src/components/EventCards.js
+++ b/site2/website-next/src/components/EventCards.js
@@ -22,7 +22,7 @@ export default function EventCards(props) {
<h3 className="mb-2 relative z-5"><a target="_blank" href={link}>{ title }</a></h3>
{displayDate && <h5 className="mb-4 relative z-5">{ displayDate }</h5>}
{description && <p>{ description} </p>}
- <a className="mt-6" href={link} className="secondary-cta secondary-cta--small" target="_blank">Learn More</a>
+ <a href={link} className="mt-6 secondary-cta secondary-cta--small" target="_blank">Learn More</a>
</div>
);
}
diff --git a/site2/website-next/src/css/custom.css b/site2/website-next/src/css/custom.css
index b7e2b5c..5c399db 100644
--- a/site2/website-next/src/css/custom.css
+++ b/site2/website-next/src/css/custom.css
@@ -644,6 +644,9 @@ html[data-theme="dark"] .featured-card--inner {background-color: rgba(34, 34, 34
}
.icon-wrap-icon {height: auto !important; width: 150px !important; fill: #198fff !important; max-height: 100% !important;}
.section-icon img {width: 100%;}
+#slider {width: 100%; height: 0; padding-top: 66.5%;}
+.slide-image {opacity: 0; position: absolute; left:0; top:0; object-fit: cover; width: 100%; height: 100%; object-position: 50% 50%; transform: scale(.95);}
+.slide-image.active-slide {opacity: 1; transform: scale(1); transition: all 0.5s ease;}
/* BLOG */
.blog-list-page article footer.docusaurus-mt-lg {margin-right: 30px;}
diff --git a/site2/website-next/src/pages/community.js b/site2/website-next/src/pages/community.js
index 128235e..821e247 100644
--- a/site2/website-next/src/pages/community.js
+++ b/site2/website-next/src/pages/community.js
@@ -23,6 +23,34 @@ export default function Community(props) {
});
}
}
+ const first = document.getElementById('slider').firstChild;
+ const slides = document.querySelectorAll('.slide-image');
+ const slideCount = slides.length;
+ const intervalTime = 4000;
+ let interval;
+ let counter = 0;
+ function cycleSlides(){
+ var active = document.querySelector('.active-slide');
+ active.classList.remove('active-slide');
+ if (counter === (slideCount - 1)){
+ slides[0].classList.add('active-slide');
+ counter = 0;
+ } else {
+ var next = counter++;
+ slides[next].nextElementSibling.classList.add('active-slide');
+ counter + 1;
+ }
+ }
+ var slideInterval = function(){
+ interval = setInterval(function(){
+ cycleSlides();
+ }, intervalTime);
+ };
+ slideInterval();
+ // cleanup required or interval will continue to run, even on other pages
+ return function cleanup() {
+ clearInterval(interval);
+ };
});
return (
@@ -54,7 +82,14 @@ export default function Community(props) {
</div>
<div className="image-bg-container p-8 md:w-1/2">
- <img className="" src={useBaseUrl('/img/community-photo-small.jpg')} />
+ <div id="slider" className="relative">
+ {/*
+ NOTE: The first image must have a class of "active-slide". Add as many images as desired
+ */}
+ <img className="slide-image active-slide" src={useBaseUrl('/img/community-photo-small.jpg')} alt="pulsar community photo" />
+ <img className="slide-image" src={useBaseUrl('/img/community-image-2.jpg')} alt="pulsar community photo" />
+ <img className="slide-image" src={useBaseUrl('/img/community-image-3.jpg')} alt="pulsar community photo" />
+ </div>
</div>
</div>
<div className="cf py-12 flex flex-col sm:flex-row">
diff --git a/site2/website-next/static/img/community-image-2.jpg b/site2/website-next/static/img/community-image-2.jpg
new file mode 100644
index 0000000..67cbdd6
Binary files /dev/null and b/site2/website-next/static/img/community-image-2.jpg differ
diff --git a/site2/website-next/static/img/community-image-3.jpg b/site2/website-next/static/img/community-image-3.jpg
new file mode 100644
index 0000000..1f18607
Binary files /dev/null and b/site2/website-next/static/img/community-image-3.jpg differ