From cd05589f67612e49c8ce12e3b28904442bb74ea6 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Sat, 24 Jul 2021 18:16:27 +0100
Subject: [PATCH] [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              | 27 ++++++---
 public/assets/css/left/left.css         | 11 ++--
 templates/sidepanel/left/left.html.twig | 77 +++++++++----------------
 3 files changed, 49 insertions(+), 66 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index edda392e71..1f8f32b4a5 100644
--- a/public/assets/css/base.css
+++ b/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;
     }
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index 36a651140e..7fbd2ab300 100644
--- a/public/assets/css/left/left.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig
index 4987620db2..3281251626 100644
--- a/templates/sidepanel/left/left.html.twig
+++ b/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>
-                {% endfor %}
-                <li>
-                    <a href="{{ path('settings_personal_info') }}"
-                       class='hover-effect {{ active('settings_') }}'>Settings</a>
-                </li>
-                <li>
-                    <a href='{{ path('logout') }}'>Logout</a>
-                </li>
+            <a href='#'>Messages</a>
+            <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
+               class='hover-effect {{ active("replies") }}'>Replies</a>
+            {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
+                {{ link | raw }}
+            {% endfor %}
+            <a href="{{ path('settings_personal_info') }}"
+               class='hover-effect {{ active('settings_') }}'>Settings</a>
+            <a href='{{ path('logout') }}'>Logout</a>
             </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>
+                <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
+                <a href="{{ path('register') }}">Register</a>
             </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>
+                <a href="{{ path('main_public') }}"
+                   class='{{ active('main_public') }}'>Public</a>
+
+                {% if user_nickname is defined %}
+                    <a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
+                       class='{{ active("home_all") }}'>Home</a>
+                {% endif %}
+
+                <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
+
+                {% if main_nav_tabs is defined %}
+                    {% for tab in main_nav_tabs %}
+                        <a href="{{ path(tab['route']) }}"
+                           class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
+                    {% endfor %}
+                {% endif %}
             </nav>
         </div>