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

10
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

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

@ -50,7 +50,7 @@ em {
font-style: italic;
}
@media screen and (min-width: $tablet-media-query) {
@media screen and (min-width: $desktop-media-query) {
.body--white-background {
background-color: var(--white);
@ -81,7 +81,14 @@ a {
body {
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 {
width: 100%;
padding: var(--logo-padding);
display: flex;
justify-content: center;
&--fixed-center {
z-index: 2;
width: auto;
padding: 0;
position: fixed;
top: 1rem;
right: 1rem;
right: calc(50vw - (var(--logo-width) / 2));
display: block;
}
.logo__link {
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 {
&--fixed-right {
z-index: 2;
width: auto;
padding: 0;
position: fixed;
top: 1rem;
right: 1.5rem;
display: block;
}
}
}
// Sidebar
.sidebar {
z-index: 1;
overflow-y: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
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;
flex-direction: column;
justify-content: space-between;
@ -171,7 +191,9 @@ body {
}
.sidebar__social {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
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 {
&--fixed {
z-index: 1;
overflow-y: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
}
&--slimmed {
width: 15%;
min-width: 15rem;
@ -235,6 +266,11 @@ body {
background-color: var(--transparent-white);
}
}
.sidebar__social {
width: auto;
justify-content: flex-start;
}
}
}
@ -259,7 +295,7 @@ body {
display: none;
}
@media screen and (min-width: $tablet-media-query) {
@media screen and (min-width: $desktop-media-query) {
.exhibition-section {
display: block;

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

@ -27,11 +27,9 @@
--logo-width: 6rem;
--logo-height: 3rem;
--logo-padding: 1rem;
--icon-size: 2.25rem;
--sidebar-padding-top: calc(1rem + var(--logo-height) + 1rem);
--sidebar-padding-right: 1rem;
--sidebar-padding-bottom: 1rem;
--sidebar-padding-left: 1rem;
--sidebar-padding: 1rem;
// Colors
@ -47,16 +45,3 @@
$tablet-media-query: 48rem;
$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;
}
}

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

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

4
site/templates/exhibitions.twig
View file

@ -4,7 +4,7 @@
<header>
<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">
<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"/>
@ -14,7 +14,7 @@
</a>
</div>
<div class="sidebar">
<div class="sidebar sidebar--fixed">
<nav class="sidebar__nav" aria-label="Menu">
{% if exhibitions is not empty %}
<ul class="sidebar__nav-menu">

2
site/templates/gallery.twig
View file

@ -3,7 +3,7 @@
{% block 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">
<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)">