[CSS][TWIG] Panels icons are now hidden on desktop view to stop possible inconsistencies on window resizing. Left Panel polish.

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

public/assets/css/base.css

@@ -123,8 +123,8 @@ summary:focus > svg {
 }
 
 hr {
+    all: unset;
     display: block;
-    border: none;
     height: 2px;
     background-image: linear-gradient(to right, var(--bg1), transparent 90%);
 }
@@ -194,9 +194,8 @@ html {
 
 /* THE FOCUSED (middle) DIV */
 .content {
-    margin: var(--main-size);
-    margin-left: calc(2 * var(--main-size));
-    margin-right: calc(2 * var(--main-size));
+    box-sizing: border-box;
+    padding: calc(2 * var(--main-size));
     display: flex;
     flex-direction: column;
     width: calc(3 * (100% / 5));
@@ -267,6 +266,15 @@ figcaption a:link {
 
 /* MEDIA QUERIES */
 @media (min-width: 1200px) {
+    .icon-left,
+    .icon-right {
+        display: none;
+    }
+
+    summary {
+        cursor: none;
+    }
+
     .panel aside {
         position: fixed;
         display: flex !important;
@@ -279,20 +287,21 @@ figcaption a:link {
         height: calc(100vh - (3 * var(--small-size) + var(--main-size)));
         animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1);
     }
-
-    .panel[open] aside {
-        display: none !important;
-    }
 }
 
 @media (max-width: 1200px) {
     .content {
-        margin: var(--main-size);
+        padding: var(--main-size);
         display: flex;
         flex-direction: column;
         width: 100%;
     }
 
+    .icon-left,
+    .icon-right {
+        display: flow;
+    }
+
     .panel aside {
         display: none !important;
     }

public/assets/css/left/left.css

@@ -24,12 +24,12 @@
 
 /* PROFILE */
 .profile-nav {
-
+    display: flex;
+    flex-direction: column;
     font-family: var(--display-font);
 }
 
 .profile {
-    width: 100%;
     margin-bottom: var(--main-size);
 
     background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)),
@@ -67,16 +67,13 @@
     color: var(--white);
 }
 
-.main-nav ul {
+.main-nav a {
     display: flex;
     flex-direction: column;
 }
 
-.sec-nav a {
+.sec-nav {
     font-size: var(--medium-size);
-}
-
-.sec-nav ul {
     display: flex;
     flex-direction: column;
 }

templates/sidepanel/left/left.html.twig

@@ -28,36 +28,20 @@
                     </div>
                 </a>
             </div>
-
-            <ul>
-                <li>
             <a href='#'>Messages</a>
-                </li>
-                <li>
             <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
                class='hover-effect {{ active("replies") }}'>Replies</a>
-                </li>
             {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
-                    <li>{{ link | raw }}</li>
+                {{ link | raw }}
             {% endfor %}
-                <li>
             <a href="{{ path('settings_personal_info') }}"
                class='hover-effect {{ active('settings_') }}'>Settings</a>
-                </li>
-                <li>
             <a href='{{ path('logout') }}'>Logout</a>
-                </li>
             </ul>
         {% else %}
             <div class="profile">
-                <ul>
-                    <li>
                 <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
-                    </li>
-                    <li>
                 <a href="{{ path('register') }}">Register</a>
-                    </li>
-                </ul>
             </div>
         {% endif %}
 
@@ -67,29 +51,22 @@
             <hr>
 
             <nav class='sec-nav'>
-                <ul>
-                    <li>
                 <a href="{{ path('main_public') }}"
                    class='{{ active('main_public') }}'>Public</a>
-                    </li>
+
                 {% if user_nickname is defined %}
-                        <li>
                     <a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
                        class='{{ active("home_all") }}'>Home</a>
-                        </li>
                 {% endif %}
-                    <li>
+
                 <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
-                    </li>
+
                 {% if main_nav_tabs is defined %}
                     {% for tab in main_nav_tabs %}
-                            <li>
                         <a href="{{ path(tab['route']) }}"
                            class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
-                            </li>
                     {% endfor %}
                 {% endif %}
-                </ul>
             </nav>
         </div>