Skip to content
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

VA-523 Implement changes after design review #78

Merged
merged 5 commits into from
Feb 6, 2025
Merged

VA-523 Implement changes after design review #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f46ecf3
VA-453 Align icons of audio and video play buttons
Languafe Feb 5, 2025
0200846
VA-523 Scroll video modal into view when opened
Languafe Feb 5, 2025
8bc6bf0
VA-523 Make video modal more compact when space is limited
Languafe Feb 5, 2025
bbf0461
VA-523 Prevent warped button caused audio option `fitToWrapper`
Languafe Feb 6, 2025
eea971d
VA-523 Add a little bit of padding to compact modals' content
Languafe Feb 6, 2025
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
5 changes: 3 additions & 2 deletions src/scripts/h5p-multi-media-choice-option.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export class MultiMediaChoiceOption {

modal.setAttribute('tabindex', '0');
modal.focus();
modal.scrollIntoView({ behavior: 'smooth', block: 'center' });
event.stopPropagation();
});

Expand Down Expand Up @@ -209,8 +210,8 @@ export class MultiMediaChoiceOption {
*/
createVideoPlayer(lastFocus) {
const modal = createElement({type: 'div', classList: ['h5p-multi-media-modal'], attributes: {'aria-modal': 'true'}});
const modalContainer = createElement({type: 'div', classList: ['modal-container']});
const modalContent = createElement({type: 'div', classList: ['modal-content']});
const modalContainer = createElement({type: 'div', classList: ['h5p-multi-media-choice-modal-container']});
const modalContent = createElement({type: 'div', classList: ['h5p-multi-media-choice-modal-content']});
const closeButton = createElement({type: 'button', classList: ['modal-close-button'], attributes: {'aria-label': this.closeModalText}});
const cross = createElement({type: 'div', classList: ['icon-cross']});

Expand Down
7 changes: 7 additions & 0 deletions src/scripts/h5p-multi-media-choice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@ export default class MultiMediaChoice extends H5P.Question {
// Default values are extended
this.params = Util.extendParams(params);

// Override subcontent params
for (const option of this.params.options) {
if (option.media?.library?.includes('H5P.Audio')) {
option.media.params.fitToWrapper = false; // VA-523: prevent warped button
}
}

this.content = new MultiMediaChoiceContent(
this.params,
contentId,
Expand Down
1 change: 1 addition & 0 deletions src/styles/_sizes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ $option-icon: 2.8em;
$minimum-auto-scaling-size: 901px;
$scaling-interval: 300px;
$button-size: 4rem;
$button-size-small: 2.5rem;
39 changes: 33 additions & 6 deletions src/styles/h5p-multi-media-choice.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,16 +208,18 @@
align-items: center;
justify-content: center;

.modal-container {
.h5p-multi-media-choice-modal-container {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
container-name: h5p-mmc-modal-container;
container-type: inline-size;

.modal-content {
.h5p-multi-media-choice-modal-content {
position: relative;
background-color: white;
padding: 1.2rem;
Expand All @@ -229,6 +231,12 @@
box-shadow: none;
max-height: 100%;

@container h5p-mmc-modal-container (width < 480px) {
padding: 3px;
width: 100%;
max-width: 100%;
}

.modal-close-button {
background-color: #ffffff;
position: absolute;
Expand All @@ -245,13 +253,25 @@
justify-content: center;
align-items: center;

@container h5p-mmc-modal-container (width < 480px) {
right: 0;
height: $button-size-small;
width: $button-size-small;
}

.icon-cross {
width: 4rem;
height: 4rem;
width: $button-size;
height: $button-size;
background-size: 3.5rem;
background-image: url(../../assets/x-close.svg);
background-repeat: no-repeat;
background-position: -0.1rem 0.2rem;
background-position: center;

@container h5p-mmc-modal-container (width < 480px) {
height: $button-size-small;
width: $button-size-small;
background-size: 2rem;
}
}
}
}
Expand Down Expand Up @@ -282,7 +302,7 @@
right: 0;
margin: 0.5em;
z-index: 1;

.h5p-audio-minimal-button {
width: $button-size;
height: $button-size;
Expand All @@ -298,6 +318,13 @@
.h5p-audio-minimal-button::before {
font-size: math.div($button-size, 2);
}

/* Make H5P.Audio's play button icon match our video play button's icon */
.h5p-audio-minimal-play-paused::before {
position: relative;
left: 3px;
font-size: 2.125rem;
}
}

.h5p-multi-media-content-media-button-centered {
Expand Down