From e73af2b8875571e6cf5bb9891444f8a23ae5db60 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Sat, 28 Aug 2021 21:23:25 +0100 Subject: [PATCH] [TWIG][CSS] Left and Right panels now using a checkbox trick to control their visibility. Details element couldn't be properly controlled by CSS without breaking accessibility. --- public/assets/css/base.css | 120 +++++++++---------- public/assets/css/left/left.css | 12 +- public/assets/css/right/right.css | 8 +- templates/base.html.twig | 12 +- templates/sidepanel/left/left.html.twig | 140 +++++++++++----------- templates/sidepanel/right/right.html.twig | 87 +++++++------- 6 files changed, 192 insertions(+), 187 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 449e091e4a..0e548a57ca 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -80,16 +80,6 @@ transition: var(--cubic-transition); } -.panel aside { - font-size: var(--medium-size); - position: absolute; - top: 100%; - - width: 20%; - animation: var(--fade-in); - padding: var(--unit-size); -} - .icon { fill: var(--white); width: 1em; @@ -109,6 +99,9 @@ display: flex; flex-wrap: wrap; justify-content: space-around; + + margin-left: 20%; + margin-right: 20%; padding: var(--unit-size); } @@ -116,11 +109,8 @@ .content { display: flex; flex-direction: column; - margin-left: 20%; - margin-right: 20%; width: 100%; - max-width: 60%; } .markdown-blocks { @@ -258,54 +248,6 @@ height: auto; } -/* MEDIA RESIZE */ -@media (min-width: 1200px) { - /* no need to make the panels disappear at this size */ - /*.icon-left, - .icon-right { - visibility: hidden; - }*/ - -} -@media (max-width: 1200px) { - /* content should occupy the entire width at this size */ - .content { - margin: unset; - max-width: 100%; - } - - /* by default they are hidden */ - .panel aside { - display: none; - } - - .panel:not(:focus-within or :not[open]) aside { - display: none; - } - .panel[open]:focus-within aside, - .panel[open] { - display: flex; - flex-direction: column; - } - .panel[open] aside { - padding: var(--unit-size); - box-sizing: border-box; - width: 100%; - height: 100vh; - - background-color: var(--bg3); - background-image: url(../images/bg.png); - background-position: center; - background-repeat: no-repeat; - background-size: 100% 100%; - min-height: 100%; - } - - .panel[open] aside .footer { - max-width: 100%; - } -} - /* SECTIONS */ .section-widget { display: flex; @@ -494,6 +436,62 @@ input[type=file]:hover { color: var(--white) !important; } +/* MEDIA QUERIES */ + +/* sidepanels need to be shown by default on desktop, hidden on mobile */ +.panel .panel-content { + display: flex; + flex-direction: column; + + /* should remain in place for the user */ + position: fixed; + top: 0; + + /* should be bellow header */ + margin-top: 3rem; + + /* should occupy the entire vertical real estate */ + height: 100%; + + + padding: var(--unit-size); +} + +@media (min-width: 1200px) { + .panel label { + display: none; + } + .panel .panel-content { + width: 100%; + max-width: 20%; + } +} +@media (max-width: 1200px) { + /* content should occupy the entire width at this size */ + .container { + margin: unset; + } + .content { + max-width: 100%; + } + + #panel-left-toggle:not(:checked) ~ .panel-content, + #panel-right-toggle:not(:checked) ~ .panel-content { + display: none; + } + + #panel-left-toggle:checked ~ .panel-content, + #panel-right-toggle:checked ~ .panel-content { + display: flex; + + width: 100%; + background-color: var(--bg2); + background-image: url(../images/bg.png); + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; + } +} /* ANIMATIONS */ @keyframes fadeIn { diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 12d3f75f38..473dd0e1e6 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -1,7 +1,13 @@ -#left-panel { +.panel-left .panel-content { left: 0; } +#panel-left-toggle:not(:checked), +#panel-left-toggle:checked { + position: absolute; + opacity: 0; +} + /* PROFILE */ .profile-nav { font-family: var(--display-font); @@ -99,6 +105,6 @@ padding-left: var(--unit-size); } -.footer * { - font-size: var(--small-size); +.footer { + } diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index c603d5e6e0..ee13eecbdb 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -1,7 +1,9 @@ -#right-panel { +.panel-right .panel-content { right: 0; } -#right-container .section-form { - font-size: var(--small-size) !important; +#panel-right-toggle:not(:checked), +#panel-right-toggle:checked { + position: absolute; + opacity: 0; } \ No newline at end of file diff --git a/templates/base.html.twig b/templates/base.html.twig index 87a5443f67..8bbd35cf55 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -31,12 +31,7 @@ {% block header %} {% endblock header %} diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig index 8e5408951a..95096766ef 100644 --- a/templates/sidepanel/left/left.html.twig +++ b/templates/sidepanel/left/left.html.twig @@ -1,14 +1,17 @@ - + + \ No newline at end of file diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig index 7217dbcae8..c74891e4b2 100644 --- a/templates/sidepanel/right/right.html.twig +++ b/templates/sidepanel/right/right.html.twig @@ -1,52 +1,57 @@ - +