Remove exhibition section (iframe)
This commit is contained in:
Paul Nicoué
parent
7c368957bc
commit
c12732989c
5 changed files with 12 additions and 233 deletions
|
|
@ -15,7 +15,6 @@ body {
|
|||
font-size: var(--text-font-size);
|
||||
line-height: var(--text-line-height);
|
||||
color: var(--black);
|
||||
background-color: var(--feldgrau);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -38,10 +37,6 @@ h3 {
|
|||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: var(--bold-font-weight);
|
||||
}
|
||||
|
|
@ -92,7 +87,7 @@ body {
|
|||
|
||||
.sidebar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: var(--sidebar-padding);
|
||||
display: flex;
|
||||
|
|
@ -171,62 +166,11 @@ body {
|
|||
@media screen and (min-width: $desktop-media-query) {
|
||||
|
||||
.sidebar {
|
||||
|
||||
&--fixed {
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
overflow-y: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&--slimmed {
|
||||
width: 15%;
|
||||
min-width: 15rem;
|
||||
|
||||
.sidebar__nav-link {
|
||||
color: var(--transparent-black);
|
||||
}
|
||||
|
||||
.sidebar__social-link {
|
||||
|
||||
svg {
|
||||
fill: var(--transparent-black);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.sidebar__nav-link {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.sidebar__social-link {
|
||||
|
||||
svg {
|
||||
fill: var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__nav-link {
|
||||
|
||||
&:focus-visible {
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__social-link {
|
||||
|
||||
&:focus-visible {
|
||||
|
||||
svg {
|
||||
fill: var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__social {
|
||||
width: auto;
|
||||
|
|
@ -243,22 +187,8 @@ body {
|
|||
|
||||
.slider-section {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition:
|
||||
visibility 0ms 400ms,
|
||||
opacity 400ms ease-in-out;
|
||||
|
||||
&--hidden {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition:
|
||||
visibility 0ms,
|
||||
opacity 400ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.splide__image {
|
||||
|
|
@ -266,38 +196,3 @@ body {
|
|||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// Exhibition section
|
||||
|
||||
.exhibition-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $desktop-media-query) {
|
||||
|
||||
.exhibition-section {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.exhibition {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition:
|
||||
visibility 0ms,
|
||||
opacity 400ms ease-in-out;
|
||||
|
||||
&--visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition:
|
||||
visibility 0ms 400ms,
|
||||
opacity 400ms ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
108
assets/js/app.js
108
assets/js/app.js
|
|
@ -14,21 +14,9 @@ const body = document.body;
|
|||
const slider = document.querySelector('.slider-section');
|
||||
let splideSlider;
|
||||
const slides = document.querySelectorAll('.splide__slide');
|
||||
|
||||
// EXHIBITION IFRAME
|
||||
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link');
|
||||
const sidebarEmbeddedNavLinks = document.querySelectorAll('.sidebar__nav-link--iframe');
|
||||
const sidebarSocialLinks = document.querySelectorAll('.sidebar__social-link');
|
||||
const exhibitionIframe = document.querySelector('.exhibition');
|
||||
|
||||
// NAV LINKS TARGET
|
||||
|
||||
const mediaQueries = {
|
||||
remTabletWidth: 48,
|
||||
remDesktopWidth: 62
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// LOGIC
|
||||
|
|
@ -146,93 +134,6 @@ function editNavLinksColorOnSlideActive() {
|
|||
}
|
||||
}
|
||||
|
||||
// EXHIBITION IFRAME
|
||||
|
||||
function slimDownSidebar() {
|
||||
if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
|
||||
sidebar.classList.add('sidebar--slimmed');
|
||||
}
|
||||
}
|
||||
|
||||
function enlargeSidebar() {
|
||||
if (sidebar) {
|
||||
sidebar.classList.remove('sidebar--slimmed');
|
||||
}
|
||||
}
|
||||
|
||||
function hideSlider() {
|
||||
if (slider) {
|
||||
slider.classList.add('slider-section--hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function showSlider() {
|
||||
if (slider) {
|
||||
slider.classList.remove('slider-section--hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function enableExhibitionIframe() {
|
||||
if (exhibitionIframe) {
|
||||
exhibitionIframe.classList.add('exhibition--visible');
|
||||
}
|
||||
}
|
||||
|
||||
function disableExhibitionIframe() {
|
||||
if (exhibitionIframe && slider) {
|
||||
exhibitionIframe.classList.remove('exhibition--visible');
|
||||
}
|
||||
}
|
||||
|
||||
function loadExhibitionIframe() {
|
||||
if (sidebarEmbeddedNavLinks.length > 0 && exhibitionIframe) {
|
||||
for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
|
||||
sidebarEmbeddedNavLinks[i].addEventListener('click', function(e) {
|
||||
if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
|
||||
exhibitionIframe.addEventListener('load', function(e) {
|
||||
turnSidebarLinksToBlack();
|
||||
slimDownSidebar();
|
||||
hideSlider();
|
||||
enableExhibitionIframe();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NAV LINKS TARGET
|
||||
|
||||
function setNavLinksIframeTarget() {
|
||||
if (sidebarEmbeddedNavLinks) {
|
||||
for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
|
||||
sidebarEmbeddedNavLinks[i].setAttribute('target', 'exhibition');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setNavLinksBlankTarget() {
|
||||
if (sidebarEmbeddedNavLinks) {
|
||||
for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
|
||||
sidebarEmbeddedNavLinks[i].setAttribute('target', '_blank');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function editNavLinksTarget() {
|
||||
if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
|
||||
setNavLinksIframeTarget();
|
||||
} else {
|
||||
setNavLinksBlankTarget();
|
||||
}
|
||||
}
|
||||
|
||||
function editNavLinksTargetOnResize() {
|
||||
window.addEventListener('resize', function(e) {
|
||||
editNavLinksTarget();
|
||||
})
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// PROGRAM
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
@ -249,12 +150,3 @@ mountSlider();
|
|||
goToNextSlideOnClick();
|
||||
changeSlideOnSwipe();
|
||||
editNavLinksColorOnSlideActive();
|
||||
|
||||
// EXHIBITION IFRAME
|
||||
|
||||
loadExhibitionIframe();
|
||||
|
||||
// NAV LINKS TARGET
|
||||
|
||||
editNavLinksTarget();
|
||||
editNavLinksTargetOnResize();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -3,17 +3,13 @@
|
|||
{% block header %}
|
||||
<header>
|
||||
|
||||
<div class="sidebar sidebar--fixed">
|
||||
<div class="sidebar">
|
||||
<nav class="sidebar__nav" aria-label="Menu">
|
||||
{% if exhibitions is not empty %}
|
||||
<ul class="sidebar__nav-menu">
|
||||
{% for exhibition in exhibitions %}
|
||||
<li class="sidebar__nav-item">
|
||||
{% if exhibition.external_link == 'false' %}
|
||||
<a class="sidebar__nav-link sidebar__nav-link--iframe" href="{{ exhibition.url }}" target="exhibition" data-background="{{ exhibition.background_color }}">{{ exhibition.title }}</a>
|
||||
{% else %}
|
||||
<a class="sidebar__nav-link sidebar__nav-link--blank" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
|
||||
{% endif %}
|
||||
<a class="sidebar__nav-link" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
@ -41,10 +37,6 @@
|
|||
{% block main %}
|
||||
<main>
|
||||
|
||||
<section class="exhibition-section">
|
||||
<iframe class="exhibition" name="exhibition" src=""></iframe>
|
||||
</section>
|
||||
|
||||
<section class="slider-section splide" aria-label="{{ site.title }}'s artwork gallery">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue