From 75bbf6c72825a44e0d39dba9e276af46e782e868 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Tue, 27 Jul 2021 16:48:17 +0100 Subject: [PATCH] [TWIG][CSS] Final fix for panels, resizing works as intended, content is wrapped when no space is available. Simpler rules throughout. Signed-off-by: Eliseu Amaro --- public/assets/css/base.css | 83 ++++++++++++----------- public/assets/css/left/left.css | 6 +- public/assets/css/right/right.css | 21 +++--- templates/sidepanel/right/right.html.twig | 74 ++++++++++---------- 4 files changed, 98 insertions(+), 86 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 89497d17e4..418ee23c08 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -188,20 +188,21 @@ html { /* CONTAINS ALL ELEMENTS BESIDES HEADER */ .container { display: flex; - justify-content: space-between; + flex-wrap: wrap; + justify-content: space-around; margin-top: calc(3 * var(--small-size) + var(--main-size)); } /* THE FOCUSED (middle) DIV */ .content { margin: var(--main-size); - box-sizing: border-box; display: flex; flex-direction: column; flex: 1; - max-width: calc(3 * (100vw / 5)); + width: 100%; + max-width: calc(3 * (100% / 5)); } /* NOTES */ @@ -258,10 +259,18 @@ html { } .note-attachments > div figure { + display: flex; + flex-direction: column; margin: 0; padding: var(--small-size); } +.note-attachments > div figure img, +.note-attachments > div figure video { + width: 100%; + height: auto; +} + figcaption a:link { font-size: var(--small-size); color: var(--white); @@ -269,14 +278,15 @@ figcaption a:link { /* SIDE PANELS */ .panel { + width: 100%; + max-width: calc(100% / 5); margin: var(--unit-size); font-size: var(--main-size); - max-width: calc((100vw / 5)); } .panel aside { - display: flex; - flex-direction: column; + position: sticky; + display: contents; } .icon-left, @@ -284,46 +294,41 @@ figcaption a:link { display: none; } -@media (min-width: 1200px) { - .panel { - width: 100%; - } -} - @media (max-width: 1200px) { .icon-left, .icon-right { - display: flex !important; - } - - .panel { - max-width: 100vw !important; - } - - .panel div ~ { - all: unset; - display: none; - } - - .panel aside { - display: none !important; - } - - .panel[open] { - display: block !important; - width: 100% !important; /* Full width */ - height: 100% !important; /* Full height */ - overflow: auto !important; /* Enable scroll if needed */ - } - - .panel[open] aside { - display: block !important; - animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1); + display: flex; } .content { - max-width: 100vw; + order: 1; + max-width: 100% !important; } + + .panel { + all: unset; + width: 0; + } + + .panel aside { + display: none; + } + + .panel[open] { + width: 100%; + font-size: var(--main-size); + margin: var(--unit-size); + } + + .panel[open] { + width: 100%; + } + + .panel[open] aside { + display: contents; + } + + } /* ANIMATIONS */ diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 4f59fc0c63..94b57f024f 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -1,3 +1,8 @@ +#left-container { + top: inherit; + left: 0; +} + .icon-left { position: fixed; top: 0; @@ -14,7 +19,6 @@ /* PROFILE */ .profile-nav { - width: inherit; font-family: var(--display-font); } diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index c8ff8ea609..7cf7172b7f 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -1,3 +1,8 @@ +#right-container { + top: inherit; + right: 0; +} + .icon-right { position: fixed; top: 0; @@ -13,19 +18,22 @@ } .create-notice { + display: flex; + flex-direction: column; + width: 100%; + background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), 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==); background-blend-mode: multiply; border-radius: var(--unit-size); } -.create-notice form fielset { - display: flex; - flex-direction: column; +.create-notice textarea { + width: 100%; } .section-title { - width: 100%; + flex: 1; border-radius: var(--unit-size); padding: var(--unit-size); @@ -35,9 +43,6 @@ font-family: var(--display-font); } .section-content { - display: flex; - flex-wrap: wrap; - flex-direction: column; margin: var(--unit-size); } .section-content hr { @@ -98,7 +103,7 @@ border-radius: var(--unit-size); background-color: var(--translucent); - width: 100%; + max-width: 100%; margin-top: var(--unit-size); padding: var(--unit-size); resize: vertical; diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig index d95e541c02..5c0001b148 100644 --- a/templates/sidepanel/right/right.html.twig +++ b/templates/sidepanel/right/right.html.twig @@ -4,49 +4,47 @@
{{ form_start(post_form) }} -
- Create a note + Create a note -
- -
- {{ form_label(post_form.to) }} +
+ +
+ {{ form_label(post_form.to) }} +
+
+ {{ form_widget(post_form.to) }} +
+ + +
+ + +
+ {{ form_row(post_form.visibility) }} +
+ + +
+ + +
+
+ {{ form_row(post_form.content) }}
-
- {{ form_widget(post_form.to) }} -
- +
-
- - -
- {{ form_row(post_form.visibility) }} -
- - -
- - -
-
- {{ form_row(post_form.content) }} -
+
+
+
-
-
- -
- -
- {{ form_row(post_form.post) }} -
- -
-
+
+ {{ form_row(post_form.post) }} + + + {{ form_end(post_form) }}