From ce06c1dfd267e9ac2b7b244c237f3875b812886b Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Tue, 27 Jul 2021 13:51:49 +0100 Subject: [PATCH] [TWIG][CSS] Panels weren't "flexing" properly, in smaller sizes the right panel form would break. Signed-off-by: Eliseu Amaro --- public/assets/css/base.css | 99 +++++++++++------------ public/assets/css/left/left.css | 35 ++++---- public/assets/css/reset.css | 8 +- public/assets/css/right/right.css | 33 ++++---- templates/sidepanel/right/right.html.twig | 1 + 5 files changed, 84 insertions(+), 92 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 083d746842..89497d17e4 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -87,10 +87,6 @@ li { padding: 0; } -summary { - cursor: default !important; -} - a:link { text-decoration: none; color: var(--white); @@ -191,20 +187,21 @@ html { /* CONTAINS ALL ELEMENTS BESIDES HEADER */ .container { - order: 2; display: flex; - justify-content: space-evenly; - width: 100%; + justify-content: space-between; margin-top: calc(3 * var(--small-size) + var(--main-size)); } /* THE FOCUSED (middle) DIV */ .content { + margin: var(--main-size); box-sizing: border-box; - padding: calc(2 * var(--main-size)); + display: flex; flex-direction: column; - width: calc(3 * (100% / 5)); + flex: 1; + + max-width: calc(3 * (100vw / 5)); } /* NOTES */ @@ -270,65 +267,63 @@ figcaption a:link { color: var(--white); } -/* MEDIA QUERIES */ +/* SIDE PANELS */ +.panel { + margin: var(--unit-size); + font-size: var(--main-size); + max-width: calc((100vw / 5)); +} + +.panel aside { + display: flex; + flex-direction: column; +} + +.icon-left, +.icon-right { + display: none; +} + @media (min-width: 1200px) { - .icon-left, - .icon-right { - display: none; - } - - summary { - cursor: none; - } - - .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 { + width: 100%; } } @media (max-width: 1200px) { - .content { - padding: var(--main-size); - display: flex; - flex-direction: column; - width: 100%; - } - .icon-left, .icon-right { - display: flow; + 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 { - 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))); + display: block !important; animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1); } + + .content { + max-width: 100vw; + } } /* ANIMATIONS */ diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 0db639d077..4f59fc0c63 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -12,27 +12,15 @@ vertical-align: middle; } -.icon-avatar { - width: var(--main-size); - height: auto; -} - -#left-panel { - top: inherit; - left: 0; -} - /* PROFILE */ .profile-nav { - display: flex; - flex-direction: column; + width: inherit; font-family: var(--display-font); } .profile-nav nav { + display: inline-grid; margin-bottom: var(--main-size); - display: flex; - flex-direction: column; } .profile { @@ -48,8 +36,6 @@ } #profile-links { - width: 100%; - height: auto; display: flex; align-items: center; box-sizing: border-box; @@ -58,14 +44,21 @@ #user-avatar { box-sizing: border-box; - max-width: 50%; - margin-right: var(--unit-size); + border-radius: 50%; } #user-avatar img { border-radius: 50%; - width: calc(3 * var(--main-size)); + max-width: calc(3 * var(--main-size)); height: auto; + + margin-right: var(--unit-size); +} + +#user-avatar:hover, +#user-avatar:focus { + all: unset !important; + cursor: pointer; } #user-avatar:hover img, @@ -87,13 +80,13 @@ .footer { font-size: var(--small-size); margin-top: auto; + padding: var(--unit-size); } /* TIMELINE NAVIGATION / PLUGINS */ -.timeline-nav, +.timeline-nav a, .timeline-nav h1 { display: flex; - flex-direction: column; } .timeline-nav a { diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 7f9b159b24..43e90d9cca 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -46,6 +46,10 @@ address { border: 0; } +form { + all: unset; +} + /* details element arrow */ details > summary { list-style: none; @@ -61,8 +65,4 @@ details > summary::-webkit-details-marker { details summary { cursor: pointer; } - - details summary > * { - display: inline; - } } \ No newline at end of file diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 6e79ada04f..c8ff8ea609 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -12,12 +12,6 @@ vertical-align: middle; } -#right-panel { - font-size: var(--main-size); - top: inherit; - right: 0; -} - .create-notice { 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==); @@ -25,8 +19,12 @@ border-radius: var(--unit-size); } -.section-title { +.create-notice form fielset { display: flex; + flex-direction: column; +} + +.section-title { width: 100%; border-radius: var(--unit-size); @@ -35,16 +33,16 @@ background-color: var(--translucent); font-family: var(--display-font); - font-size: var(--main-size); } - .section-content { + display: flex; + flex-wrap: wrap; + flex-direction: column; margin: var(--unit-size); } - .section-content hr { all: unset; - display: block; + display: inline; height: 2px; background-image: linear-gradient(to left, var(--translucent-light), transparent 90%); margin-bottom: var(--unit-size); @@ -62,18 +60,18 @@ #post_visibility { display: flex; + flex-wrap: wrap; justify-content: flex-start; font-size: var(--medium-size); - padding: var(--unit-size); - box-sizing: border-box; + margin: var(--unit-size); } #post_visibility input[type="radio"] { - margin-right: 5px; + margin-right: 0.1em; } #post_visibility label { - margin-right: var(--main-size); + margin-right: var(--small-size); } #tabs { @@ -118,6 +116,10 @@ cursor: pointer; } +#post_attachments { + margin-bottom: var(--unit-size); +} + #post_post { font-family: var(--display-font); font-size: var(--medium-size); @@ -129,6 +131,7 @@ background-color: var(--translucent); color: var(--white); transition: 0.4s; + } .attachments { diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig index b295439d71..d95e541c02 100644 --- a/templates/sidepanel/right/right.html.twig +++ b/templates/sidepanel/right/right.html.twig @@ -41,6 +41,7 @@ +
{{ form_row(post_form.post) }}