[TWIG][CSS] Panels functionality works as intended, size needs to be worked upon.

public/assets/css/base.css

@@ -111,12 +111,11 @@ html {
       color: var(--white);
 
       /* BLENDING BANDING IN FIREFOX */
-      /* basically emulating screen blending with just "images" */
+      background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg2)),
-      background-color: var(--bg1);
+      url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
-      background-image: radial-gradient(ellipse at bottom, var(--bg1), transparent),
-      url(data:image/png;base64,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);
       background-blend-mode: multiply;
       background-attachment: fixed;
+
 }
 
 #header {
@@ -129,9 +128,10 @@ html {
       height: calc(5 * var(--unit-size));
       padding: var(--small-size);
 
-      background: repeating-linear-gradient(var(--bg2), var(--bg1)),
+      background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg3)),
-      url(data:image/png;base64,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);
+      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;
       box-shadow: var(--shadow);
 }
 
@@ -153,6 +153,24 @@ html {
       fill: var(--white);
 }
 
-.navigation {
+/* CONTAINS ALL ELEMENTS BESIDES HEADER */
-      padding-top: calc(2 * var(--small-size) + var(--main-size));
+.container {
+      padding-top: calc(3 * var(--small-size) + var(--main-size));
+      display: flex;
+      justify-content: center;
 }
+/* THE FOCUSED (middle) DIV */
+.content {
+      order: 2;
+      flex-grow: 5;
+      max-width: calc(100vw/2);
+}
+
+/* EVERY SIDE PANEL DETAIL ELEMENT */
+.panel[open] {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      padding: var(--small-size);
+      box-sizing: border-box;
+}

public/assets/css/left/left.css

@@ -10,4 +10,24 @@
     fill: var(--white);
     stroke-width: 0;
     vertical-align: middle;
+}
+.icon-avatar {
+    width: var(--main-size);
+    height: auto;
+}
+
+#left-container > div {
+    opacity: 0;
+}
+#left-container[open] > div {
+    opacity: 100%;
+}
+#left-container[open] {
+    order: 1;
+    border-right: solid 1px var(--bg2);
+}
+
+#left-panel {
+    display: flex;
+    flex-direction: column;
 }

public/assets/css/reset.css

@@ -1,19 +1,13 @@
 /* link underlines tend to make hypertext less readable,
    because underlines obscure the shapes of the lower halves of words */
-:link, :visited {
+:link,:visited { text-decoration:none }
-    text-decoration: none
-}
 
 /* no list-markers by default, since lists are used more often for semantics */
-ul, ol {
+ul,ol { list-style:none }
-    list-style: none
-}
 
 /* avoid browser default inconsistent heading font-sizes */
 /* and pre/code too */
-h1, h2, h3, h4, h5, h6, pre, code {
+h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
-    font-size: 1em;
-}
 
 /* remove the inconsistent (among browsers) default ul,ol padding or margin  */
 /* the default spacing on headings does not match nor align with 
@@ -21,48 +15,23 @@ h1, h2, h3, h4, h5, h6, pre, code {
 /* zero out the spacing around pre, form, body, html, p, blockquote as well */
 /* form elements are oddly inconsistent, and not quite CSS emulatable. */
 /*  nonetheless strip their margin and padding as well */
-ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, textarea {
+ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,textarea
-    margin: 0;
+{ margin:0; padding:0; border:none; }
-    padding: 0;
-    border: none;
-}
 
 /* whoever thought blue linked image borders were a good idea? */
-a img, :link img, :visited img {
+a img,:link img,:visited img { border:none }
-    border: none
-}
 
 /* de-italicize address */
-address {
+address { font-style:normal }
-    font-style: normal
-}
 
 /* firefox focus outline */
-:focus {
+:focus {outline:none;}
-    outline: none;
+::-moz-focus-inner {border:0;}
-}
-
-::-moz-focus-inner {
-    border: 0;
-}
 
 /* details element arrow */
 details > summary {
     list-style: none;
 }
-
 details > summary::-webkit-details-marker {
     display: none;
-}
-
-/* have IE ignore the detail elements altogether */
-@supports not (-ms-ime-align: auto) {
-
-    details summary {
-        cursor: pointer;
-    }
-
-    details summary > * {
-        display: inline;
-    }
 }

public/assets/css/right/right.css

@@ -10,4 +10,20 @@
     fill: var(--white);
     stroke-width: 0;
     vertical-align: middle;
