[TWIG][CSS] Left panel profile section done.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
This commit is contained in:
Eliseu Amaro 2021-07-26 17:14:24 +01:00 committed by Diogo Peralta Cordeiro
parent b4bf720b06
commit 0ce686d8bb
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
5 changed files with 79 additions and 36 deletions

View File

@ -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;

View File

@ -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 {

View File

@ -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>

View File

@ -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) }}

View File

@ -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>