Skip to content

feat(www): tagline on plugin library landing page #12530

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
DSchau merged 18 commits into from
Mar 21, 2019
Merged

feat(www): tagline on plugin library landing page #12530

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
ab80b4d
tagline on plugins page
calcsam2 Mar 12, 2019
b79520a
slightly more lightweight design
calcsam2 Mar 12, 2019
705137a
Format, fix `cursor: pointer`
fk Mar 19, 2019
38bf8c7
Format moar
fk Mar 19, 2019
7b6f61d
Replace `<`/`>` with icons
fk Mar 19, 2019
c856b8a
Basic a11y for control buttons, consolidate styles
fk Mar 19, 2019
b502cc5
Animate width of alternating text
fk Mar 19, 2019
d710c49
Simpler UI, tidy margins
fk Mar 19, 2019
387dd49
Merge branch 'master' into tagline-on-plugins-page
fk Mar 20, 2019
bbbb411
Adjust to latest changes from master
fk Mar 20, 2019
079e9e0
Adjust border color
fk Mar 20, 2019
c320e25
Fix issues on smaller screens
fk Mar 20, 2019
c73b55f
Bring back the „well“
fk Mar 20, 2019
49c3773
Revert "Bring back the „well“"
fk Mar 20, 2019
1abfbc3
Make „control button“ hover more visible, add :active styles
fk Mar 20, 2019
d41c169
Rename Rotater -> Rotator
fk Mar 20, 2019
395f794
Fix review - cleanup some code
wardpeet Mar 20, 2019
f1eb9b9
update accessbility
wardpeet Mar 20, 2019
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
16 changes: 9 additions & 7 deletions www/src/components/rotator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@ class Rotator extends Component {

render() {
const { text, pluginName } = this.props.items[this.state.item]

const enableSlider = this.shouldAnimate() && this.intervalId

return (
Expand Down Expand Up @@ -142,16 +141,14 @@ class Rotator extends Component {
whiteSpace: `nowrap`,
display: `inline-block`,
}}
id="headline-slider"
ref={this.sliderContainer}
aria-live={this.intervalId ? `off` : `polite`}
>
{!enableSlider ? (
<>{text}</>
) : (
<Slider
items={[text]}
color={`#000`}
getSize={size => this.setState({ size })}
Copy link
Contributor

@fk fk Mar 20, 2019

Choose a reason for hiding this comment

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

Argh! Thanks for catching that @wardpeet! 🙏

/>
<Slider items={[text]} color={`#000`} />
)}
</span>
</span>
Expand All @@ -174,13 +171,18 @@ class Rotator extends Component {
{` `}
for that.
</p>
<button css={{ ...controlButtonStyles }} onClick={this.decrementItem}>
<button
css={{ ...controlButtonStyles }}
onClick={this.decrementItem}
aria-controls="headline-slider"
>
<MdNavigateBefore aria-hidden="true" />
<span css={srOnly}>Previous</span>
</button>
<button
css={{ ...controlButtonStyles, left: `auto`, right: 0 }}
onClick={this.incrementItemAndClearInterval}
aria-controls="headline-slider"
>
<MdNavigateNext aria-hidden="true" />
<span css={srOnly}>Next</span>
Expand Down