search

mitodl / ocw-hugo-themes

A Hugo theme for building OCW websites
BSD 3-Clause "New" or "Revised" License
5 stars 4 forks source link

feat: adjust modal styles for `xs` screens #1368

Closed HussainTaj-arbisoft closed 8 months ago

HussainTaj-arbisoft commented 8 months ago

What are the relevant tickets?

Related to https://github.com/mitodl/ocw-hugo-themes/pull/1364

Description (What does it do?)

@mbilalmughal suggested a few improvements to the styles of the modal for small screens.

This PR updates modal styles for xs screens. It

Screenshots (if appropriate):

iPhone 12 pro vs iPad Mini (for reference)

iPhone 12 iPad Mini

How can this be tested?

  1. Grab content for this course.
  2. Place the content in your local content directory.
  3. Navigate to your local setup of ocw-hugo-themes.
  4. Checkout branch hussaintaj/adjust-modal-xs-styles.
  5. Run 
    yarn start course ht-test-2024
  6. Click a link that opens a modal.
  7. Observe the modal in a small device through the device toolbar in the developer panel.
  8. Expect the mobile modal to be smaller and more compact for smaller screens.
github-actions[bot] commented 8 months ago

Netlify Deployments:
www: https://ocw-hugo-themes-www-pr-1368--ocw-next.netlify.app/
Course v2: https://ocw-hugo-themes-course-v2-pr-1368--ocw-next.netlify.app/

ibrahimjaved12 commented 8 months ago

Looks good to me.

There is one inconsistency that I noticed that kind of stood out because of the modal, but its not a fault with the modal itself or this PR. Addressed it here: https://github.com/mitodl/hq/issues/3759