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

fix mobile layout responsiveness for video resources #1246

Closed ibrahimjaved12 closed 1 year ago

ibrahimjaved12 commented 1 year ago

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/2408

Description (What does it do?)

  1. Fixes mobile layout responsiveness for video resources (titles going out of div boxes if they're bigger in length)
  2. It also adds ellipsis -- 2 lines limit for Desktop view, 4 lines limit for Mobile view (xs screen only)
  3. Also gives max-width of 150px to img thumbnails. Now for larger thumbnails, the div container will not grow bigger.

Screenshots (if appropriate):

image image

How to test it

  1. Checkout to this branch.
  2. Use any course (just run yarn start course).
  3. Go to Video Lectures.
  4. Try to break responsiveness of the video div containers eg. try different combination of long names, or very short names, or different size images for thumbnail. Experiment a little, make sure nothing breaks for all screens.
    Also, we've kept the font-size, and line-height same as before for screens larger than mobile (xs). Confirm that it works as expected.
github-actions[bot] commented 1 year ago

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

ibrahimjaved12 commented 1 year ago

@pdpinch Can you please look at the screenshots and confirm the design changes. For desktop view, we have added 2 lines of text per video div. But for mobile view we have added 4 lines of text.

pdpinch commented 1 year ago

Thanks @ibrahimjaved12 this looks good. Let's go ahead.