[BE/FE] Mozfest Session Slider #7515

b-ggs · 2021-09-28T07:29:25Z

Closes #7423

Implementation Checklist

Each item in slider contains:

Heading (required)
author subheading
Image (required)
Video - autoplays on hover
rich text copy (required)
the card will link to an internal page or external url (required)

Screenshots

Session Slider on a page with the signup snippet:

Session Slider on a page without the signup snippet:

Session Slider items can be localized:

Checklist

Did I squash my migration?

github-actions · 2021-10-06T21:38:24Z

This PR introduces visual differences. Click here to inspect the diffs.

* video play on hover styling * Minor spacing * Add session carousel BE variables * Cleanup testing data * Move play triangle into template * End for loop * Session slider template location * Move styles into mozfest.scss to match event slider PR * Add settings to match events carousel * Adjust padding and grids of carousel * Adjust navigation styles * Add video image thumbnail for testing * Hook up video to session cards

github-actions · 2021-10-26T05:42:12Z

This PR introduces visual differences. Click here to inspect the diffs.

b-ggs · 2021-10-26T05:54:17Z

Hey @sabrinang and @Pomax! Whenever it's convenient, would you mind checking out what we have for the Session Slider? Thanks!

github-actions · 2021-10-26T06:20:19Z

This PR introduces visual differences. Click here to inspect the diffs.

tailwind.config.js

Pomax

Nothing really wrong, but there's some things we should consider with regards to our styleguide, including potentially filing issues for updates, before we merge this in.

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

network-api/networkapi/mozfest/templates/fragments/session_card.html

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/session_slider_block.html

network-api/networkapi/mozfest/migrations/0023_add_session_slider.py

sabrinang

Type/Color

Title: font weight 600 (semi bold to match figma mockup)
Session item title: bottom-margin 12px (so author subheading is closer, see figma mockup)
@Pomax I don’t see color #0d10bf in the component visually but I do see it when I inspect the class — this can be replaced with #595cf3 to align or remove because I don’t see it on hover anyways if it is suppose to be. Thanks for pointing this out Pomax.
Regarding text sizes, let’s stick with https://foundation.mozilla.org/en/style-guide/#typography sizes as closely as we can but a separate issue where I need to sync with @fessehaye on tw-text sizes and colors if that is where the other blue came from

Button

Button doesn’t show up for internal/external links
- Should the button be optional then? (currently required)

Links

Internal/external links are ignored and links to the same home page unless a video is uploaded it goes to the video itself

Video

When an image is uploaded and video is uploaded and I hover over the thumbnail, it is blank (it is blank if there is a video thumbnail present or not)
When there is a link present and video, when I click on the heading or thumbnail it opens up the video on a separate page, I was thinking it was suppose to go to the link instead?

Thumbnails

Does it need a play arrow for every thumbnail? Especially when there is no video present is this intentionally what the stakeholders want? (does the link always go to a video)

github-actions · 2021-11-02T00:06:31Z

This PR introduces visual differences. Click here to inspect the diffs.

