Skip to content

Podcast Player: Clean-up styles & fix few remaining issues #15512

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

Merged
WunderBart merged 25 commits into from
Apr 24, 2020
Merged

Podcast Player: Clean-up styles & fix few remaining issues #15512

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
da36b38
Clean up duplicated CSS variables
WunderBart Apr 21, 2020
ea5fdf8
Don't use variable for ME background color
WunderBart Apr 21, 2020
308c13b
Use editor variables for standard font sizes
WunderBart Apr 21, 2020
fe61f2a
Rename a few variables for clarity
WunderBart Apr 21, 2020
aa9134b
Move state classes comment under proper class
WunderBart Apr 21, 2020
9ba33ea
Move block background-color where it belongs
WunderBart Apr 21, 2020
8bff114
Move comment over related code
WunderBart Apr 21, 2020
1b0b047
Improve colors styling
WunderBart Apr 21, 2020
a2c109b
Spread some shorthands for clarity and lint styles.scss
WunderBart Apr 21, 2020
65ff357
Reorganized .mejs wrapper classes for easier reading
jeryj Apr 21, 2020
174c2e2
Move link class for specificity bump
WunderBart Apr 22, 2020
5d5b90b
Remove block border
WunderBart Apr 22, 2020
3da2053
Update header markup
WunderBart Apr 23, 2020
0e6698c
Add missing class to track link
WunderBart Apr 23, 2020
fd729e9
Correct track padding for no-js markup
WunderBart Apr 23, 2020
a3edfb9
Move no-js styling to the bottom of the sheet
WunderBart Apr 23, 2020
491d687
Use bg color as text color for ME float element
WunderBart Apr 23, 2020
ba25ffe
Define generic gutters instead of cryptic paddings
WunderBart Apr 23, 2020
dbfb2d6
Move error color to a local var
WunderBart Apr 23, 2020
f6a1839
Use gutter-m instead of fixed value
WunderBart Apr 23, 2020
444590c
Use provided var for description line-height
WunderBart Apr 23, 2020
037cc6e
Wrap description text with <p>
WunderBart Apr 23, 2020
21cf495
Do not add extra padding to the top of the list
WunderBart Apr 23, 2020
c0fb34b
Fix ME.js time element color
WunderBart Apr 23, 2020
66b4af6
Removed unnecessary aria-live in SSR podcast header
jeryj Apr 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 18 additions & 26 deletions extensions/blocks/podcast-player/components/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,12 @@ const Header = memo(
* readers, then visually switching it with the audio player via flex.
*/ }
{ !! ( showEpisodeDescription && track && track.description ) && (
<div
<p

@jeryj jeryj Apr 23, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Good catch to change this to a <p>. Testing looks good!

id={ `${ playerId }__track-description` }
className="jetpack-podcast-player__track-description"
>
{ track.description }
</div>
</p>
) }

{ /* children contains the audio player */ }
Expand Down Expand Up @@ -96,29 +96,21 @@ const Title = memo(
)
);

const PodcastTitle = memo(
( { title, link, colors = { secondary: { name: null, custom: null, classes: '' } } } ) => {
const className = classnames(
'jetpack-podcast-player__podcast-title',
colors.secondary.classes
);

if ( link ) {
return (
<a
className={ className }
style={ { color: colors.secondary.custom } }
href={ link }
target="_blank"
rel="noopener noreferrer nofollow"
>
{ title }
</a>
);
}

return <span className={ className }>{ title }</span>;
}
);
const PodcastTitle = memo( ( { title, link } ) => (
<span className="jetpack-podcast-player__podcast-title">
{ link ? (
<a
className="jetpack-podcast-player__link"
href={ link }
target="_blank"
rel="noopener noreferrer nofollow"
>
{ title }
</a>
) : (
{ title }
) }
</span>
) );

export default Header;
11 changes: 8 additions & 3 deletions extensions/blocks/podcast-player/components/track-error.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,17 @@
import { memo } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';

const TrackError = memo( ( { link, title } ) => (
const TrackError = memo( ( { link, title, colors } ) => (
<div className="jetpack-podcast-player__track-error">
{ __( 'Episode unavailable. ', 'jetpack' ) }
{ link && (
<span>
<a href={ link } rel="noopener noreferrer nofollow" target="_blank">
<span className={ colors.secondary.classes } style={ { color: colors.secondary.custom } }>
<a
className="jetpack-podcast-player__link"
href={ link }
rel="noopener noreferrer nofollow"
target="_blank"
>
<span className="jetpack-podcast-player--visually-hidden">
{ /* Intentional trailing space outside of the translated string. */ }
{ `${ sprintf(
Expand Down
6 changes: 4 additions & 2 deletions extensions/blocks/podcast-player/components/track.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const Track = memo(
style={ Object.keys( inlineStyle ).length ? inlineStyle : null }
>
<a
className="jetpack-podcast-player__track-link"
className="jetpack-podcast-player__link jetpack-podcast-player__track-link"
href={ track.link }
role="button"
aria-current={ ariaCurrent }
Expand Down Expand Up @@ -100,7 +100,9 @@ const Track = memo(
</time>
) }
</a>
{ isActive && isError && <TrackError link={ track.link } title={ track.title } /> }
{ isActive && isError && (
<TrackError link={ track.link } title={ track.title } colors={ colors } />
) }
</li>
);
}
Expand Down
Loading