-
Notifications
You must be signed in to change notification settings - Fork 54
Add story for Media Message component & remove border #3666
Conversation
@@ -11,6 +14,12 @@ const withDuration = { | |||
datetime: 'PT2M30S', | |||
}; | |||
|
|||
const StyledMessageContainer = styled.div` | |||
padding-top: 56.25%; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just wondering what 56.25% is for? This value seems unsual? Did we use this before this PR?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's a means of applying a 16:9 ratio to the container's padding. Where 16 is the width, 56.26% of that (9) is the height.
We use it in Simorgh as a means of pushing the other page content below the player - I'm just mocking that in the story to emulate the styling.
Frankly it seems like a mad way to manage layout but I'm sure there's good reason for doing it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Intersting, ok thanks for the explanation @RichardPK
Resolves #3624
Overall change:
MediaMessage
component withservice
&message
knobs.<strong>
element within component