* Add common reusable link blocks * BE: Mozfest Spaces Cards * [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 <janeelizabethhughes@gmail.com> Co-authored-by: janehughes <janeelizabethhughes@gmail.com> * Update template size condition * Grid adjustment depending on signup form being visible * Javascript cleanups as per code review * Update migrations * Make subheading_link optional * Carousel alignment fixes * Carousel full width * Signup form placement depending on which block is rendered in base * Add property to event block to check if wide * Add template tag for holding singup form boolean to render form * Js modifications as per feedback * Remove base page overrides for overflowing sliders, configure slider to show 2 cards on desktop * autoheight for carousels on mozfest * Fix flake issues * Fix eslint issues * Remove newline * Use double-quotes in tailwind config #7457 (comment) * Use template literal in querySelector https://github.com/mozilla/foundation.mozilla.org/pull/7457/files#r733242084 * Use forEach instead of for, use template literal for querySelectorAll https://github.com/mozilla/foundation.mozilla.org/pull/7457/files#r733241307 * Use single quotes #7457 (comment) * Remove unused load in mozfest-base * Remove unused template tag that was used in development * Remove empty carousel.scss * Remove duplicated class and fix nav title not showing with current events length * Remove commented out overlay * Switch colors to originally intended colors * Remove space changes * Update migrations * Replace ListBlock with StreamBlock * Remove rogue spacing changes * More rogue space changes * Minor spacing changes * Remove duplicate styles * Add padding to h2 * Remove newline change * Move navigation buttons into slider main container * Change title font weight to 600 #7457 (review) * Update subheading color to tw-text-blue (#595cf3) #7457 (review) * Remove fill-rule and clip-rule from carousel_navigation fragment #7515 (comment) * Use blocks instead of comments in block template #7515 (comment) * Update migrations * Remove tailwind config changes * Change mobile navigation active bullet color to #0d10bf #7457 (review) * Update migrations Co-authored-by: Steve Stein <steven_ts@hotmail.com> Co-authored-by: janehughes <janeelizabethhughes@gmail.com> Co-authored-by: Pomax <pomax@nihongoresources.com>

Pomax · 2021-11-04T15:29:34Z

@b-ggs it looks like merging 7457 has created merge conflicts for this PR - just a few, but can you resolve those? I can merge it after that.

github-actions · 2021-11-04T15:34:22Z

This PR introduces visual differences. Click here to inspect the diffs.

… feature/fe-be-mozfest-session-slider

github-actions · 2021-11-04T16:59:55Z

This PR introduces visual differences. Click here to inspect the diffs.

b-ggs · 2021-11-04T16:59:59Z

@Pomax, seems that main has some migration issues on the wagtailpages app. For now, i've merged from 4fb1895 into this branch to be able to properly recreate the migrations. This should be good to merge once the issues on main have been resolved and this branch is updated.

The CI issues on this branch seems to stem from the migration issues on main (since there are currently two migration 0048s on the wagtailpages app on main)

CommandError: Conflicting migrations detected; multiple leaf nodes in the migration graph: (0048_auto_20211101_1811, 0048_auto_20211103_1531 in wagtailpages).

b-ggs · 2021-11-04T18:20:42Z

@Pomax, looks like this is good to go!

github-actions · 2021-11-04T18:48:47Z

This PR introduces visual differences. Click here to inspect the diffs.

github-actions · 2021-11-05T04:21:30Z

This PR introduces visual differences. Click here to inspect the diffs.

github-actions · 2021-11-15T14:41:42Z

This PR introduces visual differences. Click here to inspect the diffs.

b-ggs · 2021-11-16T12:04:44Z

@Pomax, remarking you as a reviewer to notify you that this should be good to merge! I've updated the migration to mozfest.0026.

Pomax · 2021-11-16T16:10:12Z

perfect, thank you

mofodevops temporarily deployed to foundation-s-feature-fe-k0wkgu September 28, 2021 07:29 Inactive

boggs added 2 commits October 7, 2021 05:05

Add common reusable link blocks

56c7e56

BE: Mozfest Session Slider

8b5c762

b-ggs force-pushed the feature/fe-be-mozfest-session-slider branch from 891f85e to 8b5c762 Compare October 6, 2021 21:07

This was referenced Oct 6, 2021

[7434] - FE/BE Structured data field for Mozfest pages #7568

Merged

BE: Mozfest Session Slider #7563

Closed

b-ggs marked this pull request as draft October 7, 2021 07:41

philwakefield added this to the MozFest 2021 TBX milestone Oct 20, 2021

wilhitem mentioned this pull request Oct 22, 2021

Mozfest: Update features to support localization #7673

Closed

mofodevops temporarily deployed to foundation-s-feature-fe-bc8ije October 25, 2021 14:57 Inactive

mofodevops temporarily deployed to foundation-s-feature-fe-wt6zr4 October 25, 2021 14:57 Inactive

boggs added 3 commits October 26, 2021 12:43

Move fragments to avoid conflicts

e55673c

Merge branch 'main' into feature/fe-be-mozfest-session-slider

ee53b87

Migrate from ListBlock to StreamBlock

8705fb3

mofodevops temporarily deployed to foundation-s-feature-fe-wt6zr4 October 26, 2021 05:08 Inactive

boggs added 2 commits October 26, 2021 13:21

Remove newline

7c7b7b4

Add author_subheading to template

e851098

mofodevops temporarily deployed to foundation-s-feature-fe-wt6zr4 October 26, 2021 05:38 Inactive

b-ggs marked this pull request as ready for review October 26, 2021 05:53

b-ggs requested review from Pomax and sabrinang October 26, 2021 05:53

Pomax reviewed Oct 26, 2021

View reviewed changes

tailwind.config.js Outdated Show resolved Hide resolved

Pomax suggested changes Oct 26, 2021

View reviewed changes

Pomax reviewed Oct 26, 2021

View reviewed changes

network-api/networkapi/mozfest/migrations/0023_add_session_slider.py Outdated Show resolved Hide resolved

sabrinang requested changes Oct 26, 2021

View reviewed changes

mofodevops temporarily deployed to foundation-s-feature-fe-wt6zr4 November 1, 2021 23:23 Inactive

Merge branch 'main' into feature/fe-be-mozfest-session-slider

abac567

Pomax temporarily deployed to foundation-s-feature-fe-wt6zr4 November 4, 2021 14:53 Inactive

boggs added 2 commits November 5, 2021 00:55

Merge branch 'main-tmp-4fb189584a06eff2b1f3469e9ea8ec3331e15d1a' into…

a417f11

… feature/fe-be-mozfest-session-slider

Update migrations

a8efba6

mofodevops temporarily deployed to foundation-s-feature-fe-wt6zr4 November 4, 2021 16:56 Inactive

Merge branch 'main' into feature/fe-be-mozfest-session-slider

c519a92

mofodevops temporarily deployed to foundation-s-feature-fe-wt6zr4 November 4, 2021 17:45 Inactive

Merge branch 'main' into feature/fe-be-mozfest-session-slider

f0b83c0

mofodevops temporarily deployed to foundation-s-feature-fe-wt6zr4 November 5, 2021 04:06 Inactive

Merge branch 'main' into feature/fe-be-mozfest-session-slider

16cceea

mofodevops temporarily deployed to foundation-s-feature-fe-wt6zr4 November 15, 2021 14:08 Inactive

Merge branch 'main' into feature/fe-be-mozfest-session-slider

d457cba

mofodevops temporarily deployed to foundation-s-feature-fe-wt6zr4 November 16, 2021 12:03 Inactive

b-ggs requested a review from Pomax November 16, 2021 12:04

Pomax merged commit 55de475 into main Nov 16, 2021

Pomax deleted the feature/fe-be-mozfest-session-slider branch November 16, 2021 16:10

data-sync-user mentioned this pull request Jun 3, 2024

Bump swiper from 11.1.1 to 11.1.3 #12360

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BE/FE] Mozfest Session Slider #7515

