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

Jump to bottom

Resource Gallery - Video in the video pop-up is cutoff #276 #277

Merged
merged 3 commits into from
Dec 6, 2023
Merged

Resource Gallery - Video in the video pop-up is cutoff #276 #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8684f84
refactor icon usage
cogniSyb Dec 5, 2023
0775e2d
remove redundant close button
cogniSyb Dec 5, 2023
1f2884f
fix video size
cogniSyb Dec 5, 2023
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
40 changes: 39 additions & 1 deletion common/modal/modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@
position: relative;
transform: translateY(-100vh);
transition: transform 0.3s ease-out;
}

:root:not(.redesign-v2) .modal-content {
margin-top: 100px;
background-color: var(--c-grey-1);
}

Expand Down Expand Up @@ -105,7 +109,7 @@
outline-offset: 5px;
}

.modal-top-bar svg {
.modal-top-bar .icon svg {
height: 24px;
width: 24px;
}
Expand Down Expand Up @@ -179,6 +183,7 @@
gap: 2%;
}

/* stylelint-disable-next-line no-descending-specificity */
.modal-content:has(.modal-soundcloud) {
aspect-ratio: unset;
}
Expand All @@ -199,3 +204,36 @@
width: 100%;
height: unset;
}

.redesign-v2 .modal-content:has(.modal-video) {
padding: 0 16px;
max-width: calc(var(--wrapper-width) + 32px);
}

.redesign-v2 .modal-video {
width: calc(100% - 32px);
height: auto;
border-radius: 8px 8px 0 0;
}

@media (min-width: 744px) {
.redesign-v2 .modal-content:has(.modal-video) {
padding: 0 32px;
}

.redesign-v2 .modal-video {
width: calc(100% - 64px);
}
}

@media (min-width: 1200px) {
.redesign-v2 .modal-content:has(.modal-video) {
padding: 0;
margin: 0 auto;
max-width: var(--wrapper-width);
}

.redesign-v2 .modal-video {
width: 100%;
}
}
15 changes: 4 additions & 11 deletions common/modal/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { createElement, getTextLabel } from '../../scripts/common.js';
import { loadCSS } from '../../scripts/lib-franklin.js';
import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js';
// eslint-disable-next-line import/no-cycle
import { createIframe, isLowResolutionVideoUrl } from '../../scripts/video-helper.js';

Expand All @@ -16,15 +16,14 @@ const createModalTopBar = (parentEl) => {
<div class="modal-top-bar">
<div class="modal-top-bar-content">
<h2 class="modal-top-bar-heading" id="modal-heading"></h2>
<button class="modal-close-button" aria-label=${getTextLabel('close')}>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.97979 4.97979C5.17505 4.78453 5.49163 4.78453 5.6869 4.97979L16 15.2929L26.3131 4.97979C26.5084 4.78453 26.825 4.78453 27.0202 4.97979C27.2155 5.17505 27.2155 5.49163 27.0202 5.6869L16.7071 16L27.0202 26.3131C27.2155 26.5084 27.2155 26.825 27.0202 27.0202C26.825 27.2155 26.5084 27.2155 26.3131 27.0202L16 16.7071L5.6869 27.0202C5.49163 27.2155 5.17505 27.2155 4.97979 27.0202C4.78453 26.825 4.78453 26.5084 4.97979 26.3131L15.2929 16L4.97979 5.6869C4.78453 5.49163 4.78453 5.17505 4.97979 4.97979Z" fill="var(--color-icon, #000)"/>
</svg>
<button type="button" class="modal-close-button" aria-label=${getTextLabel('close')}>
<span class="icon icon-close" aria-hidden="true" />
</button>
</div>
</div>
`);

decorateIcons(topBar);
parentEl.prepend(...topBar.children);
// eslint-disable-next-line no-use-before-define
parentEl.querySelector('.modal-close-button').addEventListener('click', () => hideModal());
Expand Down Expand Up @@ -126,12 +125,6 @@ const createModal = () => {
bannerWrapper.classList.add('modal-before-banner');
bannerWrapper.addEventListener('click', (event) => event.stopPropagation());
bannerWrapper.appendChild(beforeBanner);
const closeButton = document.createElement('button');
closeButton.classList.add('modal-close-button');
closeButton.innerHTML = '<i class="fa fa-close"></i>';
bannerWrapper.appendChild(closeButton);
// eslint-disable-next-line no-use-before-define
closeButton.addEventListener('click', () => hideModal());

videoOrIframe.before(bannerWrapper);
}
Expand Down