[PLUGINS][Actor][Profile] Current user profile in line with other users. Directory plugin actor template standardized.
This commit is contained in:
parent
8fe8687c5b
commit
543853c374
@ -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 %}
|
||||
@ -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 */
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user