From 543853c374db912113b23886ef4eec0c4a8bbaf0 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Mon, 20 Sep 2021 14:38:39 +0100
Subject: [PATCH] [PLUGINS][Actor][Profile] Current user profile in line with
 other users. Directory plugin actor template standardized.

---
 .../templates/directory/actor.html.twig       | 18 ++++---
 public/assets/css/base.css                    | 54 +++++++++++++++++--
 public/assets/css/left/left.css               | 38 -------------
 templates/actor/view.html.twig                | 51 +++++++++---------
 templates/sidepanel/left/left.html.twig       | 38 +++++++------
 5 files changed, 109 insertions(+), 90 deletions(-)

diff --git a/plugins/Directory/templates/directory/actor.html.twig b/plugins/Directory/templates/directory/actor.html.twig
index 0ce3da2bbb..733a01527d 100644
--- a/plugins/Directory/templates/directory/actor.html.twig
+++ b/plugins/Directory/templates/directory/actor.html.twig
@@ -4,23 +4,23 @@
 {% set actor_bio = actor.getBio() %}
 
 {% block body %}
-<section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
-        <a id="user" href="{{ path('actor_view_nickname', {'nickname' : actor_nickname}) }}">
-            <img src='{{ actor_avatar }}' class="icon icon-avatar" alt="{{ 'Your account\'s avatar.' | trans }}">
-            <div class="user-info">
-                <strong id="user-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ actor_nickname }}</strong>
+<section title="{{ actor_nickname }}'s {{ 'profile information.' | trans }}">
+        <a class='profile' href="{{ path('actor_view_nickname', {'nickname' : actor_nickname}) }}">
+            <img src='{{ actor_avatar }}' class="profile-avatar" alt="{{ 'Your account\'s avatar.' | trans }}">
+            <div class="profile-info">
+                <strong id="profile-info-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ actor_nickname }}</strong>
 
-                <nav class="user-tags">
+                <nav class="profile-info-tags">
                     {% if actor_tags %}
                         {% for tag in actor_tags %}
                             <a href='#'><i> #{{ tag }} </i></a>
                         {% endfor %}
                     {% else %}
-                        <i> {{ '(No tags)' | trans }} </i>
+                        {{ '(No tags)' | trans }}
                     {% endif %}
                 </nav>
 
-                <section class="user-bio">
+                <section class="profile-info-stats">
                     {% if actor_bio %}
                         <p>{{ actor_bio }}</p>
                     {% else %}
@@ -30,4 +30,6 @@
             </div>
         </a>
 </section>
+
+<hr>
 {% endblock body %}
\ No newline at end of file
diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 6ef601a3de..90f1e3f008 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -41,6 +41,10 @@ html {
     --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }
 
