[TWIG][CSS] Panels weren't "flexing" properly, in smaller sizes the right panel form would break.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

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;
+    justify-content: space-between;
-    width: 100%;
     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 */
-@media (min-width: 1200px) {
+.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;
 }
 
-    summary {
+@media (min-width: 1200px) {
-        cursor: none;
+    .panel {
-    }
+        width: 100%;
-
-    .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);
     }
 }
 
 @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)),
+        display: block !important;
-        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);
     }
+
+    .content {
+        max-width: 100vw;
+    }
 }
 
 /* ANIMATIONS */

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;
+    width: inherit;
-    flex-direction: column;
     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%;
+    border-radius: 50%;
-    margin-right: var(--unit-size);
 }
 
 #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 {

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;
-    }
 }

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);
+    margin: var(--unit-size);
-    box-sizing: border-box;
 }
 
 #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 {

templates/sidepanel/right/right.html.twig

@@ -41,6 +41,7 @@
                                     </label>
                                 </div>
 
+                                <br>
                                 {{ form_row(post_form.post) }}
                             </div>
                         </span>