Skip to content

[FE/BE] - Mozfest Hero updates#7585

Merged
danielfmiranda merged 47 commits intomainfrom
feature/fe-be-mozfest-hero-updates
Oct 21, 2021
Merged

[FE/BE] - Mozfest Hero updates#7585
danielfmiranda merged 47 commits intomainfrom
feature/fe-be-mozfest-hero-updates

Conversation

@b-ggs
Copy link
Collaborator

@b-ggs b-ggs commented Oct 8, 2021 •
edited
Loading

Related PRs/issues #7432

Implementation Checklist

  • Editor can add a heading
  • Editor can specify 3 (no more, no less) subheadings each with their own heading, plain-text copy, and associated image
  • Editor can specify an embedded YouTube video OR video in Wagtail

Of note

  • Bumps wagtailmedia to 0.8.0 to use VideoChooserBlock
  • The new hero will only show up once Banner Carousel has been populated with data. If there are no Banner Carousel items, (e.g. when this is first deployed to production) the previous version of the hero will be displayed. See the relevant screenshot below.

Screenshots

MozFest Homepage

Screen Shot 2021-10-14 at 3 51 03 AM

Wagtail Admin editor showing the Banner Carousel and Banner Video

Screen Shot 2021-10-14 at 3 51 46 AM

Banner Video can use a video uploaded on Wagtail or an embedded external video (e.g. from YouTube or Vimeo)

Screen Shot 2021-10-14 at 3 51 57 AM

Original hero will still be displayed if Banner Carousel is empty

image

Checklist

Changes in Models:

@mofodevops mofodevops temporarily deployed to foundation-s-feature-fe-19yupv October 8, 2021 10:50 Inactive
@github-actions

This comment has been minimized.

Sign in to view
@stevedya
[7533] - FE Mozfest homepage hero (#7589)
26080e5 
* Current events slider styles

* Install swiper and style event cards

* video play on hover styling

* Minor spacing

* Mozfest homepage banner start

* Homepage header, mobile styling and slideshow styling

* Homepage banner cleanup and organization

* Link mobile and background image sliders

* Add loops for test hero content

* Rebase on to BE branch

* Thumbnail fixes for hosted cms video

* carousel js cleanup

* Integrate old video functionality back into branch

* Make old functionality work

* Change flag to featured again

* Revert name to homepage banner handler

* Remove carousel.scss

* Add spacing back to tailwind config

* Remove extra space from main.scss

* Add animation for sliding progress bar

* Make carousel clickable
@mofodevops mofodevops temporarily deployed to foundation-s-feature-fe-19yupv October 11, 2021 21:07 Inactive
@mofodevops mofodevops temporarily deployed to foundation-s-feature-fe-19yupv October 12, 2021 15:02 Inactive
@mofodevops mofodevops temporarily deployed to foundation-s-feature-fe-19yupv October 12, 2021 15:02 Inactive
@mofodevops mofodevops temporarily deployed to foundation-s-feature-fe-19yupv October 12, 2021 20:42 Inactive
@github-actions

This comment has been minimized.

Sign in to view
@mofodevops mofodevops temporarily deployed to foundation-s-feature-fe-19yupv October 12, 2021 22:32 Inactive
@github-actions

This comment has been minimized.

Sign in to view
@b-ggs b-ggs requested a review from Pomax October 20, 2021 12:58
@wilhitem wilhitem added this to the MozFest 2021 TBX milestone Oct 20, 2021
@stevedya stevedya requested a review from sabrinang October 20, 2021 17:17
sabrinang
sabrinang approved these changes Oct 20, 2021
View reviewed changes
Copy link

@sabrinang sabrinang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@b-ggs The CMS videos are working for me now on all three browsers and I'm not getting errors! The existing two I uploaded work and I just tested uploading two more and they all work.
image image

Pomax
Pomax suggested changes Oct 21, 2021
View reviewed changes
Copy link
Contributor

@Pomax Pomax left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just one small nit =P

network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html
Comment on lines +16 to +21
<button class="btn btn-video-control btn-pause btn-secondary d-none">
<span>{% trans "PAUSE VIDEO" context "Pause button for video" %}</span>
</button>
<button class="btn btn-video-control btn-play btn-secondary d-none">
<span>{% trans "PLAY VIDEO" context "Play button for video" %}</span>
</button>
Copy link
Contributor

@Pomax Pomax Oct 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A nit, but: can we make this a normal-cased phrase and instead force it to be presented as all caps with a CSS text-transform?

Copy link
Collaborator Author

@b-ggs b-ggs Oct 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha, fixed in 32a90db!

@mofodevops mofodevops temporarily deployed to foundation-s-feature-fe-19yupv October 21, 2021 12:54 Inactive
@mofodevops mofodevops temporarily deployed to foundation-s-feature-fe-19yupv October 21, 2021 12:54 Inactive
@b-ggs b-ggs requested a review from Pomax October 21, 2021 12:56
@b-ggs
Copy link
Collaborator Author

b-ggs commented Oct 21, 2021

Hi @Pomax! I've made the changes to the button on the hardcoded hero. Would you mind checking this out whenever it's convenient? Thanks!

@mofodevops mofodevops temporarily deployed to foundation-s-feature-fe-19yupv October 21, 2021 13:21 Inactive
@b-ggs
Copy link
Collaborator Author

b-ggs commented Oct 21, 2021

I've also added some changes in 9e00969 basing off of your suggestions in #7457, specifically #7457 (comment) and #7457 (comment).

@github-actions
Copy link

github-actions bot commented Oct 21, 2021

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

2 similar comments
@github-actions
Copy link

github-actions bot commented Oct 21, 2021

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

@github-actions
Copy link

github-actions bot commented Oct 21, 2021

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

Pomax
Pomax approved these changes Oct 21, 2021
View reviewed changes
Copy link
Contributor

@Pomax Pomax left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good to me =)

@danielfmiranda danielfmiranda temporarily deployed to foundation-s-feature-fe-19yupv October 21, 2021 23:05 Inactive
@danielfmiranda danielfmiranda self-requested a review October 21, 2021 23:06
danielfmiranda
danielfmiranda approved these changes Oct 21, 2021
View reviewed changes
Copy link
Collaborator

@danielfmiranda danielfmiranda left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! Great work, approving 👍

@danielfmiranda danielfmiranda merged commit 6e98f07 into main Oct 21, 2021
@danielfmiranda danielfmiranda deleted the feature/fe-be-mozfest-hero-updates branch October 21, 2021 23:17
@github-actions
Copy link

github-actions bot commented Oct 21, 2021

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

@TheoChevalier TheoChevalier mentioned this pull request Oct 22, 2021
Closed
This was referenced Jun 3, 2024
Closed
Closed
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sabrinang sabrinang sabrinang approved these changes

@danielfmiranda danielfmiranda danielfmiranda approved these changes

+1 more reviewer

@Pomax Pomax Pomax approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

MozFest 2021 TBX

Development

Successfully merging this pull request may close these issues.

9 participants

@b-ggs @jamilasnell @sabrinang @stevedya @Pomax @danielfmiranda @wilhitem @mofodevops @SharmaineLim