+h1,h2,h3,h4,h5,h6 {
+    font-family: var(--display-font);
+}
+
 @media (prefers-color-scheme: dark) {
     :root {
         /* colours and shadows */
@@ -125,7 +129,7 @@ figcaption a:link {
 hr {
     all: unset;
     display: block;
-    height: 2px;
+    height: 1px;
     background: var(--bg2);
 }
 
@@ -297,7 +301,7 @@ hr {
 .note-sidebar * {
     display: flex;
     flex-direction: column;
-    margin-left: auto;
+    margin-left: auto;hr
     margin-right: auto;
     max-height: 100%;
 }
@@ -632,8 +636,8 @@ textarea:hover,
 textarea:focus,
 button:hover,
 button:focus,
-input:hover :not([type=checkbox], [type=radio]),
-input:focus :not([type=checkbox], [type=radio]),
+input:hover,
+input:focus,
 select:hover,
 select:focus {
     color: var(--white) !important;
@@ -760,11 +764,53 @@ input[type=file] {
     }
 }
 
+
+/* PROFILE */
+.profile {
+    display: flex;
+    font-family: var(--main-font);
+
+    background-color: var(--translucent);
+    margin-bottom: var(--unit-size);
+
+    border-radius: var(--unit-size);
+
+    padding: var(--unit-size);
+}
+.profile > * {
+     flex: 1;
+}
+
+.profile-info {
+    display: flex;
+    flex-direction: column;
+}
+.profile-info-nickname {
+    font-size: var(--medium-size);
+}
+.profile-info-tags {
+    margin: unset;
+}
+.profile-info-stats strong {
+    margin-right: 5px;
+}
+.profile-info-stats {
+    margin-top: var(--unit-size);
+}
+
+.profile-avatar {
+    max-width: 4rem;
+    width: 100%;
+    height: auto;
+    margin-right: 5px;
+}
+
 /* MEDIA QUERIES */
 /* sidepanels need to be shown by default on desktop, hidden on mobile */
 .panel .panel-content {
     display: flex;
     flex-direction: column;
+    font-family: var(--main-font);
     font-size: var(--small-size);
 
     /* should remain in place for the user */
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index f9885e094e..4960a7c5f1 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -16,44 +16,6 @@
     border: 2px solid transparent;
 }
 
-.panel-left nav {
-    padding-top: var(--unit-size);
-    font-size: var(--small-size);
-}
-
-/* PROFILE */
-.profile {
-    display: flex;
-    flex-direction: column;
-    font-family: var(--display-font);
-
-    background-color: var(--translucent);
-    margin-bottom: var(--main-size);
-    border: solid 2px var(--bg2);
-    border-radius: var(--unit-size);
-
-    padding: var(--unit-size);
-    box-sizing: border-box;
-}
-
-.profile ~ * {
-    padding: var(--unit-size);
-}
-
-#user {
-    align-content: center;
-}
-#user img {
-    float: left;
-    width: 5rem;
-    height: auto;
-    margin-right: 5px;
-}
-#user-nickname {
-    font-size: var(--medium-size);
-}
-
-
 .profile-navigation {
     display: flex;
     flex-direction: column;
diff --git a/templates/actor/view.html.twig b/templates/actor/view.html.twig
index d220a5bf35..e97cc2a25c 100644
--- a/templates/actor/view.html.twig
+++ b/templates/actor/view.html.twig
@@ -2,42 +2,43 @@
 
 {% set id = actor.getId() %}
 {% set nickname = actor.getNickname() %}
-
+{% set actor_bio = actor.getBio() %}
+{% set actor_tags = actor.getSelfTags() %}
 {% set avatar = actor.getAvatarUrl() %}
 
 {% block title %}{{ nickname }}'s profile{% endblock %}
 
 {% block body %}
-<section class="section-widget section-widget-padded">
-    <div class="section-title">
-        <img class="icon icon-avatar" src="{{ avatar }}" alt="{{ nickname }}'s avatar">{{ nickname }}
-    </div>
+<section title="{{ nickname }}'s {{ 'profile information.' | trans }}">
+    <a class='profile' href="{{ path('actor_view_nickname', {'nickname' : nickname}) }}">
+        <img src="{{ avatar }}" class="profile-avatar" alt="{{ nickname }}{{ '\'s avatar.' | trans }}">
+        <div class="profile-info">
+            <strong id="profile-info-nickname" title="{{ nickname }}{{ '\'s nickname.' | trans }}">{{ nickname }}</strong>
 
-    <div class="actor-nickname-and-tags">
+            <nav class="profile-info-tags">
+                {% if actor_tags %}
+                    {% for tag in actor_tags %}
+                        <a href='#'><i> #{{ tag }} </i></a>
+                    {% endfor %}
+                {% else %}
+                    {{ '(no tags)' | trans }}
+                {% endif %}
+            </nav>
 
-        {% set actor_tags = actor.getSelfTags() %}
 
-        <div class="tags">
-        {% if actor_tags %}
-            {% for tag in actor_tags %}
-                <a href='#'><i> #{{ tag }} </i></a>
-            {% endfor %}
-        {% else %}
-            <i> {{ '(No tags)' | trans }} </i>
-        {% endif %}
+            <section class="profile-info-stats">
+                {% if actor_bio %}
+                    <p>{{ actor_bio }}</p>
+                {% else %}
+                    <p>{{ '(no bio)' | trans }}</p>
+                {% endif %}
+            </section>
         </div>
-    </div>
-
-    {% set actor_bio = actor.getBio() %}
-    <div class="actor-bio">
-        {% if actor_bio %}
-            <p>{{ actor_bio }}</p>
-        {% else %}
-            <p>{{ '(No bio)' | trans }}</p>
-        {% endif %}
-    </div>
+    </a>
 </section>
 
+<hr>
+
 <main class="timeline" tabindex="0" role="feed">
     <div class="h-feed hfeed notes">
         {% if notes is defined and notes is not empty %}
diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig
index b77a46e698..2b1f35eb77 100644
--- a/templates/sidepanel/left/left.html.twig
+++ b/templates/sidepanel/left/left.html.twig
@@ -6,29 +6,37 @@
     <aside class="panel-content accessibility-target">
         {% if app.user %}
             <section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
-                <a id="user" href="{{ path('actor_view_nickname', {'nickname' : current_actor.getNickname()}) }}">
-                    <img src='{{ current_actor.getAvatarUrl() }}' class="icon icon-avatar" alt="{{ 'Your account\'s avatar.' | trans }}">
-                    <div class="user-info">
-                        <strong id="user-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ current_actor.getNickname() }}</strong>
+                <a class="profile" href="{{ path('actor_view_nickname', {'nickname' : current_actor.getNickname()}) }}">
+                    <img class="profile-avatar" src='{{ current_actor.getAvatarUrl() }}' class="icon icon-avatar" alt="{{ 'Your account\'s avatar.' | trans }}">
+                    <div class="profile-info">
+                        <strong class="profile-info-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ current_actor.getNickname() }}</strong>
 
-                        <nav class="user-tags">
+
+
+                        <nav class="profile-info-tags">
                             {% set user_tags = current_actor.getSelfTags() %}
-                            {% if user_tags %}
-                                {% for tag in user_tags %}
-                                    <a href='#'> #{{ tag }}</a>
-                                {% endfor %}
-                            {% else %}
-                                {{ '(No tags)' | trans }}
-                            {% endif %}
+
+                            <ul>
+                                {% if user_tags %}
+                                    {% for tag in user_tags %}
+                                    <li><a href='#'> #{{ tag }}</a></li>
+                                    {% endfor %}
+                                {% else %}
+                                    {{ '(no tags)' | trans }}
+                                {% endif %}
+                            </ul>
                         </nav>
 
-                        <section id="user-stats">
-                            <h2>{{ 'Subscriptions' | trans }} {{ current_actor.getSubscriptionsCount() }}</h2>
-                            <h2>{{ 'Subscribers' | trans }} {{ current_actor.getSubscribersCount() }}</h2>
+                        <section class="profile-info-stats">
+                            <div><strong>{{ 'Subscriptions' | trans }}</strong>{{ current_actor.getSubscriptionsCount() }}</div>
+                            <div><strong>{{ 'Subscribers' | trans }}</strong>{{ current_actor.getSubscribersCount() }}</div>
                         </section>
                     </div>
                 </a>
 
+                <hr>
+
+
                 <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
                     <a title='{{ 'Your messages.' | trans }}' href='{{ path('settings') }}' class='{{ active("replies") }}'>
                         Messages