From 2bae14198b4d0ade09d3e1ac3391ea1757a67a99 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Sat, 24 Jul 2021 17:38:57 +0100 Subject: [PATCH] [CSS][TWIG] Details element is now shown by default on larger screens, and hidden on smaller screens. Signed-off-by: Eliseu Amaro --- public/assets/css/base.css | 74 ++++++++++++++++------- public/assets/css/left/left.css | 23 +------ public/assets/css/right/right.css | 14 +---- templates/base.html.twig | 5 +- templates/sidepanel/left/left.html.twig | 4 +- templates/sidepanel/right/right.html.twig | 4 +- 6 files changed, 64 insertions(+), 60 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 5478554449..edda392e71 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -114,8 +114,8 @@ a:hover { transition: all 0.4s ease; } -summary:hover > *, -summary:focus > * { +summary:hover > svg, +summary:focus > svg { border-radius: var(--unit-size); background: var(--white); fill: var(--bg1); @@ -123,8 +123,8 @@ summary:focus > * { } hr { - all: unset; display: block; + border: none; height: 2px; background-image: linear-gradient(to right, var(--bg1), transparent 90%); } @@ -196,6 +196,7 @@ html { .content { margin: var(--main-size); margin-left: calc(2 * var(--main-size)); + margin-right: calc(2 * var(--main-size)); display: flex; flex-direction: column; width: calc(3 * (100% / 5)); @@ -253,30 +254,69 @@ html { border-radius: var(--unit-size); background-color: #00000033; } + .note-attachments > div figure { margin: 0; padding: var(--small-size); } + figcaption a:link { font-size: var(--small-size); color: var(--white); } -/* EVERY SIDE PANEL DETAIL ELEMENT */ -.panel { - all: unset; - width: calc(1 * (100%/5)); +/* MEDIA QUERIES */ +@media (min-width: 1200px) { + .panel aside { + position: fixed; + display: flex !important; + flex-direction: column; + padding: var(--small-size); + box-sizing: border-box; + + font-size: var(--main-size); + width: calc(100vw / 5); + height: calc(100vh - (3 * var(--small-size) + var(--main-size))); + animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1); + } + + .panel[open] aside { + display: none !important; + } } -.panel[open] { - height: 100%; +@media (max-width: 1200px) { + .content { + margin: var(--main-size); + display: flex; + flex-direction: column; + width: 100%; + } + + .panel aside { + display: none !important; + } + + .panel[open] aside { + 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; + + position: fixed; + display: flex !important; + flex-direction: column; + padding: var(--small-size); + box-sizing: border-box; + + font-size: var(--main-size); + width: 100%; + height: calc(100vh - (3 * var(--small-size) + var(--main-size))); + animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1); + } } /* ANIMATIONS */ -details[open] > div { - animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1); -} - @keyframes fadeIn { 0% { opacity: 0; @@ -287,12 +327,4 @@ details[open] > div { opacity: unset; transform: none; } -} - -/* MEDIA QUERIES */ -@media (min-width: 900px) { - -} -@media (max-width: 900px) { - } \ No newline at end of file diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index d4899c46de..36a651140e 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -17,28 +17,9 @@ height: auto; } -#left-container[open] { - height: calc(100vh - (3 * var(--small-size) + var(--main-size))); - width: calc(100vw / 5); -} - -#left-container[open] > div { - opacity: 100%; -} - -#left-container[open] a { - tab-index: 0; -} - #left-panel { - position: fixed; - display: flex; - flex-direction: column; - font-size: var(--main-size); - width: inherit; - height: inherit; - padding: var(--small-size); - box-sizing: border-box; + top: inherit; + left: 0; } /* PROFILE */ diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 7bb6d352bd..441a5349ac 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -12,20 +12,10 @@ vertical-align: middle; } -#right-container[open] > div { - opacity: 100%; -} - -#right-container[open] { - width: calc(100vw / 5); -} - #right-panel { font-size: var(--main-size); - width: inherit; - height: inherit; - padding: var(--small-size); - box-sizing: border-box; + top: inherit; + right: 0; } .create-notice { diff --git a/templates/base.html.twig b/templates/base.html.twig index 7283f80922..8a1b9790b6 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -43,8 +43,9 @@
{{ icon('person', 'icon icon-left') | raw }} + {{ block("leftpanel", "stdgrid.html.twig") }} - {{ block("leftpanel", "stdgrid.html.twig") }} +
{% block nav %}{% endblock %} @@ -54,8 +55,8 @@
{{ icon('notes', 'icon icon-right') | raw }} + {{ block("rightpanel", "stdgrid.html.twig") }} - {{ block("rightpanel", "stdgrid.html.twig") }}
diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig index a3a43f932c..4987620db2 100644 --- a/templates/sidepanel/left/left.html.twig +++ b/templates/sidepanel/left/left.html.twig @@ -1,4 +1,4 @@ -
+
+ diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig index 2fdd0a7931..bbf7708557 100644 --- a/templates/sidepanel/right/right.html.twig +++ b/templates/sidepanel/right/right.html.twig @@ -1,4 +1,4 @@ -
+
+