host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit sidebar style and animation

Browse source
This commit is contained in:
Paul Nicoué 2022-07-22 17:53:26 +02:00
parent 92e940b9cc
commit 5e06917b54
5 changed files with 144 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

29
public/assets/build/app.js
View file

@ -6,23 +6,44 @@ var __webpack_exports__ = {};
// ----------------------------------------------------------------------------
// DATA
// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------
// SIDEBAR ANIMATION
const sidebar = document.querySelector('.sidebar');
const sidebarNav = document.querySelector('.sidebar__nav');
const sidebarNavLinks = sidebarNav.querySelectorAll('.sidebar__nav-link--internal'); // ----------------------------------------------------------------------------
// UTILS
// ----------------------------------------------------------------------------
// Convert rem to pixels by getting font-size CSS property
function convertRemToPixels(rem) {
let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
return rem * fontSize;
} // ----------------------------------------------------------------------------
// LOGIC
// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------
// SIDEBAR ANIMATION
function slimDownSidebar() {
if (sidebar) {
sidebar.classList.add('sidebar--slimmed');
}
}
function slimDownSidebarOnClick() {
if (sidebarNavLinks.length > 0) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].addEventListener('click', slimDownSidebar);
}
}
} // ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
// Enable CSS :active pseudo-class in Safari Mobile
document.addEventListener("touchstart", function () {}, false);
document.addEventListener("touchstart", function () {}, false); // SIDEBAR ANIMATION
slimDownSidebarOnClick();
/******/ })()
;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLmpzIiwibWFwcGluZ3MiOiI7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBRUE7QUFDQTtBQUNBO0FBRUE7QUFDQSxTQUFTQSxrQkFBVCxDQUE0QkMsR0FBNUIsRUFBaUM7RUFDaEMsSUFBSUMsUUFBUSxHQUFHQyxVQUFVLENBQUNDLE1BQU0sQ0FBQ0MsZ0JBQVAsQ0FBd0JDLFFBQVEsQ0FBQ0MsSUFBakMsRUFBdUNDLGdCQUF2QyxDQUF3RCxXQUF4RCxDQUFELENBQXpCO0VBQ0EsT0FBT1AsR0FBRyxHQUFHQyxRQUFiO0FBQ0EsRUFFRDtBQUNBO0FBQ0E7QUFFQTtBQUNBO0FBQ0E7QUFFQTs7O0FBQ0FJLFFBQVEsQ0FBQ0csZ0JBQVQsQ0FBMEIsWUFBMUIsRUFBd0MsWUFBVyxDQUFFLENBQXJELEVBQXNELEtBQXRELEUiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9wdWJsaWMvYXNzZXRzL2pzL2FwcC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyIvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBEQVRBXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbi8vIFVUSUxTXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIENvbnZlcnQgcmVtIHRvIHBpeGVscyBieSBnZXR0aW5nIGZvbnQtc2l6ZSBDU1MgcHJvcGVydHlcbmZ1bmN0aW9uIGNvbnZlcnRSZW1Ub1BpeGVscyhyZW0pIHtcblx0bGV0IGZvbnRTaXplID0gcGFyc2VGbG9hdCh3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5ib2R5KS5nZXRQcm9wZXJ0eVZhbHVlKCdmb250LXNpemUnKSk7XG5cdHJldHVybiByZW0gKiBmb250U2l6ZTtcbn1cblxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuLy8gTE9HSUNcbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuLy8gUFJPR1JBTVxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4vLyBFbmFibGUgQ1NTIDphY3RpdmUgcHNldWRvLWNsYXNzIGluIFNhZmFyaSBNb2JpbGVcbmRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoXCJ0b3VjaHN0YXJ0XCIsIGZ1bmN0aW9uKCkge30sZmFsc2UpO1xuIl0sIm5hbWVzIjpbImNvbnZlcnRSZW1Ub1BpeGVscyIsInJlbSIsImZvbnRTaXplIiwicGFyc2VGbG9hdCIsIndpbmRvdyIsImdldENvbXB1dGVkU3R5bGUiLCJkb2N1bWVudCIsImJvZHkiLCJnZXRQcm9wZXJ0eVZhbHVlIiwiYWRkRXZlbnRMaXN0ZW5lciJdLCJzb3VyY2VSb290IjoiIn0=
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLmpzIiwibWFwcGluZ3MiOiI7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBRUE7QUFFQSxNQUFNQSxPQUFPLEdBQUdDLFFBQVEsQ0FBQ0MsYUFBVCxDQUF1QixVQUF2QixDQUFoQjtBQUNBLE1BQU1DLFVBQVUsR0FBR0YsUUFBUSxDQUFDQyxhQUFULENBQXVCLGVBQXZCLENBQW5CO0FBQ0EsTUFBTUUsZUFBZSxHQUFHRCxVQUFVLENBQUNFLGdCQUFYLENBQTRCLDhCQUE1QixDQUF4QixFQUVBO0FBQ0E7QUFDQTtBQUVBOztBQUNBLFNBQVNDLGtCQUFULENBQTRCQyxHQUE1QixFQUFpQztFQUNoQyxJQUFJQyxRQUFRLEdBQUdDLFVBQVUsQ0FBQ0MsTUFBTSxDQUFDQyxnQkFBUCxDQUF3QlYsUUFBUSxDQUFDVyxJQUFqQyxFQUF1Q0MsZ0JBQXZDLENBQXdELFdBQXhELENBQUQsQ0FBekI7RUFDQSxPQUFPTixHQUFHLEdBQUdDLFFBQWI7QUFDQSxFQUVEO0FBQ0E7QUFDQTtBQUVBOzs7QUFFQSxTQUFTTSxlQUFULEdBQTJCO0VBQzFCLElBQUlkLE9BQUosRUFBYTtJQUNaQSxPQUFPLENBQUNlLFNBQVIsQ0FBa0JDLEdBQWxCLENBQXNCLGtCQUF0QjtFQUNBO0FBQ0Q7O0FBRUQsU0FBU0Msc0JBQVQsR0FBa0M7RUFDakMsSUFBSWIsZUFBZSxDQUFDYyxNQUFoQixHQUF5QixDQUE3QixFQUFnQztJQUMvQixLQUFLLElBQUlDLENBQUMsR0FBRyxDQUFiLEVBQWdCQSxDQUFDLEdBQUdmLGVBQWUsQ0FBQ2MsTUFBcEMsRUFBNENDLENBQUMsRUFBN0MsRUFBaUQ7TUFDaERmLGVBQWUsQ0FBQ2UsQ0FBRCxDQUFmLENBQW1CQyxnQkFBbkIsQ0FBb0MsT0FBcEMsRUFBNkNOLGVBQTdDO0lBQ0E7RUFDRDtBQUNELEVBRUQ7QUFDQTtBQUNBO0FBRUE7OztBQUNBYixRQUFRLENBQUNtQixnQkFBVCxDQUEwQixZQUExQixFQUF3QyxZQUFXLENBQUUsQ0FBckQsRUFBc0QsS0FBdEQsR0FFQTs7QUFFQUgsc0JBQXNCLEciLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9wdWJsaWMvYXNzZXRzL2pzL2FwcC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyIvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBEQVRBXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIFNJREVCQVIgQU5JTUFUSU9OXG5cbmNvbnN0IHNpZGViYXIgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuc2lkZWJhcicpO1xuY29uc3Qgc2lkZWJhck5hdiA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5zaWRlYmFyX19uYXYnKTtcbmNvbnN0IHNpZGViYXJOYXZMaW5rcyA9IHNpZGViYXJOYXYucXVlcnlTZWxlY3RvckFsbCgnLnNpZGViYXJfX25hdi1saW5rLS1pbnRlcm5hbCcpO1xuXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBVVElMU1xuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4vLyBDb252ZXJ0IHJlbSB0byBwaXhlbHMgYnkgZ2V0dGluZyBmb250LXNpemUgQ1NTIHByb3BlcnR5XG5mdW5jdGlvbiBjb252ZXJ0UmVtVG9QaXhlbHMocmVtKSB7XG5cdGxldCBmb250U2l6ZSA9IHBhcnNlRmxvYXQod2luZG93LmdldENvbXB1dGVkU3R5bGUoZG9jdW1lbnQuYm9keSkuZ2V0UHJvcGVydHlWYWx1ZSgnZm9udC1zaXplJykpO1xuXHRyZXR1cm4gcmVtICogZm9udFNpemU7XG59XG5cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbi8vIExPR0lDXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIFNJREVCQVIgQU5JTUFUSU9OXG5cbmZ1bmN0aW9uIHNsaW1Eb3duU2lkZWJhcigpIHtcblx0aWYgKHNpZGViYXIpIHtcblx0XHRzaWRlYmFyLmNsYXNzTGlzdC5hZGQoJ3NpZGViYXItLXNsaW1tZWQnKTtcblx0fVxufVxuXG5mdW5jdGlvbiBzbGltRG93blNpZGViYXJPbkNsaWNrKCkge1xuXHRpZiAoc2lkZWJhck5hdkxpbmtzLmxlbmd0aCA+IDApIHtcblx0XHRmb3IgKGxldCBpID0gMDsgaSA8IHNpZGViYXJOYXZMaW5rcy5sZW5ndGg7IGkrKykge1xuXHRcdFx0c2lkZWJhck5hdkxpbmtzW2ldLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgc2xpbURvd25TaWRlYmFyKTtcblx0XHR9XG5cdH1cbn1cblxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuLy8gUFJPR1JBTVxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4vLyBFbmFibGUgQ1NTIDphY3RpdmUgcHNldWRvLWNsYXNzIGluIFNhZmFyaSBNb2JpbGVcbmRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoXCJ0b3VjaHN0YXJ0XCIsIGZ1bmN0aW9uKCkge30sZmFsc2UpO1xuXG4vLyBTSURFQkFSIEFOSU1BVElPTlxuXG5zbGltRG93blNpZGViYXJPbkNsaWNrKCk7XG4iXSwibmFtZXMiOlsic2lkZWJhciIsImRvY3VtZW50IiwicXVlcnlTZWxlY3RvciIsInNpZGViYXJOYXYiLCJzaWRlYmFyTmF2TGlua3MiLCJxdWVyeVNlbGVjdG9yQWxsIiwiY29udmVydFJlbVRvUGl4ZWxzIiwicmVtIiwiZm9udFNpemUiLCJwYXJzZUZsb2F0Iiwid2luZG93IiwiZ2V0Q29tcHV0ZWRTdHlsZSIsImJvZHkiLCJnZXRQcm9wZXJ0eVZhbHVlIiwic2xpbURvd25TaWRlYmFyIiwiY2xhc3NMaXN0IiwiYWRkIiwic2xpbURvd25TaWRlYmFyT25DbGljayIsImxlbmd0aCIsImkiLCJhZGRFdmVudExpc3RlbmVyIl0sInNvdXJjZVJvb3QiOiIifQ==