+}
+
+#right-container > div {
+    opacity: 0;
+}
+#right-container[open] > div {
+    opacity: 100%;
+}
+#right-container[open] {
+    order: 3;
+    border-left: solid 1px var(--bg2);
+}
+
+#right-panel {
+    display: flex;
+    flex-direction: column;
 }

templates/base.html.twig

@@ -28,7 +28,6 @@
     {% endfor %}
 </head>
 <body>
-
     {% block header %}
     <div id='header'>
         <nav id='instance'>
@@ -44,12 +43,12 @@
         {% block leftpanel %}
         {% endblock leftpanel %}
 
-        {% block rightpanel %}
-        {% endblock rightpanel %}
-
         {% block nav %}{% endblock %}
         {% block body %}{% endblock %}
         {% block javascripts %}{% endblock javascripts %}
+
+        {% block rightpanel %}
+        {% endblock rightpanel %}
     </div>
 
 </body>

templates/sidepanel/left/left.html.twig

@@ -1,4 +1,4 @@
-<details>
+<details class="panel" id="left-container">
     <summary>{{ icon('menu', 'icon icon-left') | raw }}</summary>
     {% if app.user %}
         <div id='left-panel'>

templates/sidepanel/right/right.html.twig

@@ -1,60 +1,58 @@
-<details>
+<details class="panel" id="right-container">
-    <summary>{{ icon('menu', 'icon icon-right') | raw }}</summary>
+    <summary>{{ icon('drop', 'icon icon-right') | raw }}</summary>
-    <div id="right-panel">
+    <div id='right-panel'>
-        <div id='right-container'>
+        {% if post_form is defined %}
-            {% if post_form is defined %}
+            {{ form_start(post_form) }}
-                {{ form_start(post_form) }}
+            <div class="create-notice">
-                <div class="create-notice">
+                <div class="target">
-                    <div class="target">
+                    <div class="target-top">
-                        <div class="target-top">
+                        {{ form_label(post_form.to) }}
-                            {{ form_label(post_form.to) }}
+                    </div>
+                    <div class="target-bot">
+                        {{ form_widget(post_form.to) }}
+                    </div>
+                </div>
+                <div class="create-right">
+                    <div class="create-top-right">
+                        <div class="scope">
+                            {{ form_row(post_form.visibility) }}
                         </div>
-                        <div class="target-bot">
+                        <div class="tabs">
-                            {{ form_widget(post_form.to) }}
+                            {% for tab in tabs %}
+                                <a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
+                            {% endfor %}
                         </div>
                     </div>
-                    <div class="create-right">
+                    <div class="input-wrapper">
-                        <div class="create-top-right">
+                        <div class="content-input">
-                            <div class="scope">
+                            {{ form_row(post_form.content) }}
-                                {{ form_row(post_form.visibility) }}
-                            </div>
-                            <div class="tabs">
-                                {% for tab in tabs %}
-                                    <a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
-                                {% endfor %}
-                            </div>
                         </div>
-                        <div class="input-wrapper">
+                    </div>
-                            <div class="content-input">
+                    <div class="notice-options">
-                                {{ form_row(post_form.content) }}
+                        <div class="attachments">
-                            </div>
+                            {{ form_widget(post_form.attachments) }}
+                            <label for="{{ post_form.attachments.vars.id }}">
+                                {{ icon('attach', 'icon icon-attach') | raw }}
+                            </label>
                         </div>
-                        <div class="notice-options">
+                        <div class="post">
-                            <div class="attachments">
+                            {{ form_row(post_form.post) }}
-                                {{ form_widget(post_form.attachments) }}
-                                <label for="{{ post_form.attachments.vars.id }}">
-                                    {{ icon('attach', 'icon icon-attach') | raw }}
-                                </label>
-                            </div>
-                            <div class="post">
-                                {{ form_row(post_form.post) }}
-                            </div>
                         </div>
                     </div>
                 </div>
-                {{ form_end(post_form) }}
+            </div>
-            {% endif %}
+            {{ form_end(post_form) }}
+        {% endif %}
 
-            {% set current_path = app.request.get('_route') %}
+        {% set current_path = app.request.get('_route') %}
-            {% if right_panel_vars is defined %}
+        {% if right_panel_vars is defined %}
-                {% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
+            {% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
-                    {{ block | raw }}
+                {{ block | raw }}
-                {% endfor %}
+            {% endfor %}
-            {% else %}
+        {% else %}
-                {% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
+            {% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
-                    {{ block | raw }}
+                {{ block | raw }}
-                {% endfor %}
+            {% endfor %}
-            {% endif %}
+        {% endif %}
-        </div>
     </div>
 </details>