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

65
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();