50
public/assets/build/main.css
View file

File diff suppressed because one or more lines are too long

63
public/assets/css/main.scss
View file

@ -89,21 +89,30 @@ body {
left: 0;
padding: var(--sidebar-vertical-padding) var(--sidebar-horizontal-padding);
overflow-y: auto;
background-color: transparent;
background-color: var(--transparent-white);
transition: background-color 400ms ease-in-out;
.sidebar__nav {
.sidebar__nav-item {
width: 97vw;
transition: width 400ms ease-in-out;
+ .sidebar__nav-item {
margin: 0.75rem 0 0 0;
}
}
a {
color: var(--transparent-black);
transition: color 400ms ease-in-out;
.sidebar__nav-link {
display: inline-block;
max-width: 100vw;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--black);
transition:
max-width 400ms ease-in-out,
color 400ms ease-in-out;
}
}
@ -112,42 +121,66 @@ body {
align-items: center;
margin: 1rem 0 0 0;
a {
.sidebar__social-link {
width: var(--icon-size);
height: var(--icon-size);
display: flex;
justify-content: center;
align-items: center;
+ a {
+ .sidebar__social-link {
margin: 0 0 0 1rem;
}
svg {
width: 100%;
height: 100%;
fill: var(--transparent-black);
fill: var(--black);
transition: fill 400ms ease-in-out;
}
}
}
&:hover {
background-color: var(--transparent-white);
&--slimmed {
background-color: transparent;
.sidebar__nav {
a {
color: var(--black);
.sidebar__nav-item {
width: 15vw;
}
.sidebar__nav-link {
max-width: 15vw;
color: var(--transparent-black);
}
}
.sidebar__social {
svg {
fill: var(--black);
fill: var(--transparent-black);
}
}
&:hover {
background-color: var(--transparent-white);
.sidebar__nav {
.sidebar__nav-link {
color: var(--black);
}
}
.sidebar__social {
svg {
fill: var(--black);
}
}
}
}
}
@ -155,14 +188,14 @@ body {
// MAIN
// ----------------------------------------------------------------------------
// Home section
// Exhibition section
.exhibitions-section {
.exhibition-section {
width: 100vw;
height: 100vh;
}
.exhibitions-section__iframe {
.exhibition-section__iframe {
width: 100%;
height: 100%;
}

26
public/assets/js/app.js
View file

@ -2,6 +2,12 @@
// DATA
// ----------------------------------------------------------------------------
// SIDEBAR ANIMATION
const sidebar = document.querySelector('.sidebar');
const sidebarNav = document.querySelector('.sidebar__nav');
const sidebarNavLinks = sidebarNav.querySelectorAll('.sidebar__nav-link--internal');
// ----------------------------------------------------------------------------
// UTILS
// ----------------------------------------------------------------------------
@ -16,9 +22,29 @@ function convertRemToPixels(rem) {
// LOGIC
// ----------------------------------------------------------------------------
// SIDEBAR ANIMATION
function slimDownSidebar() {
if (sidebar) {
sidebar.classList.add('sidebar--slimmed');
}
}
function slimDownSidebarOnClick() {
if (sidebarNavLinks.length > 0) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].addEventListener('click', slimDownSidebar);
}
}
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
// Enable CSS :active pseudo-class in Safari Mobile
document.addEventListener("touchstart", function() {},false);
// SIDEBAR ANIMATION
slimDownSidebarOnClick();

16
site/templates/exhibitions.twig
View file

@ -9,10 +9,10 @@
<ul class="sidebar__nav-menu">
{% for exhibition in exhibitions %}
<li class="sidebar__nav-item">
{% if exhibition.external_link == false %}
<a href="{{ exhibition.url }}" target="iframe">{{ exhibition.title }}</a>
{% elseif exhibition.external_link == true %}
<a href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
{% if exhibition.external_link == 'false' %}
<a class="sidebar__nav-link sidebar__nav-link--internal" href="{{ exhibition.url }}" target="exhibition_iframe">{{ exhibition.title }}</a>
{% else %}
<a class="sidebar__nav-link sidebar__nav-link--external" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
{% endif %}
</li>
{% endfor %}
@ -20,12 +20,12 @@
{% endif %}
</nav>
<div class="sidebar__social">
<a class="sidebar__gallery-button" href="#" target="_self" aria-label="Show {{ site.title }}'s image gallery">
<a class="sidebar__social-link" href="#" target="_self" aria-label="Show {{ site.title }}'s image gallery">
<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
<path d="M17.25 29.15H36.8l-6.35-8.55-5.15 6.75L21.9 23ZM10 38V4h34v34Zm3-3h28V7H13Zm-9 9V10h3v31h31v3Zm9-9V7v28Z"/>
</svg>
</a>
<a class="sidebar__email-button" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
<a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
<path d="M4 40V8h40v32Zm20-15.1L7 13.75V37h34V13.75Zm0-3L40.8 11H7.25ZM7 13.75V11v2.75Z"/>
</svg>
@ -39,8 +39,8 @@
{% block main %}
<main>
<section class="home-section">
<iframe class="home-section__iframe" src="{{ page.featured_exhibition }}" name="iframe"></iframe>
<section class="exhibition-section">
<iframe class="exhibition-section__iframe" name="exhibition_iframe" src=""></iframe>
</section>
</main>