[TWIG][CSS][ICONS] New profile and notice creation panel, alternative text set correctly for header icons. WIP in base styling and panels.

public/assets/css/base.css

@@ -109,6 +109,8 @@ a:focus {
 /* DEFAULTS */
 body,
 html {
+    display: flex;
+    flex-direction: column;
     height: 100%;
     width: auto;
     color: var(--white);
@@ -122,10 +124,10 @@ html {
 }
 
 #header {
+    order: 1;
     display: flex;
     justify-content: center;
     position: fixed;
-    pointer-events: none;
 
     width: 100%;
     height: calc(5 * var(--unit-size));
@@ -159,29 +161,32 @@ html {
 
 /* CONTAINS ALL ELEMENTS BESIDES HEADER */
 .container {
-    padding-top: calc(3 * var(--small-size) + var(--main-size));
+    order: 2;
     display: flex;
+    justify-content: space-evenly;
+
+    width: 100%;
+    max-height: calc(100% - (3 * var(--small-size) + var(--main-size)));
+    margin-top: auto;
 }
 
 /* THE FOCUSED (middle) DIV */
 .content {
     order: 2;
-    max-width: calc(100vw / 2);
-    margin-left: auto;
-    margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    width: calc(3 * (100%/5));
+    padding: var(--small-size);
 }
 
 /* EVERY SIDE PANEL DETAIL ELEMENT */
 .panel {
     all: unset;
+    width: calc(1 * (100%/5));
 }
 
 .panel[open] {
-    width: calc((100vw / 4) - var(--small-size));
-    display: flex;
-    flex-direction: column;
-    padding: var(--small-size);
-    box-sizing: border-box;
+    height: 100%;
 }
 
 /*

public/assets/css/left/left.css

@@ -17,17 +17,25 @@
     height: auto;
 }
 
+#right-container {
+    order: 1;
+}
+
 #left-container[open] > div {
     opacity: 100%;
 }
 
 #left-container[open] {
     order: 1;
+    width: calc(100vw / 4);
     border-right: solid 1px var(--bg2);
 }
 
-#left-panel {
+#left-container[open] > #left-panel {
     position: fixed;
     display: flex;
     flex-direction: column;
+
+    width: 100%;
+    padding: var(--small-size);
 }

public/assets/css/right/right.css

@@ -12,8 +12,8 @@
     vertical-align: middle;
 }
 
-#right-container > div {
-    opacity: 0;
+#right-container {
+    order: 3;
 }
 
 #right-container[open] > div {
@@ -21,7 +21,7 @@
 }
 
 #right-container[open] {
-    order: 3;
+    width: calc(100vw / 4);
     border-left: solid 1px var(--bg2);
 }
 
@@ -29,4 +29,7 @@
     position: fixed;
     display: flex;
     flex-direction: column;
+
+    width: 100%;
+    padding: var(--small-size);
 }

templates/base.html.twig

@@ -42,31 +42,20 @@
     <div class="container">
         <details class="panel" id="left-container">
             <summary>
-                {{ icon('menu', 'icon icon-left') | raw }}
-                <div class="panel-desktop">
-                    {{ block("leftpanel", "stdgrid.html.twig") }}
-                </div>
+                {{ icon('person', 'icon icon-left') | raw }}
             </summary>
-            <div class="panel-mobile">
-                {{ block("leftpanel", "stdgrid.html.twig") }}
-            </div>
+            {{ block("leftpanel", "stdgrid.html.twig") }}
         </details>
 
-
         {% block nav %}{% endblock %}
         {% block body %}{% endblock %}
         {% block javascripts %}{% endblock javascripts %}
 
         <details class="panel" id="right-container">
             <summary>
-                {{ icon('drop', 'icon icon-right') | raw }}
-                <div class="panel-desktop">
-                    {{ block("rightpanel", "stdgrid.html.twig") }}
-                </div>
+                {{ icon('notes', 'icon icon-right') | raw }}
             </summary>
-            <div class="panel-mobile">
-                {{ block("rightpanel", "stdgrid.html.twig") }}
-            </div>
+            {{ block("rightpanel", "stdgrid.html.twig") }}
         </details>
     </div>
 

templates/sidepanel/right/right.html.twig

@@ -1,9 +1,7 @@
 <div id='right-panel'>
 
     {% if post_form is defined %}
-        {{ post_form }}
-
-        {#{{ form_start(post_form) }}
+        {{ form_start(post_form) }}
         <div class="create-notice">
             <div class="target">
                 <div class="target-top">
@@ -42,7 +40,8 @@
                 </div>
             </div>
         </div>
-        {{ form_end(post_form) }}#}
+        {{ form_end(post_form) }}
+
     {% endif %}
 
     {% set current_path = app.request.get('_route') %}