schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 17:51:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added aria-label to public styles, also fixed button to reserve space in DOM (fixes #245)

Browse source
This commit is contained in:
orangemug 2018-05-19 08:23:41 +01:00
parent db5dd0f6ee
commit a2a6f6dcab
3 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Button.jsx
View file

@ -5,6 +5,7 @@ import classnames from 'classnames'
class Button extends React.Component { class Button extends React.Component {
static propTypes = { static propTypes = {
"data-wd-key": PropTypes.string, "data-wd-key": PropTypes.string,
"aria-label": PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
style: PropTypes.object, style: PropTypes.object,
className: PropTypes.string, className: PropTypes.string,
@ -14,6 +15,7 @@ class Button extends React.Component {
render() { render() {
return <button return <button
onClick={this.props.onClick} onClick={this.props.onClick}
aria-label={this.props["aria-label"]}
className={classnames("maputnik-button", this.props.className)} className={classnames("maputnik-button", this.props.className)}
data-wd-key={this.props["data-wd-key"]} data-wd-key={this.props["data-wd-key"]}
style={this.props.style}> style={this.props.style}>

10
src/components/modals/OpenModal.jsx
View file

@ -23,6 +23,7 @@ class PublicStyle extends React.Component {
return <div className="maputnik-public-style"> return <div className="maputnik-public-style">
<Button <Button
className="maputnik-public-style-button" className="maputnik-public-style-button"
aria-label={this.props.title}
onClick={() => this.props.onSelect(this.props.url)} onClick={() => this.props.onSelect(this.props.url)}
> >
<header className="maputnik-public-style-header"> <header className="maputnik-public-style-header">
@ -30,11 +31,12 @@ class PublicStyle extends React.Component {
<span className="maputnik-space" /> <span className="maputnik-space" />
<AddIcon /> <AddIcon />
</header> </header>
<img <div
className="maputnik-public-style-thumbnail" className="maputnik-public-style-thumbnail"
src={this.props.thumbnailUrl} style={{
alt={this.props.title} backgroundImage: `url(${this.props.thumbnailUrl})`
/> }}
></div>
</Button> </Button>
</div> </div>
} }

4
src/styles/_modal.scss
View file

@ -85,6 +85,7 @@
background-color: $color-gray; background-color: $color-gray;
padding: $margin-3; padding: $margin-3;
display: block; display: block;
width: 100%;
&:hover { &:hover {
background-color: $color-midgray; background-color: $color-midgray;
@ -99,6 +100,9 @@
display: block; display: block;
margin-top: $margin-2; margin-top: $margin-2;
width: 100%; width: 100%;
padding-top: calc(400 / 600 * 100%);
background-size: cover;
background-color: $color-midgray;
} }
.maputnik-add-layer { .maputnik-add-layer {