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

Feat / UI updates and bring back support for light background colors #629

Merged
merged 1 commit into from
Nov 1, 2024
Merged

Feat / UI updates and bring back support for light background colors #629

merged 1 commit into from
Nov 1, 2024

Conversation

ChristiaanScheermeijer
Copy link
Collaborator

@ChristiaanScheermeijer ChristiaanScheermeijer commented Oct 28, 2024 •
edited
Loading

Description

This PR contains many UI improvements and (re)adds support for using light background colors.

Generic UI Improvements

  • Fix header and page alignment (spacing/gutters) for all breakpoints
  • Increase the shelf spacing
  • Increase the gap between the cards from 8 to 16 in the slider and card grid
  • Increase the title spacing for all pages
  • Cleanup unused SCSS variables

Video details

  • Align the video details to the bottom of the Hero
  • Refactor the Hero to make it re-usable for the Video details and Hub pages
  • Update the background image mask to cover more of the page and hide the visual radial gradient

Header

  • Increase the header height from 56 to 72 pixels
  • Update the appearance of the search bar input

Light background/header colors

The OTT Web App originally supported using lighter background/header colors. This was not working properly anymore and contained many bugs. It's not pretty, but it does work and uses the correct contrast colors again. The following changes are related to this:

  • Extract the text-shadow into a CSS variable and disable it when using a light background
  • Update the body-color CSS variable based on the calculated contrast color
  • Remove many variables.$white usages which overwrites the --body-color (and add some where it was needed)
  • Use the modal color for the Sidebar (menu) and Panels on the User page
  • Update the EPG layout to be full width and use the default JW blue background color

Update 29/10

  • Use markdown for video descriptions
  • Fix inline video layout alignment issues (title and description is aligned to the bottom of the page)
  • Use dynamic background for the EPG, but not when using a light background color

Screenshots

localhost_8080__app-config= (1)

localhost_8080__app-config=

localhost_8080_u_my-account_app-config=2basfsic (1)

localhost_8080_u_my-account_app-config=2basfsic (2)

localhost_8080_u_my-account_app-config=2basfsic (3)

Screenshots light background color

localhost_8080_ (3)

localhost_8080_ (4)

localhost_8080__app-config=2basfsic

@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 28, 2024 •
edited
Loading

Visit the preview URL for this PR (updated for commit 8f3e554):

https://ottwebapp--pr629-feat-ui-updates-yvj4umwf.web.app

(expires Sun, 01 Dec 2024 13:56:47 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: c198f8a3a199ba8747819f7f1e45cf602b777529

royschut
royschut approved these changes Oct 29, 2024
View reviewed changes
Copy link
Collaborator

@royschut royschut left a comment

Choose a reason for hiding this comment

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

Nice cosmetic improvement and great clean up as well. 👍

packages/hooks-react/src/usePlanByEpg.ts Outdated Show resolved Hide resolved
langemike
langemike approved these changes Oct 30, 2024
View reviewed changes
Copy link
Collaborator

@langemike langemike left a comment

Choose a reason for hiding this comment

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

Nice visual improvement! I tested it in different responsive sizes and in an old browser. Looks good!

@ChristiaanScheermeijer
Copy link
Collaborator Author

I pushed two updates;

@ChristiaanScheermeijer ChristiaanScheermeijer added the JWP Audit This PR needs a review from an JWP employee label Oct 30, 2024
@langemike
Copy link
Collaborator

Use markdown for video descriptions

How does it handle embedded images?

@ChristiaanScheermeijer
Copy link
Collaborator Author

Use markdown for video descriptions

How does it handle embedded images?

Good question, should we only allow some markup syntax for the description?

@langemike
Copy link
Collaborator

Good question, should we only allow some markup syntax for the description?

I think we should only allow markup such as links and text markup (bold, italic, underline). It wouldn't make it really pretty, but let's leave that up to the end customer.

So no: images, lists, code and headings.

Links should be presented differently on TV apps, because you don't want to leave the TV app, but this is out of scope for this PR.

@ChristiaanScheermeijer
Copy link
Collaborator Author

Thanks @langemike! I have updated the markdown component to disable images and GitHub flavoured markdown. Most block elements are already disabled due to using Marked#parseInline.

@ChristiaanScheermeijer
feat(project): ui improvements and support light background
8f3e554 
feat(project): increase header height

fix(playlist): use correct card width in grid

fix(project): support light body background colors

feat(videodetail): use markdown for video description

fix(videodetail): remove space in video duration

fix(videodetail): inline layout alignment

feat(epg): dynamic background

chore: update snapshots

fix(epg): use default epg background

fix(epg): disable scroll animation on first render

chore(videodetail): featured shelf alignments

chore(e2e): fix expand video details test

chore: update snapshots

chore: hide images in video description
@royschut royschut merged commit 620007b into develop Nov 1, 2024
10 checks passed
@royschut royschut deleted the feat/ui-updates branch November 1, 2024 15:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@royschut royschut royschut approved these changes

@langemike langemike langemike approved these changes

@dbudzins dbudzins Awaiting requested review from dbudzins dbudzins is a code owner

@AntonLantukh AntonLantukh Awaiting requested review from AntonLantukh AntonLantukh is a code owner

@CarinaDraganJW CarinaDraganJW Awaiting requested review from CarinaDraganJW

Assignees
No one assigned
Labels
JWP Audit This PR needs a review from an JWP employee
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@ChristiaanScheermeijer @langemike @royschut