[TWIG][CSS] Left and Right panels now using a checkbox trick to control their visibility. Details element couldn't be properly controlled by CSS without breaking accessibility.

public/assets/css/base.css

@@ -80,16 +80,6 @@
     transition: var(--cubic-transition);
 }
 
-.panel aside {
-    font-size: var(--medium-size);
-    position: absolute;
-    top: 100%;
-
-    width: 20%;
-    animation: var(--fade-in);
-    padding: var(--unit-size);
-}
-
 .icon {
     fill: var(--white);
     width: 1em;
@@ -109,6 +99,9 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
+
+    margin-left: 20%;
+    margin-right: 20%;
     padding: var(--unit-size);
 }
 
@@ -116,11 +109,8 @@
 .content {
     display: flex;
     flex-direction: column;
-    margin-left: 20%;
-    margin-right: 20%;
 
     width: 100%;
-    max-width: 60%;
 }
 
 .markdown-blocks {
@@ -258,54 +248,6 @@
     height: auto;
 }
 
-/* MEDIA RESIZE */
-@media (min-width: 1200px) {
-    /* no need to make the panels disappear at this size */
-    /*.icon-left,
-    .icon-right {
-        visibility: hidden;
-    }*/
-
-}
-@media (max-width: 1200px) {
-    /* content should occupy the entire width at this size */
-    .content {
-        margin: unset;
-        max-width: 100%;
-    }
-
-    /* by default they are hidden */
-    .panel aside {
-        display: none;
-    }
-
-    .panel:not(:focus-within or :not[open]) aside {
-        display: none;
-    }
-    .panel[open]:focus-within aside,
-    .panel[open] {
-        display: flex;
-        flex-direction: column;
-    }
-    .panel[open] aside {
-        padding: var(--unit-size);
-        box-sizing: border-box;
-        width: 100%;
-        height: 100vh;
-
-        background-color: var(--bg3);
-        background-image: url(../images/bg.png);
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        min-height: 100%;
-    }
-
-    .panel[open] aside .footer {
-        max-width: 100%;
-    }
-}
-
 /* SECTIONS */
 .section-widget {
     display: flex;
@@ -494,6 +436,62 @@ input[type=file]:hover {
     color: var(--white) !important;
 }
 
+/* MEDIA QUERIES */
+
+/* sidepanels need to be shown by default on desktop, hidden on mobile */
+.panel .panel-content {
+    display: flex;
+    flex-direction: column;
+
+    /* should remain in place for the user */
+    position: fixed;
+    top: 0;
+
+    /* should be bellow header */
+    margin-top: 3rem;
+
+    /* should occupy the entire vertical real estate */
+    height: 100%;
+
+
+    padding: var(--unit-size);
+}
+
+@media (min-width: 1200px) {
+    .panel label {
+        display: none;
+    }
+    .panel .panel-content {
+        width: 100%;
+        max-width: 20%;
+    }
+}
+@media (max-width: 1200px) {
+    /* content should occupy the entire width at this size */
+    .container {
+        margin: unset;
+    }
+    .content {
+        max-width: 100%;
+    }
+
+    #panel-left-toggle:not(:checked) ~ .panel-content,
+    #panel-right-toggle:not(:checked) ~ .panel-content {
+        display: none;
+    }
+
+    #panel-left-toggle:checked ~ .panel-content,
+    #panel-right-toggle:checked ~ .panel-content {
+        display: flex;
+
+        width: 100%;
+        background-color: var(--bg2);
+        background-image: url(../images/bg.png);
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+}
 
 /* ANIMATIONS */
 @keyframes fadeIn {

public/assets/css/left/left.css

@@ -1,7 +1,13 @@
-#left-panel {
+.panel-left .panel-content {
     left: 0;
 }
 
+#panel-left-toggle:not(:checked),
+#panel-left-toggle:checked {
+    position: absolute;
+    opacity: 0;
+}
+
 /* PROFILE */
 .profile-nav {
     font-family: var(--display-font);
@@ -99,6 +105,6 @@
     padding-left: var(--unit-size);
 }
 
-.footer * {
+.footer {
-    font-size: var(--small-size);
+
 }

public/assets/css/right/right.css

@@ -1,7 +1,9 @@
-#right-panel {
+.panel-right .panel-content {
     right: 0;
 }
 
-#right-container .section-form {
+#panel-right-toggle:not(:checked),
-    font-size: var(--small-size) !important;
+#panel-right-toggle:checked {
+    position: absolute;
+    opacity: 0;
 }

templates/base.html.twig

@@ -31,12 +31,7 @@
 <body class="bg" aria-atomic="true">
     {% block header %}
         <header id='header' role="banner">
-            <details class="panel" id="left-container" aria-live="polite">
-                <summary tabindex="0" aria-roledescription="Left Panel. Expand to login, register or navigate this instance.">
-                    {{ icon('menu', 'icon icon-left') | raw }}
-                </summary>
             {{ block("leftpanel", "stdgrid.html.twig") }}
-            </details>
 
             <a id='instance' href="{{ path('main_public') }}" tabindex="0" aria-roledescription="This instance name.">
                 <div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div>
@@ -44,12 +39,7 @@
             </a>
 
             {% if app.user %}
-            <details class="panel" id="right-container" aria-live="polite">
-                <summary tabindex="0" aria-roledescription="Right Panel. Expand to create a new note.">
-                    {{ icon('notes', 'icon icon-right') | raw }}
-                </summary>
                 {{ block("rightpanel", "stdgrid.html.twig") }}
-            </details>
             {% endif %}
         </header>
     {% endblock header %}

templates/sidepanel/left/left.html.twig

@@ -1,6 +1,9 @@
-<aside id='left-panel' role="region" tabindex="-1">
+<div class="panel panel-left">
-    <nav class='profile-nav'>
+    <input type="checkbox" id="panel-left-toggle">
+    <label for="panel-left-toggle">{{ icon('menu', 'icon icon-left') | raw }}</label>
 
+    <aside class="panel-content">
+        <nav class='profile-nav'>
             {% if app.user %}
                 <section class='profile' role="complementary">
                     <div id="profile-links">
@@ -88,4 +91,5 @@
             <a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
             <a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
         </div>
-</aside>
+    </aside>
+</div>

templates/sidepanel/right/right.html.twig

@@ -1,4 +1,8 @@
-<aside id='right-panel' role="region" tabindex="-1">
+<div class="panel panel-right">
+    <input type="checkbox" id="panel-right-toggle">
+    <label for="panel-right-toggle">{{ icon('notes', 'icon icon-right') | raw }}</label>
+
+    <aside class="panel-content">
         {% if post_form is defined %}
             <section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
                 <details class="section-title">
@@ -49,4 +53,5 @@
                 </section>
             {% endfor %}
         {% endif %}
-</aside>
+    </aside>
+</div>