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

Edit mobile version design

Browse source
This commit is contained in:
Paul Nicoué 2022-08-08 12:40:16 +02:00
parent 5d13ba3336
commit 503b339974
7 changed files with 133 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -50,7 +50,7 @@ em {
font-style: italic; font-style: italic;
} }
@media screen and (min-width: $tablet-media-query) { @media screen and (min-width: $desktop-media-query) {
.body--white-background { .body--white-background {
background-color: var(--white); background-color: var(--white);
@ -81,7 +81,14 @@ a {
body { body {
min-height: 100vh; min-height: 100vh;
overflow: hidden; overflow-x: hidden;
}
@media screen and (min-width: $desktop-media-query) {
body {
overflow-y: hidden;
}
} }
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@ -91,10 +98,20 @@ body {
// Logo // Logo
.logo { .logo {
z-index: 2; width: 100%;
position: fixed; padding: var(--logo-padding);
top: 1rem; display: flex;
right: 1rem; justify-content: center;
&--fixed-center {
z-index: 2;
width: auto;
padding: 0;
position: fixed;
top: 1rem;
right: calc(50vw - (var(--logo-width) / 2));
display: block;
}
.logo__link { .logo__link {
width: var(--logo-width); width: var(--logo-width);
@ -124,24 +141,27 @@ body {
} }
} }
@media screen and (min-width: $tablet-media-query) { @media screen and (min-width: $desktop-media-query) {
.logo { .logo {
right: 1.5rem;
&--fixed-right {
z-index: 2;
width: auto;
padding: 0;
position: fixed;
top: 1rem;
right: 1.5rem;
display: block;
}
} }
} }
// Sidebar // Sidebar
.sidebar { .sidebar {
z-index: 1;
overflow-y: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%; width: 100%;
padding: var(--sidebar-padding-top) var(--sidebar-padding-left) var(--sidebar-padding-bottom) var(--sidebar-padding-right); padding: var(--sidebar-padding);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -171,7 +191,9 @@ body {
} }
.sidebar__social { .sidebar__social {
width: 100%;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
} }
@ -197,10 +219,19 @@ body {
} }
} }
@media screen and (min-width: $tablet-media-query) { @media screen and (min-width: $desktop-media-query) {
.sidebar { .sidebar {
&--fixed {
z-index: 1;
overflow-y: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
}
&--slimmed { &--slimmed {
width: 15%; width: 15%;
min-width: 15rem; min-width: 15rem;
@ -235,6 +266,11 @@ body {
background-color: var(--transparent-white); background-color: var(--transparent-white);
} }
} }
.sidebar__social {
width: auto;
justify-content: flex-start;
}
} }
} }
@ -259,7 +295,7 @@ body {
display: none; display: none;
} }
@media screen and (min-width: $tablet-media-query) { @media screen and (min-width: $desktop-media-query) {
.exhibition-section { .exhibition-section {
display: block; display: block;

19
public/assets/css/partials/variables.scss
View file

@ -27,11 +27,9 @@
--logo-width: 6rem; --logo-width: 6rem;
--logo-height: 3rem; --logo-height: 3rem;
--logo-padding: 1rem;
--icon-size: 2.25rem; --icon-size: 2.25rem;
--sidebar-padding-top: calc(1rem + var(--logo-height) + 1rem); --sidebar-padding: 1rem;
--sidebar-padding-right: 1rem;
--sidebar-padding-bottom: 1rem;
--sidebar-padding-left: 1rem;
// Colors // Colors
@ -47,16 +45,3 @@
$tablet-media-query: 48rem; $tablet-media-query: 48rem;
$desktop-media-query: 62rem; $desktop-media-query: 62rem;
@media screen and (min-width: $tablet-media-query) {
:root {
// Dimensions
--sidebar-padding-top: 1rem;
--sidebar-padding-right: 1rem;
--sidebar-padding-bottom: 1rem;
--sidebar-padding-left: 1rem;
}
}

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

@ -178,15 +178,17 @@ function loadExhibitionIframe() {
if (sidebarNavLinks.length > 0 && exhibitionIframe) { if (sidebarNavLinks.length > 0 && exhibitionIframe) {
for (let i = 0; i < sidebarNavLinks.length; i++) { for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].addEventListener('click', function(e) { sidebarNavLinks[i].addEventListener('click', function(e) {
logo.removeEventListener('animationiteration', disableLogoRotation); if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
enableLogoRotation(); logo.removeEventListener('animationiteration', disableLogoRotation);
disableExhibitionIframeVisibility(); enableLogoRotation();
exhibitionIframe.addEventListener('load', function(e) { disableExhibitionIframeVisibility();
logo.addEventListener('animationiteration', disableLogoRotation); exhibitionIframe.addEventListener('load', function(e) {
slimDownSidebar(); logo.addEventListener('animationiteration', disableLogoRotation);
enableExhibitionIframeVisibility(); slimDownSidebar();
editBackgroundColor(sidebarNavLinks[i]); enableExhibitionIframeVisibility();
}); editBackgroundColor(sidebarNavLinks[i]);
});
}
}); });
} }
} }
@ -211,10 +213,10 @@ function setNavLinksBlankTarget() {
} }
function editNavLinksTarget() { function editNavLinksTarget() {
if (window.innerWidth < convertRemToPixels(mediaQueries.remDesktopWidth)) { if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
setNavLinksBlankTarget();
} else {
setNavLinksIframeTarget(); setNavLinksIframeTarget();
} else {
setNavLinksBlankTarget();
} }
} }

4
site/templates/exhibitions.twig
View file

@ -4,7 +4,7 @@
<header> <header>
<div class="logo"> <div class="logo">
<a class="logo__link" href="{{ homePage.url }}" target="_self" aria-label="Go to {{ site.title }}'s gallery page"> <a class="logo__link logo--fixed-right" href="{{ homePage.url }}" target="_self" aria-label="Go to {{ site.title }}'s gallery page">
<svg class="logo__icon" aria-hidden="true" viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg"> <svg class="logo__icon" aria-hidden="true" viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)"> <g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)">
<path style="fill:none;stroke:currentColor;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/> <path style="fill:none;stroke:currentColor;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
@ -14,7 +14,7 @@
</a> </a>
</div> </div>
<div class="sidebar"> <div class="sidebar sidebar--fixed">
<nav class="sidebar__nav" aria-label="Menu"> <nav class="sidebar__nav" aria-label="Menu">
{% if exhibitions is not empty %} {% if exhibitions is not empty %}
<ul class="sidebar__nav-menu"> <ul class="sidebar__nav-menu">

2
site/templates/gallery.twig
View file

@ -3,7 +3,7 @@
{% block header %} {% block header %}
<header> <header>
<div class="logo"> <div class="logo logo--fixed-center logo--fixed-right">
<a class="logo__link" href="{{ exhibitionsPage.url }}" target="_self" aria-label="Go to {{ site.title }}'s exhibitions page"> <a class="logo__link" href="{{ exhibitionsPage.url }}" target="_self" aria-label="Go to {{ site.title }}'s exhibitions page">
<svg class="logo__icon" aria-hidden="true" viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg"> <svg class="logo__icon" aria-hidden="true" viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)"> <g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)">