From fc3ac1c2f401c046ad318ad19882e22d4344a13d Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Mon, 26 Jul 2021 17:14:24 +0100
Subject: [PATCH] [TWIG][CSS] Left panel profile section done.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
---
 public/assets/css/base.css              |  8 +++-
 public/assets/css/left/left.css         | 39 ++++++++++++++++--
 templates/network/public.html.twig      |  4 +-
 templates/security/register.html.twig   |  9 ++--
 templates/sidepanel/left/left.html.twig | 55 ++++++++++++++-----------
 5 files changed, 79 insertions(+), 36 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 148dfd965a..d7a7696262 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -86,6 +86,10 @@ li {
     padding: 0;
 }
 
+summary {
+    cursor: default !important;
+}
+
 a:link {
     text-decoration: none;
     color: var(--white);
@@ -102,8 +106,8 @@ a:visited {
 
 a:focus,
 a:hover {
-    border-radius: var(--unit-size);
-    padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size);
+    border-radius: var(--unit-size) !important;
+    padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
     background: var(--white) !important;
     color: var(--bg1) !important;
     transition: all 0.4s ease;
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index 6e105e0681..0db639d077 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -47,10 +47,41 @@
     box-sizing: border-box;
 }
 
-.profile a:focus,
-.profile a:hover {
-    all: unset;
-    color: var(--white) !important;
+#profile-links {
+    width: 100%;
+    height: auto;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-bottom: var(--unit-size);
+}
+
+#user-avatar {
+    box-sizing: border-box;
+    max-width: 50%;
+    margin-right: var(--unit-size);
+}
+
+#user-avatar img {
+    border-radius: 50%;
+    width: calc(3 * var(--main-size));
+    height: auto;
+}
+
+#user-avatar:hover img,
+#user-avatar:focus img {
+    border-radius: 50% !important;
+    box-shadow: var(--shadow-light) !important;
+}
+
+#user-info {
+    display: flex;
+    flex-direction: column;
+}
+
+#user-tags {
+    font-family: var(--main-font);
+    font-size: var(--medium-size);
 }
 
 .footer {
diff --git a/templates/network/public.html.twig b/templates/network/public.html.twig
index 38a53e7c90..0d29656c9f 100644
--- a/templates/network/public.html.twig
+++ b/templates/network/public.html.twig
@@ -25,7 +25,7 @@
 
         {# Backwards compatibility with hAtom 0.1 #}
         <div class="timeline">
-            <div class="h-feed hfeed notes">
+            <main class="h-feed hfeed notes">
                 {% if notes is defined and notes is not empty %}
                     {% for conversation in notes %}
                         {% include '/note/view.html.twig' with {'note': conversation['note'], 'have_user': have_user, 'replies': conversation['replies']} only %}
@@ -33,7 +33,7 @@
                 {% else %}
                     <div id="empty-notes"><h1>{% trans %}No notes here.{% endtrans %}</h1></div>
                 {% endif %}
-            </div>
+            </main>
         </div>
 
     </div>
diff --git a/templates/security/register.html.twig b/templates/security/register.html.twig
index 0a396afae3..1a395d23c5 100644
--- a/templates/security/register.html.twig
+++ b/templates/security/register.html.twig
@@ -16,9 +16,12 @@
         {{ form_start(registration_form) }}
         <fieldset>
             <legend>Register a new account</legend>
-            {{ form_row(registration_form.nickname) }} <p></p>
-            {{ form_row(registration_form.email) }} <p></p>
-            {{ form_row(registration_form.password) }} <p></p>
+            {{ form_row(registration_form.nickname) }}
+            <p></p>
+            {{ form_row(registration_form.email) }}
+            <p></p>
+            {{ form_row(registration_form.password) }}
+            <p></p>
             {{ form_row(registration_form.register) }}
         </fieldset>
         {{ form_end(registration_form) }}
diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig
index 86d7107435..3074b1a6d2 100644
--- a/templates/sidepanel/left/left.html.twig
+++ b/templates/sidepanel/left/left.html.twig
@@ -1,33 +1,38 @@
 <aside id='left-panel'>
-    <div class='profile-nav'>
+    <nav class='profile-nav'>
 
         {% if app.user %}
-            <div class='profile'>
+            <section class='profile'>
+                <section id="profile-links">
+                    <a id="user-avatar" href="{{ path('settings_avatar') }}">
+                        <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
+                    </a>
+
+                    <span id="user-info">
+                        <a id="user-nick" href="{{ path('settings_personal_info') }}">
+                            <h2>{{ user_nickname }}</h2>
+                        </a>
+                        <div id="user-tags">
+                            {% if user_tags %}
+                                {% for tag in user_tags %}
+                                    <a href='#'> #{{ tag }}</a>
+                                {% endfor %}
+                            {% else %}
+                                {{ '(No tags)' | trans }}
+                            {% endif %}
+                        </div>
+                    </span>
+                </section>
+
+                <span id="stats">
+                    <h2>{{ 'Followers' | trans }} {{ user_followers }}</h2>
+                    <h2>{{ 'Followed' | trans }} {{ user_followed }}</h2>
+                </span>
+
                 {% for extra in profile_extras %}
                     {% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
                 {% endfor %}
-                <a href="{{ path('settings_avatar') }}">
-                    <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
-                </a>
-                <a href="{{ path('settings_personal_info') }}">
-                    <div class="info">
-                        <b id="nick">{{ user_nickname }}</b>
-                        <div class="tags">
-                            {% if user_tags %}
-                                {% for tag in user_tags %}
-                                    <a href='#'><i> #{{ tag }} </i></a>
-                                {% endfor %}
-                            {% else %}
-                                <i> {{ '(No tags)' | trans }} </i>
-                            {% endif %}
-                        </div>
-                        <div class="stats">
-                            <span> <b> {{ user_followers }} </b> {{ 'Followers' | trans }} </span>
-                            <span> <b> {{ user_followed }} </b> {{ 'Followed' | trans }} </span>
-                        </div>
-                    </div>
-                </a>
-            </div>
+            </section>
 
             <nav>
                 <a href='#'>Messages</a>
@@ -77,7 +82,7 @@
 
         </div>
 
-    </div>
+    </nav>
 
     <div class="footer">
         <a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>