popup user profile

app/static/styles.css

@@ -1350,7 +1350,7 @@ time {
     display: inline;
   }
 }
-.comment .comment_author img {
+.comment .comment_author .author_link img {
   width: 25px;
   height: 25px;
   border-radius: 50%;
@@ -1959,6 +1959,27 @@ form h5 {
   padding-top: 0.12rem !important;
 }
 
+.render_username {
+  position: relative;
+}
+.render_username .author_link {
+  display: inline-block;
+}
+.render_username .author_link:hover + .user_preview, .render_username .user_preview:hover {
+  display: inline-block !important;
+  position: absolute;
+  top: 17px;
+  left: 0;
+  background-color: white;
+  z-index: 20;
+}
+.render_username .user_preview .card {
+  width: 300px;
+}
+.render_username .user_preview .card .preview_avatar_image img {
+  max-width: 100%;
+}
+
 /* high contrast */
 @media (prefers-contrast: more) {
   :root {

app/static/styles.scss

@@ -1010,7 +1010,7 @@ time {
     }
   }
 
-  .comment_author {
+  .comment_author .author_link {
     img {
       width: 25px;
       height: 25px;
@@ -1675,6 +1675,30 @@ form {
   padding-top: .12rem !important;
 }
 
+.render_username {
+  position: relative;
+
+  .author_link {
+    display: inline-block;
+  }
+
+  .author_link:hover + .user_preview, .user_preview:hover {
+    display: inline-block !important;
+    position: absolute;
+    top: 17px;
+    left: 0;
+    background-color: white;
+    z-index: 20;
+  }
+
+  .user_preview .card {
+    width: 300px;
+
+    .preview_avatar_image img {
+      max-width: 100%;
+    }
+  }
+}
 
 /* high contrast */
 @import "scss/high_contrast";

app/templates/base.html

@@ -7,7 +7,7 @@
             [deleted]
         {% endif -%}
     {% else -%}
-        <a href="/u/{{ user.link() }}" title="{{ user.ap_id if user.ap_id != none else user.user_name }}" aria-label="{{ _('Author') }}">
+        <a href="/u/{{ user.link() }}" aria-label="{{ _('Author') }}" class="author_link">
             {% if user.avatar_id and not low_bandwidth and not collapsed -%}
                 <img src="{{ user.avatar_thumbnail() }}" alt="" loading="lazy" />
             {% endif -%}
@@ -33,6 +33,12 @@
                 <span class="user_note" title="{{ _('User note: %(note)s', note=user_note) }}">[{{ user_note | truncate(12, True) }}]</span>
             {% endif -%}
         {% endif -%}
+        <div class="d-none user_preview" id="preview_{{ user.id }}"
+            hx-get="{{ url_for('user.user_preview', user_id=user.id) }}"
+            hx-trigger="intersect once"
+            hx-target="this"
+            hx-swap="innerHTML"
+        ></div>
     {% endif -%}
 </span>
 {% endmacro -%}

app/templates/post/_post_teaser.html

@@ -9,7 +9,7 @@
     {# do nothing - blocked by keyword filter #}
 {% else -%}
     <div class="h-entry pb-0 post_teaser type_{{ post.type }}{{ ' reported' if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator() }}{{ ' blocked' if content_blocked }}{{ ' blur' if blur_content }}"
-        {% if content_blocked -%} title="{{ _('Filtered: ') }}{{ content_blocked }}"{% else %} title="Post: {{ post.title }}" aria-label="Post: {{ post.title }}"{% endif -%} tabindex="0">
+        {% if content_blocked -%} title="{{ _('Filtered: ') }}{{ content_blocked }}"{% else %} title="Post: {{ post.title }}" aria-label="Post: {{ post.title }}"{% endif %} tabindex="0">
         <div class="row">
             {% if post.type == POST_TYPE_ARTICLE %}
                 {% include "post/post_teaser/_article.html" -%}

app/templates/user/show_profile.html

@@ -119,7 +119,7 @@
             {% if current_user.is_authenticated and current_user.is_admin() and user.reputation %}{{ _('Reputation') }}: <span title="{{ _('Reputation: The Karma of the account. Total up votes minus down votes they got.') }}">{{ user.reputation | round | int }}</span><br />{% endif %}
             {{ _('Posts') }}: {{ user.post_count }}<br />
             {{ _('Comments') }}: {{ user.post_reply_count }}<br />
-            {% if current_user.is_authenticated %}{{ _('User note') }}: {{ user.get_note(current_user) }}<br />{% endif %}
+            {% if current_user.is_authenticated %}{{ _('Note') }}: {{ user.get_note(current_user) }}<br />{% endif %}
         </p>
         <div class="profile_bio">
             {{ user.about_html|safe }}

app/templates/user/user_preview.html

@@ -0,0 +1,42 @@
+<div class="card" title="{{ user.display_name() }}">
+    <div class="card-body">
+        <div class="row">
+            {% if user.avatar_id -%}
+                <div class="col-auto preview_avatar_image">
+                    <img src="{{ user.avatar_image() }}" alt="" loading="lazy" />
+                </div>
+            {% endif -%}
+            <div class="col-auto">
+                <a href="/u/{{ user.link() }}">{{ user.display_name() }}</a>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-auto">
+                <p class="small">{{ _('Instance') }}: <a href="{{ url_for('instance.instance_overview', instance_domain=user.instance_domain()) }}">{{ user.instance_domain() }}</a>
+                    {% if user.is_instance_admin() or (user.is_local() and user.is_admin()) %}<span class="red">({{ _('Admin') }})</span>{% endif %}<br />
+                    {% if user.is_admin() or user.is_staff() %}{{ _('Role permissions') }}: {% if user.is_admin() %}{{ _('Admin') }}{% endif %} {% if user.is_staff() %}{{ _('Staff') }}{% endif %}<br />{% endif %}
+                    {{ _('Joined') }}: {{ arrow.get(user.created).humanize(locale=locale) }}<br />
+                    {% if current_user.is_authenticated and current_user.is_admin() %}{{ _('Referer') }}: <span title="{{ _('Which website linked to PieFed when the user initially registered.') }}">{{ user.referrer if user.referrer }}</span><br />{% endif %}
+                    {% if current_user.is_authenticated and current_user.is_admin() %}{{ _('IP and country code') }}: <span title="{{ _('IP address of last interaction.') }}">{{ user.ip_address if user.ip_address }}{% if user.ip_address_country %} ({{ user.ip_address_country }}){% endif %}</span><br />{% endif %}
+                    {% if current_user.is_authenticated and current_user.is_admin() and user.last_seen %}{{ _('Active') }}: {{ arrow.get(user.last_seen).humanize(locale=locale) }}<br />{% endif %}
+                    {% if user.bot %}
+                        {{ _('Bot Account') }}<br />
+                    {% endif %}
+                    {{ _('Attitude') }}: <span title="{{ _('Ratio of upvotes cast to downvotes cast. Higher is more positive.') }}">{{ (user.attitude * 100) | round | int }}%</span><br />
+                    {% if current_user.is_authenticated and current_user.is_admin() and user.reputation %}{{ _('Reputation') }}: <span title="{{ _('Reputation: The Karma of the account. Total up votes minus down votes they got.') }}">{{ user.reputation | round | int }}</span><br />{% endif %}
+                    {{ _('Posts') }}: {{ user.post_count }}<br />
+                    {{ _('Comments') }}: {{ user.post_reply_count }}<br />
+                    {% if current_user.is_authenticated %}{{ _('Note') }}: {{ user.get_note(current_user) }}<br />{% endif %}
+                </p>
+                <div class="profile_bio">
+                    {{ user.about_html|safe }}
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-auto text-center">
+                <a href="/u/{{ user.link() }}" class="btn btn-primary btn-sm">{{ _('View profile') }}</a>
+            </div>
+        </div>
+    </div>
+</div>

app/user/routes.py

@@ -1379,3 +1379,11 @@ def edit_user_note(actor):
 
     return render_template('user/edit_note.html', title=_('Edit note'), form=form, user=user,
                            menu_topics=menu_topics(), site=g.site)
+
+
+@bp.route('/user/<int:user_id>/preview')
+def user_preview(user_id):
+    user = User.query.get_or_404(user_id)
+    if (user.deleted or user.banned) and current_user.is_anonymous:
+        abort(404)
+    return render_template('user/user_preview.html', user=user)