Skip to content

Commit

Permalink
MWPW-160834: Clickable App and Playstore links (#3074)
Browse files Browse the repository at this point in the history
* Place app store buttons next to eachother

* Add Robert's PR feedback

* Address Rares PR feedback

* Add aria-labels

* Keep lines under 100 characters

* Remove the margin of the container
  • Loading branch information
mokimo authored Oct 29, 2024
1 parent 351c302 commit 1d36e98
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 3 deletions.
7 changes: 4 additions & 3 deletions libs/blocks/media/media.css
Original file line number Diff line number Diff line change
Expand Up @@ -165,8 +165,8 @@ div[class*="-up"] .media .foreground > .media-row {
}

.media.qr-code .qr-button-container {
display: inline;
margin-right: var(--spacing-s);
display: inline-block;
margin: 0;
}

.media.qr-code .google-play,
Expand All @@ -179,7 +179,8 @@ div[class*="-up"] .media .foreground > .media-row {
justify-content: center;
padding: 0;
display: inline-flex;
margin: var(--spacing-xs) var(--spacing-s) 0 0;
margin-top: var(--spacing-xs);
margin-inline-end: var(--spacing-s);
}

.media.qr-code .google-play {
Expand Down
5 changes: 5 additions & 0 deletions libs/blocks/media/media.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,16 @@ function decorateQr(el) {
const googlePlay = text.children[(text.children.length - 2)]?.querySelector('a');
const qrImage = text.children[(text.children.length - 3)];
if (!qrImage || !appStore || !googlePlay) return;
[appStore, googlePlay].forEach(({ parentElement }) => {
parentElement.classList.add('qr-button-container');
});
qrImage.classList.add('qr-code-img');
appStore.classList.add('app-store');
appStore.textContent = '';
appStore.setAttribute('aria-label', 'Apple App Store');
googlePlay.classList.add('google-play');
googlePlay.textContent = '';
googlePlay.setAttribute('aria-label', 'Google Play Store');
}

export default async function init(el) {
Expand Down

0 comments on commit 1d36e98

Please sign in to comment.