Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve captions appearance when there is also a CTA #13477

Merged
merged 8 commits into from
Oct 27, 2023

Conversation

AnuragVasanwala
Copy link
Collaborator

@AnuragVasanwala AnuragVasanwala commented Oct 18, 2023

The goal of the PR is to fix layout of the video subtitles (when present) so that they won't display below CTA button.

Summary

amp-story-captions adds caption in shadow-dom. Thus, parent div container of the amp-story-captions won't reflect the actual size of the amp-story-captions.

This will fix this issue by setting max-height of the amp-story-grid-layer.align-bottom exactly to the shadow-dom component.

Additionally, fixed-height layout of the amp-story-captions is changed to container in order to occupy only required space.

User-facing changes

Not applicable.

Testing Instructions

Follow #13425 for the testing instruction.

Reviews

Does this PR have a security-related impact?

No.

Does this PR change what data or activity we track or use?

No.

Does this PR have a legal-related impact?

No.

Checklist

  • This PR addresses an existing issue and I have linked this PR to it
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #13425

…grid-layer`

`amp-story-captions` adds caption in shadow-dom. Thus, parent `div` container of the `amp-story-captions` won't reflect the actual size of the `amp-story-captions`.

This will fix this issue by setting `max-height` of the `amp-story-grid-layer.align-bottom` exactly to the shadow-dom component.

Additionally, fixed-height layout of the `amp-story-captions` is changed to container in order to occupy only required space.
@AnuragVasanwala AnuragVasanwala added Type: Bug Something isn't working Elements: Video AMP Output Issues related to AMP output and validation P3 Nice to have Package: Output /package/output labels Oct 18, 2023
@AnuragVasanwala AnuragVasanwala added this to the 1.35.0 milestone Oct 18, 2023
@AnuragVasanwala AnuragVasanwala self-assigned this Oct 18, 2023
@swissspidy
Copy link
Collaborator

Any thoughts on trying out style-preset="default" as suggested on the ticket?

@AnuragVasanwala
Copy link
Collaborator Author

Any thoughts on trying out style-preset="default" as suggested on the ticket?

This won't fix overlay issue because amp-story-page-outlink adds CTA button inside shadow-dom. This creates problem because height of the shadow-dom element (here, CTA button) remains ZERO and thus amp-story-captions for some devices get's below CTA button:
image

I will provide in depth analysis and fix on the PR by adding detailed video GIFs representing issue and how it's been fixed.

Correct me if I have missed something.

@AnuragVasanwala
Copy link
Collaborator Author

Any thoughts on trying out style-preset="default" as suggested on the ticket?

@swissspidy I tried style-preset="default" with all possible styling updates. Unfortunately, captions are not horizontally centered without captions-area wrapper when style-preset="default" is used.

With captions-area wrapper Without captions-area wrapper
[1] without style-preset = "default" [1.1] mobile [1.2] mobile (1)
[2] with style-preset = "default" [2.1] mobile (3) [2.2] mobile (2)

May we go with [2.1] approach?

@AnuragVasanwala AnuragVasanwala marked this pull request as ready for review October 27, 2023 12:43
@swissspidy
Copy link
Collaborator

Interesting! Thanks for sharing the various options, much appreciated!

Let's try [2.1] indeed 👍

@googleforcreators-bot
Copy link
Collaborator

googleforcreators-bot commented Oct 27, 2023

Plugin builds for 292eb55 are ready 🛎️!

@github-actions
Copy link
Contributor

github-actions bot commented Oct 27, 2023

Size Change: +29 B (0%)

Total Size: 2.75 MB

ℹ️ View Unchanged
Filename Size Change
assets/css/web-stories-block-rtl.css 4.6 kB 0 B
assets/css/web-stories-block.css 4.63 kB 0 B
assets/css/web-stories-carousel-rtl.css 702 B 0 B
assets/css/web-stories-carousel.css 701 B 0 B
assets/css/web-stories-dashboard-rtl.css 657 B 0 B
assets/css/web-stories-dashboard.css 659 B 0 B
assets/css/web-stories-editor-rtl.css 769 B 0 B
assets/css/web-stories-editor.css 771 B 0 B
assets/css/web-stories-embed-rtl.css 655 B 0 B
assets/css/web-stories-embed.css 656 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.39 kB 0 B
assets/css/web-stories-list-styles.css 2.42 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B 0 B
assets/css/web-stories-theme-style-twentyten.css 143 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B 0 B
assets/css/web-stories-widget-rtl.css 486 B 0 B
assets/css/web-stories-widget.css 486 B 0 B
assets/js/2314.js 12.8 kB 0 B
assets/js/2443.js 4.73 kB 0 B
assets/js/3669.js 38.4 kB 0 B
assets/js/3780.js 26.3 kB 0 B
assets/js/4422.js 49.1 kB 0 B
assets/js/4740.js 95.7 kB 0 B
assets/js/649.js 8.03 kB 0 B
assets/js/7357.js 92 B 0 B
assets/js/7719.js 216 kB 0 B
assets/js/chunk-colorthief.js 2.62 kB 0 B
assets/js/chunk-ffmpeg.js 5.98 kB 0 B
assets/js/chunk-html-to-image.js 4.51 kB 0 B
assets/js/chunk-media-gallery.js 6.12 kB 0 B
assets/js/chunk-mediainfo.js 96 B 0 B
assets/js/chunk-opentype.js 96 B 0 B
assets/js/chunk-react-calendar.js 10.8 kB 0 B
assets/js/chunk-react-color.js 25.8 kB 0 B
assets/js/chunk-selfie-segmentation.js 16.3 kB 0 B
assets/js/chunk-web-stories-template-0-metaData.js 546 B 0 B
assets/js/chunk-web-stories-template-0.js 11 kB 0 B
assets/js/chunk-web-stories-template-1-metaData.js 540 B 0 B
assets/js/chunk-web-stories-template-1.js 9.27 kB 0 B
assets/js/chunk-web-stories-template-10-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-10.js 7.23 kB 0 B
assets/js/chunk-web-stories-template-11-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-11.js 8.87 kB 0 B
assets/js/chunk-web-stories-template-12-metaData.js 496 B 0 B
assets/js/chunk-web-stories-template-12.js 8.67 kB 0 B
assets/js/chunk-web-stories-template-13-metaData.js 525 B 0 B
assets/js/chunk-web-stories-template-13.js 6.9 kB 0 B
assets/js/chunk-web-stories-template-14-metaData.js 582 B 0 B
assets/js/chunk-web-stories-template-14.js 7.26 kB 0 B
assets/js/chunk-web-stories-template-15-metaData.js 544 B 0 B
assets/js/chunk-web-stories-template-15.js 8.77 kB 0 B
assets/js/chunk-web-stories-template-16-metaData.js 588 B 0 B
assets/js/chunk-web-stories-template-16.js 10.5 kB 0 B
assets/js/chunk-web-stories-template-17-metaData.js 540 B 0 B
assets/js/chunk-web-stories-template-17.js 9.05 kB 0 B
assets/js/chunk-web-stories-template-18-metaData.js 587 B 0 B
assets/js/chunk-web-stories-template-18.js 9.31 kB 0 B
assets/js/chunk-web-stories-template-19-metaData.js 501 B 0 B
assets/js/chunk-web-stories-template-19.js 9.17 kB 0 B
assets/js/chunk-web-stories-template-2-metaData.js 586 B 0 B
assets/js/chunk-web-stories-template-2.js 9.02 kB 0 B
assets/js/chunk-web-stories-template-20-metaData.js 548 B 0 B
assets/js/chunk-web-stories-template-20.js 8.72 kB 0 B
assets/js/chunk-web-stories-template-21-metaData.js 536 B 0 B
assets/js/chunk-web-stories-template-21.js 9.48 kB 0 B
assets/js/chunk-web-stories-template-22-metaData.js 525 B 0 B
assets/js/chunk-web-stories-template-22.js 7.44 kB 0 B
assets/js/chunk-web-stories-template-23-metaData.js 605 B 0 B
assets/js/chunk-web-stories-template-23.js 6.95 kB 0 B
assets/js/chunk-web-stories-template-24-metaData.js 517 B 0 B
assets/js/chunk-web-stories-template-24.js 11.2 kB 0 B
assets/js/chunk-web-stories-template-25-metaData.js 543 B 0 B
assets/js/chunk-web-stories-template-25.js 6.79 kB 0 B
assets/js/chunk-web-stories-template-26-metaData.js 600 B 0 B
assets/js/chunk-web-stories-template-26.js 6.97 kB 0 B
assets/js/chunk-web-stories-template-27-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-27.js 7.66 kB 0 B
assets/js/chunk-web-stories-template-28-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-28.js 8.76 kB 0 B
assets/js/chunk-web-stories-template-29-metaData.js 561 B 0 B
assets/js/chunk-web-stories-template-29.js 8.94 kB 0 B
assets/js/chunk-web-stories-template-3-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-3.js 8.24 kB 0 B
assets/js/chunk-web-stories-template-30-metaData.js 576 B 0 B
assets/js/chunk-web-stories-template-30.js 7.43 kB 0 B
assets/js/chunk-web-stories-template-31-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-31.js 9.93 kB 0 B
assets/js/chunk-web-stories-template-32-metaData.js 552 B 0 B
assets/js/chunk-web-stories-template-32.js 12.3 kB 0 B
assets/js/chunk-web-stories-template-33-metaData.js 491 B 0 B
assets/js/chunk-web-stories-template-33.js 8.9 kB 0 B
assets/js/chunk-web-stories-template-34-metaData.js 570 B 0 B
assets/js/chunk-web-stories-template-34.js 7.43 kB 0 B
assets/js/chunk-web-stories-template-35-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-35.js 8.7 kB 0 B
assets/js/chunk-web-stories-template-36-metaData.js 575 B 0 B
assets/js/chunk-web-stories-template-36.js 12.1 kB 0 B
assets/js/chunk-web-stories-template-37-metaData.js 529 B 0 B
assets/js/chunk-web-stories-template-37.js 6.13 kB 0 B
assets/js/chunk-web-stories-template-38-metaData.js 572 B 0 B
assets/js/chunk-web-stories-template-38.js 7.63 kB 0 B
assets/js/chunk-web-stories-template-39-metaData.js 589 B 0 B
assets/js/chunk-web-stories-template-39.js 7.79 kB 0 B
assets/js/chunk-web-stories-template-4-metaData.js 564 B 0 B
assets/js/chunk-web-stories-template-4.js 11.8 kB 0 B
assets/js/chunk-web-stories-template-40-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-40.js 9.85 kB 0 B
assets/js/chunk-web-stories-template-41-metaData.js 573 B 0 B
assets/js/chunk-web-stories-template-41.js 7.45 kB 0 B
assets/js/chunk-web-stories-template-42-metaData.js 521 B 0 B
assets/js/chunk-web-stories-template-42.js 6.82 kB 0 B
assets/js/chunk-web-stories-template-43-metaData.js 557 B 0 B
assets/js/chunk-web-stories-template-43.js 8.49 kB 0 B
assets/js/chunk-web-stories-template-44-metaData.js 583 B 0 B
assets/js/chunk-web-stories-template-44.js 10.8 kB 0 B
assets/js/chunk-web-stories-template-45-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-45.js 7.15 kB 0 B
assets/js/chunk-web-stories-template-46-metaData.js 531 B 0 B
assets/js/chunk-web-stories-template-46.js 5.1 kB 0 B
assets/js/chunk-web-stories-template-47-metaData.js 591 B 0 B
assets/js/chunk-web-stories-template-47.js 8.97 kB 0 B
assets/js/chunk-web-stories-template-48-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-48.js 8.78 kB 0 B
assets/js/chunk-web-stories-template-49-metaData.js 518 B 0 B
assets/js/chunk-web-stories-template-49.js 8.58 kB 0 B
assets/js/chunk-web-stories-template-5-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-5.js 9.53 kB 0 B
assets/js/chunk-web-stories-template-50-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-50.js 8.93 kB 0 B
assets/js/chunk-web-stories-template-51-metaData.js 526 B 0 B
assets/js/chunk-web-stories-template-51.js 10.1 kB 0 B
assets/js/chunk-web-stories-template-52-metaData.js 601 B 0 B
assets/js/chunk-web-stories-template-52.js 9.97 kB 0 B
assets/js/chunk-web-stories-template-53-metaData.js 551 B 0 B
assets/js/chunk-web-stories-template-53.js 5.65 kB 0 B
assets/js/chunk-web-stories-template-54-metaData.js 547 B 0 B
assets/js/chunk-web-stories-template-54.js 7.46 kB 0 B
assets/js/chunk-web-stories-template-55-metaData.js 574 B 0 B
assets/js/chunk-web-stories-template-55.js 6.95 kB 0 B
assets/js/chunk-web-stories-template-56-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-56.js 9.54 kB 0 B
assets/js/chunk-web-stories-template-57-metaData.js 528 B 0 B
assets/js/chunk-web-stories-template-57.js 14.5 kB 0 B
assets/js/chunk-web-stories-template-58-metaData.js 554 B 0 B
assets/js/chunk-web-stories-template-58.js 5.43 kB 0 B
assets/js/chunk-web-stories-template-59-metaData.js 590 B 0 B
assets/js/chunk-web-stories-template-59.js 8.73 kB 0 B
assets/js/chunk-web-stories-template-6-metaData.js 568 B 0 B
assets/js/chunk-web-stories-template-6.js 6.93 kB 0 B
assets/js/chunk-web-stories-template-60-metaData.js 509 B 0 B
assets/js/chunk-web-stories-template-60.js 8.94 kB 0 B
assets/js/chunk-web-stories-template-7-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-7.js 7.15 kB 0 B
assets/js/chunk-web-stories-template-8-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-8.js 8.34 kB 0 B
assets/js/chunk-web-stories-template-9-metaData.js 580 B 0 B
assets/js/chunk-web-stories-template-9.js 8.25 kB 0 B
assets/js/chunk-web-stories-templates.js 906 B 0 B
assets/js/chunk-web-stories-textset-0.js 4.59 kB 0 B
assets/js/chunk-web-stories-textset-1.js 5.61 kB 0 B
assets/js/chunk-web-stories-textset-2.js 6.83 kB 0 B
assets/js/chunk-web-stories-textset-3.js 12.8 kB 0 B
assets/js/chunk-web-stories-textset-4.js 3.91 kB 0 B
assets/js/chunk-web-stories-textset-5.js 5.27 kB 0 B
assets/js/chunk-web-stories-textset-6.js 4.99 kB 0 B
assets/js/chunk-web-stories-textset-7.js 8.9 kB 0 B
assets/js/generateBlurhash.worker.worker.js 1.1 kB 0 B
assets/js/web-stories-activation-notice.js 26.1 kB 0 B
assets/js/web-stories-block.js 25.8 kB 0 B
assets/js/web-stories-carousel.js 3.5 kB 0 B
assets/js/web-stories-dashboard.js 63.7 kB 0 B
assets/js/web-stories-editor.js 1.46 MB +29 B (0%)
assets/js/web-stories-embed.js 20 B 0 B
assets/js/web-stories-lightbox.js 751 B 0 B
assets/js/web-stories-tinymce-button.js 2.85 kB 0 B
assets/js/web-stories-widget.js 587 B 0 B

compressed-size-action

@swissspidy
Copy link
Collaborator

Note that two snapshot tests in packages/output/src/test/page.js are failing now.

And that one Karma test is just flakey. Maybe we can make it more robust at some point.

@swissspidy swissspidy changed the title Fix: 🐛 CTA can sometimes cover captions Improve captions appearance when there is also a CTA Oct 27, 2023
@swissspidy swissspidy merged commit a3c73c2 into main Oct 27, 2023
50 of 54 checks passed
@swissspidy swissspidy deleted the fix/13425-cta-overlaps-video-captions branch October 27, 2023 15:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
AMP Output Issues related to AMP output and validation Elements: Video P3 Nice to have Package: Output /package/output Type: Bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CTA can sometimes cover captions
3 participants