Skip to content

Commit 7bf3e17

Browse files
stevedyajanehughes
authored and
boggs
committed
[7430] FE - current events slider (#7505)
* Current events slider styles * Install swiper and style event cards * Break slider out of container * Adjust spacing and containers for wide templates and signup sidebar * Merge FE on to BE * Update source/sass/mozfest.scss Co-authored-by: janehughes <[email protected]> Co-authored-by: janehughes <[email protected]>
1 parent 8776fcd commit 7bf3e17

File tree

12 files changed

+178
-7
lines changed

12 files changed

+178
-7
lines changed

‎network-api/networkapi/mozfest/templates/fragments/carousel/carousel_navigation.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div class="swiper-navigation tw-relative tw-z-10 tw-mb-5 tw-hidden medium:tw-flex medium:tw-flex-row medium:tw-justify-between medium:items-center{% if not page.use_wide_template and page.signup %} tw-ml-0 tw-pl-0 tw-container{% endif %}">
2+
<h3 class="font-weight-bold">{{ title }}</h3>
3+
<div class="tw-flex tw-flex-row tw-justify-between tw-items-center">
4+
<div class="swiper-button-prev">
5+
<svg class="swiper-button-icon" viewBox="0 0 21 21" fill="none">
6+
<path fill-rule="evenodd" clip-rule="evenodd"
7+
d="M20.75 10.5c0-.70761-.5099-1.28125-1.1389-1.28125H1.38889C.759899 9.21875.25 9.79239.25 10.5c0 .7076.509899 1.2812 1.13889 1.2812H19.6111c.629 0 1.1389-.5736 1.1389-1.2812Z"
8+
fill="currentColor"/>
9+
<path fill-rule="evenodd" clip-rule="evenodd"
10+
d="M10.1664.625269c-.44474-.500359-1.16584-.500359-1.6106 0L.583572 9.59402c-.444763.50038-.444763 1.31158 0 1.81198L8.5558 20.3747c.44476.5004 1.16586.5004 1.6106 0 .4448-.5003.4448-1.3116 0-1.8119L2.99952 10.5l7.16688-8.06277c.4448-.50036.4448-1.3116 0-1.811961Z"
11+
fill="currentColor"/>
12+
</svg>
13+
</div>
14+
<div class="swiper-button-next">
15+
<svg class="swiper-button-icon" viewBox="0 0 21 21" fill="none">
16+
<path fill-rule="evenodd" clip-rule="evenodd"
17+
d="M.25 10.5c0-.70761.509898-1.28125 1.13889-1.28125H19.6111c.629 0 1.1389.57364 1.1389 1.28125 0 .7076-.5099 1.2812-1.1389 1.2812H1.38889C.759898 11.7812.25 11.2076.25 10.5Z"
18+
fill="currentColor"/>
19+
<path fill-rule="evenodd" clip-rule="evenodd"
20+
d="M10.8336.625269c.4447-.500359 1.1658-.500359 1.6106 0l7.9722 8.968751c.4448.50038.4448 1.31158 0 1.81198l-7.9722 8.9687c-.4448.5004-1.1659.5004-1.6106 0-.4448-.5003-.4448-1.3116 0-1.8119L18.0005 10.5l-7.1669-8.06277c-.4448-.50036-.4448-1.3116 0-1.811961Z"
21+
fill="currentColor"/>
22+
</svg>
23+
</div>
24+
</div>
25+
</div>

‎network-api/networkapi/mozfest/templates/fragments/event_card.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="tw-border tw-border-gray-60/20 tw-p-4 medium:tw-p-6">
2+
<h3 class="tw-mb-2">{{ title }}</h3>
3+
{% if category_url %}
4+
<div class="tw-mt-3 tw-mb-4">
5+
<a class="tw-underline tw-text-festival-blue-100" href="{{ category_url }}">{{ category_title }}</a>
6+
</div>
7+
{% endif %}
8+
{% if image %}
9+
<img class="tw-w-full tw-h-auto" src="{{ image }}" alt="{{ image_alt }}">
10+
{% endif %}
11+
<p class="tw-my-5">{{ text }}</p>
12+
{% for button in buttons %}
13+
<a class="btn btn-primary tw-mr-3 last:tw-mr-0" href="{{ button.value.link_url }}">{{ button.value.label }}</a>
14+
{% endfor %}
15+
</div>

‎network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
{% block content %}
3434
{% block secondary_nav %}{% endblock %}
3535

36+
3637
{% if page.signup != None %}
3738

3839
{# Use a two-column layout #}

‎network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/current_events_slider_list_block.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{% load wagtailcore_tags wagtailimages_tags %}
2+
3+
4+
{% load static %}
5+
<div class="tw-mb-6 last:tw-mt-6 tw-relative {% if not page.use_wide_template and page.signup %} tw-px-4 medium:tw-pl-0 medium:tw-mr-[calc(50%-50vw-33.3%)]{% else %} tw-container {% endif %}">
6+
7+
{# Slider main container #}
8+
<div class="swiper tw-overflow-hidden" data-carousel>
9+
10+
{# navigation buttons #}
11+
{% include 'fragments/carousel/carousel_navigation.html' with title=value.title %}
12+
13+
{# Additional required wrapper #}
14+
<div class="swiper-wrapper">
15+
16+
{# Slides #}
17+
{% for current_event in self.current_events %}
18+
{% image current_event.image fill-600x250 as img %}
19+
<div class="swiper-slide">
20+
{% include 'fragments/event_card.html' with title=current_event.title category_url=current_event.subheading_link.0.value.link_url category_title=current_event.subheading_link.0.value.label buttons=current_event.buttons image=img.url text=current_event.body %}
21+
</div>
22+
{% endfor %}
23+
</div>
24+
25+
{# Pagination #}
26+
<div class="swiper-pagination tw--bottom-7 medium:tw-hidden"></div>
27+
28+
</div>
29+
</div>
30+
31+

‎package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
"react-ga": "3.3.0",
9696
"sass": "^1.38.2",
9797
"shx": "^0.3.3",
98-
"swiper": "^6.7.5",
98+
"swiper": "^6.8.4",
9999
"tailwindcss": "^2.2.9",
100100
"uuid": "^8.3.2",
101101
"whatwg-fetch": "^3.6.2"

‎source/js/components/carousel/carousel.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import Swiper, {A11y, Autoplay, Pagination, Navigation, Keyboard} from 'swiper';
2+
3+
Swiper.use([A11y, Autoplay, Pagination, Navigation, Keyboard]);
4+
5+
class Carousel {
6+
static selector() {
7+
return "[data-carousel]";
8+
}
9+
10+
constructor(node) {
11+
this.node = node;
12+
this.swiper = new Swiper(this.node, {
13+
spaceBetween: 20,
14+
watchOverflow: true,
15+
centeredSlides: false,
16+
simulateTouch: true,
17+
slidesPerView: 1,
18+
keyboard: {
19+
enabled: true,
20+
},
21+
pagination: {
22+
el: '.swiper-pagination',
23+
clickable: true,
24+
},
25+
navigation: {
26+
nextEl: ".swiper-button-next",
27+
prevEl: ".swiper-button-prev",
28+
},
29+
// Responsive breakpoints
30+
breakpoints: {
31+
768: {
32+
slidesPerView: 1.75,
33+
spaceBetween: 30,
34+
},
35+
},
36+
});
37+
this.slideTotal = this.node.dataset.slidetotal;
38+
}
39+
}
40+
41+
export const initCarousel = () => {
42+
const carousels = [...document.querySelectorAll("[data-carousel]")];
43+
carousels.map((carousel) => new Carousel(carousel));
44+
};
45+
46+
export default Carousel;

‎source/js/main.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
import primaryNav from "./primary-nav.js";
1717
import EmbedTypeform from "./embed-typeform.js";
1818
import Dropdowns from "./dropdowns.js";
19+
import { initCarousel } from "./components/carousel/carousel.js";
1920
import initializeSentry from "./common/sentry-config.js";
2021
import YouTubeRegretsTunnel from "./foundation/pages/youtube-regrets/intro-tunnel";
2122
import RegretsReporterTimeline from "./foundation/pages/youtube-regrets/regrets-reporter/timeline";
@@ -52,6 +53,7 @@ let main = {
5253
GoogleAnalytics.init();
5354
EmbedTypeform.init();
5455
Dropdowns.init();
56+
initCarousel();
5557

5658
this.fetchEnv((envData) => {
5759
env = envData;

‎source/sass/main.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,5 +94,7 @@
9494

9595
@import "./mozfest";
9696

97+
9798
// Print Style
9899
@import "./print";
100+

‎source/sass/mozfest.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
// MozFest-specific styling
22
// https://www.mozillafestival.org
33

4+
// Carousel
5+
@import "../../node_modules/swiper/swiper-vars.scss";
6+
@import "../../node_modules/swiper/swiper.scss";
7+
@import "../../node_modules/swiper/components/pagination/pagination.scss";
8+
9+
410
body.mozfest {
511
.primary-nav-container {
612
// The following overrides are to make sure
@@ -174,4 +180,44 @@ body.mozfest {
174180
}
175181
}
176182
}
183+
184+
.swiper-button-next,
185+
.swiper-button-prev {
186+
@apply tw-border-2 tw-text-blue tw-flex tw-flex-col tw-justify-center tw-items-center tw-w-[40px] tw-h-[40px] tw-transition;
187+
188+
&.swiper-button-disabled {
189+
@apply tw-border-gray-20;
190+
}
191+
192+
&::after {
193+
content: "";
194+
}
195+
196+
&:hover {
197+
@apply tw-opacity-75;
198+
}
199+
}
200+
201+
.swiper-button-icon {
202+
@apply tw-text-blue tw-w-4 tw-h-4;
203+
}
204+
205+
.swiper-button-disabled {
206+
.swiper-button-icon {
207+
@apply tw-text-gray-20;
208+
}
209+
}
210+
211+
.swiper-button-prev {
212+
@apply tw-mr-5;
213+
}
214+
215+
.swiper-pagination-bullet {
216+
@apply tw-w-3 tw-h-3;
217+
}
218+
219+
.swiper-pagination-bullet-active {
220+
@apply tw-bg-festival-blue-100;
221+
}
222+
177223
}

‎source/sass/wagtail/blocks/carousel.scss

Whitespace-only changes.

‎tailwind.config.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ module.exports = {
1313
container: false
1414
},
1515
plugins: [
16-
plugin(function ({ addUtilities }) {
16+
plugin(function ({addUtilities}) {
1717
// Adding Column Count to Tailwind CSS
1818
const newUtilities = {
1919
".col-count-1": {
@@ -39,7 +39,7 @@ module.exports = {
3939
inherit: "inherit",
4040
},
4141
screens: {
42-
print: { raw: "print" },
42+
print: {raw: "print"},
4343
},
4444
},
4545
// Overriding default spacing
@@ -104,7 +104,10 @@ module.exports = {
104104
purple: "#a66efd",
105105
},
106106
festival: {
107-
blue: "#0e11bf",
107+
blue: {
108+
DEFAULT: "#0e11bf",
109+
100: '#4C56EC'
110+
},
108111
purple: "#8f14fb",
109112
},
110113
"dear-internet": {

0 commit comments

Comments
 (0)