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.

Sign up for GitHub

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

Jump to bottom

Blocks: Fix box carousel layout on mobile devices #13602

Merged
merged 3 commits into from
Mar 13, 2024
Merged

Blocks: Fix box carousel layout on mobile devices #13602

merged 3 commits into from
Mar 13, 2024

Conversation

Swanand01
Copy link
Collaborator

@Swanand01 Swanand01 commented Mar 11, 2024 •
edited
Loading

Summary

This PR fixes the size and spacing of stories in the box carousel layout on mobile devices.

User-facing changes

  1. A horizontal margin of 10px has been added to stories for devices with width less than 675px.
  2. The size of a story has been reduced to show two stories on the screen.
Screen.Recording.2024-03-11.at.7.32.23.PM.mov

Testing Instructions

This PR can be tested by following these steps:

  1. On your page, add the 'Web Stories' block.
  2. Select the 'Box Carousel' layout.
  3. Go to the 'Block' section in the Settings pane, and increase the 'Number of Stories' to 5.
  4. Save your changes and click 'View Page'

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 #13591

@Swanand01 Swanand01 added Type: Bug Something isn't working Group: WordPress Changes related to WordPress or Gutenberg integration Group: Blocks Issues related to the provided Gutenberg Blocks labels Mar 11, 2024
@Swanand01 Swanand01 marked this pull request as ready for review March 11, 2024 14:23
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 11, 2024 •
edited
Loading

Size Change: +42 B (0%)

Total Size: 2.77 MB

ℹ️ View Unchanged
Filename Size Change
assets/css/web-stories-block-rtl.css 4.63 kB +21 B (0%)
assets/css/web-stories-block.css 4.66 kB +16 B (0%)
assets/css/web-stories-carousel-rtl.css 701 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 653 B 0 B
assets/css/web-stories-embed.css 655 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.42 kB +23 B (+1%)
assets/css/web-stories-list-styles.css 2.45 kB +19 B (+1%)
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 456 B 0 B
assets/css/web-stories-widget.css 456 B 0 B
assets/js/2443.js 4.73 kB 0 B
assets/js/3244.js 97.5 kB 0 B
assets/js/3460.js 217 kB 0 B
assets/js/3669.js 38.2 kB 0 B
assets/js/3780.js 26.3 kB 0 B
assets/js/4422.js 49.1 kB 0 B
assets/js/649.js 8.13 kB 0 B
assets/js/7357.js 92 B 0 B
assets/js/7480.js 12.8 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.11 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.7 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 581 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 kB 0 B
assets/js/web-stories-block.js 27.7 kB 0 B
assets/js/web-stories-carousel.js 9.86 kB -37 B (0%)
assets/js/web-stories-dashboard.js 63.2 kB 0 B
assets/js/web-stories-editor.js 1.46 MB 0 B
assets/js/web-stories-embed.js 20 B 0 B
assets/js/web-stories-lightbox.js 7.34 kB 0 B
assets/js/web-stories-tinymce-button.js 9.75 kB 0 B
assets/js/web-stories-widget.js 559 B 0 B

compressed-size-action

@googleforcreators-bot
Copy link
Collaborator

googleforcreators-bot commented Mar 11, 2024 •
edited
Loading

Plugin builds for 3b00363 are ready 🛎️!

@Swanand01 Swanand01 requested a review from swissspidy March 12, 2024 12:28
AnuragVasanwala
AnuragVasanwala approved these changes Mar 12, 2024
View reviewed changes
Copy link
Collaborator

@AnuragVasanwala AnuragVasanwala left a comment

Choose a reason for hiding this comment

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

LGTM ✅

Let's wait for @swissspidy's review.

swissspidy
swissspidy reviewed Mar 12, 2024
View reviewed changes
Copy link
Collaborator

@swissspidy swissspidy left a comment

Choose a reason for hiding this comment

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

The carousel seems to work well on mobile and desktop, the change in appearance looks reasonable to me.

Just the css should be moved.

@swissspidy swissspidy changed the title 🐛 Fix box carousel layout on mobile devices Blocks: Fix box carousel layout on mobile devices Mar 13, 2024
@swissspidy swissspidy added this to the 1.36.0 milestone Mar 13, 2024
@swissspidy swissspidy merged commit 9128c13 into main Mar 13, 2024
36 checks passed
@swissspidy swissspidy deleted the fix/13591-box-carousel-layout branch March 13, 2024 10:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AnuragVasanwala AnuragVasanwala AnuragVasanwala approved these changes

@swissspidy swissspidy swissspidy approved these changes

Assignees
No one assigned
Labels
Group: Blocks Issues related to the provided Gutenberg Blocks Group: WordPress Changes related to WordPress or Gutenberg integration Type: Bug Something isn't working
Projects
None yet
Milestone
1.36.0
Development

Successfully merging this pull request may close these issues.

Blocks: Improve box carousel layout on mobile (size + spacing)
4 participants
@Swanand01 @googleforcreators-bot @swissspidy @AnuragVasanwala