From d16614982a1cce3916e176bd2128d59d907cd935 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Wed, 28 Jul 2021 15:37:54 +0100 Subject: [PATCH] [TWIG][CSS] Panels are fixed and base content acts accordingly on all sizes. Signed-off-by: Eliseu Amaro --- public/assets/css/base.css | 91 ++++++++++++++++++------------- public/assets/css/left/left.css | 14 ++--- public/assets/css/right/right.css | 14 ++--- templates/base.html.twig | 39 ++++++------- 4 files changed, 78 insertions(+), 80 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 418ee23c08..eab435636b 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -110,8 +110,8 @@ a:hover { transition: all 0.4s ease; } -#instance a:focus svg, -#instance a:hover svg { +#instance:focus svg, +#instance:hover svg { fill: var(--bg1); transition: all 0.4s ease; } @@ -119,6 +119,7 @@ a:hover { summary:hover > svg, summary:focus > svg { border-radius: var(--unit-size); + padding: var(--small-size) !important; background: var(--white); fill: var(--bg1); transition: all 0.4s ease; @@ -134,10 +135,6 @@ hr { /* DEFAULTS */ body, html { - display: flex; - flex-direction: column; - height: 100%; - width: auto; color: var(--white); font-family: var(--main-font); @@ -150,14 +147,18 @@ html { } #header { + font-size: var(--main-size); display: flex; - justify-content: center; + justify-content: space-between; position: fixed; + top: 0; - width: 100%; - height: calc(5 * var(--unit-size)); - padding: var(--small-size); - box-sizing: content-box; + padding: var(--unit-size); + box-sizing: border-box; + width: 100vw; + max-width: 100%; + + align-items: center; background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--accent-blue)), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); @@ -169,15 +170,6 @@ html { #instance { display: flex; align-items: center; - justify-content: center; - height: 100%; - width: 100%; -} - -#instance a { - display: flex; - color: var(--white); - font-size: var(--main-size); } .icon-logo { @@ -195,11 +187,11 @@ html { /* THE FOCUSED (middle) DIV */ .content { - margin: var(--main-size); - display: flex; flex-direction: column; - flex: 1; + margin-left: calc(100% / 5); + margin-right: calc(100% / 5); + padding: var(--small-size); width: 100%; max-width: calc(3 * (100% / 5)); @@ -278,15 +270,11 @@ figcaption a:link { /* SIDE PANELS */ .panel { - width: 100%; - max-width: calc(100% / 5); - margin: var(--unit-size); font-size: var(--main-size); } .panel aside { - position: sticky; - display: contents; + animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1); } .icon-left, @@ -294,22 +282,35 @@ figcaption a:link { display: none; } + +/* MEDIA RESIZE */ +@media (min-width: 1200px) { + .panel aside { + padding: var(--unit-size); + box-sizing: border-box; + width: calc(100% / 5); + height: border-box; + + display: flex !important; + flex-direction: column !important; + position: absolute !important; + top: 100% !important; + } +} + @media (max-width: 1200px) { + .icon-left, .icon-right { display: flex; + padding: var(--unit-size); } .content { - order: 1; + margin: unset; max-width: 100% !important; } - .panel { - all: unset; - width: 0; - } - .panel aside { display: none; } @@ -317,18 +318,30 @@ figcaption a:link { .panel[open] { width: 100%; font-size: var(--main-size); - margin: var(--unit-size); } .panel[open] { - width: 100%; + all: unset; + display: block; } .panel[open] aside { - display: contents; + padding: var(--unit-size); + box-sizing: border-box; + width: 100%; + height: border-box; + + display: flex !important; + flex-direction: column !important; + position: absolute !important; + top: 100% !important; + left: 0 !important; + + background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg2)), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); + background-blend-mode: multiply; + background-attachment: fixed; } - - } /* ANIMATIONS */ diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 94b57f024f..f7b96d5e89 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -1,14 +1,4 @@ -#left-container { - top: inherit; - left: 0; -} - .icon-left { - position: fixed; - top: 0; - left: 0; - padding: calc(3 * var(--unit-size)); - width: var(--main-size); height: auto; @@ -17,6 +7,10 @@ vertical-align: middle; } +#left-panel { + left: 0; +} + /* PROFILE */ .profile-nav { font-family: var(--display-font); diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 7cf7172b7f..4280328825 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -1,14 +1,4 @@ -#right-container { - top: inherit; - right: 0; -} - .icon-right { - position: fixed; - top: 0; - right: 0; - padding: calc(3 * var(--unit-size)); - width: var(--main-size); height: auto; @@ -17,6 +7,10 @@ vertical-align: middle; } +#right-panel { + right: 0; +} + .create-notice { display: flex; flex-direction: column; diff --git a/templates/base.html.twig b/templates/base.html.twig index 8a1b9790b6..04bdc6fa71 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -30,34 +30,31 @@ {% block header %} {% endblock header %}
-
- - {{ icon('person', 'icon icon-left') | raw }} - {{ block("leftpanel", "stdgrid.html.twig") }} - - -
- {% block nav %}{% endblock %} {% block body %}{% endblock %} {% block javascripts %}{% endblock javascripts %} - -
- - {{ icon('notes', 'icon icon-right') | raw }} - {{ block("rightpanel", "stdgrid.html.twig") }} - -