[BE/FE] Mozfest Session Slider #7515

b-ggs commented Sep 28, 2021 •

edited

Loading

github-actions bot commented Oct 6, 2021

github-actions bot commented Oct 26, 2021

b-ggs commented Oct 26, 2021

github-actions bot commented Oct 26, 2021

Pomax left a comment

sabrinang left a comment

github-actions bot commented Nov 2, 2021

Pomax commented Nov 4, 2021

github-actions bot commented Nov 4, 2021

github-actions bot commented Nov 4, 2021

b-ggs commented Nov 4, 2021 •

edited

Loading

b-ggs commented Nov 4, 2021

github-actions bot commented Nov 4, 2021

github-actions bot commented Nov 5, 2021

github-actions bot commented Nov 15, 2021

b-ggs commented Nov 16, 2021

Pomax commented Nov 16, 2021

[BE/FE] Mozfest Session Slider #7515

[BE/FE] Mozfest Session Slider #7515

Conversation

b-ggs commented Sep 28, 2021 • edited Loading

Implementation Checklist

Screenshots

Checklist

github-actions bot commented Oct 6, 2021

github-actions bot commented Oct 26, 2021

b-ggs commented Oct 26, 2021

github-actions bot commented Oct 26, 2021

Pomax left a comment

Choose a reason for hiding this comment

sabrinang left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 2, 2021

Pomax commented Nov 4, 2021

github-actions bot commented Nov 4, 2021

github-actions bot commented Nov 4, 2021

b-ggs commented Nov 4, 2021 • edited Loading

b-ggs commented Nov 4, 2021

github-actions bot commented Nov 4, 2021

github-actions bot commented Nov 5, 2021

github-actions bot commented Nov 15, 2021

b-ggs commented Nov 16, 2021

Pomax commented Nov 16, 2021

b-ggs commented Sep 28, 2021 •

edited

Loading

b-ggs commented Nov 4, 2021 •

edited

Loading