[CSS] Note avatar now bigger. Note actions and avatar now on the side of note.
This commit is contained in:
parent
2de071ca7e
commit
f4ac49e7c7
GPG Key ID:
18D2D35001FBFAB0
@ -260,6 +260,7 @@ hr {
|
||||
.h-entry {
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
|
||||
.notes hr {
|
||||
margin-top: 5px;
|
||||
}
|
||||
@ -270,14 +271,39 @@ hr {
|
||||
.h-entry .embed header {
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
|
||||
.h-entry .embed .p-summary {
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
|
||||
.h-entry,
|
||||
.note {
|
||||
display: flex;
|
||||
background-color: var(--translucent);
|
||||
border-radius: var(--unit-size);
|
||||
}
|
||||
.note-wrapper {
|
||||
width: 100%;
|
||||
height: available;
|
||||
}
|
||||
|
||||
.note-sidebar {
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
.note-sidebar * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.note-sidebar .avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: unset;
|
||||
margin-bottom: var(--unit-size);
|
||||
}
|
||||
|
||||
.h-entry .replies .h-entry {
|
||||
background-color: unset;
|
||||
@ -308,18 +334,9 @@ hr {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.note-author .avatar {
|
||||
width: auto;
|
||||
height: var(--main-size);
|
||||
border-radius: var(--unit-size);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.note-actions {
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
@ -328,10 +345,10 @@ hr {
|
||||
|
||||
background-repeat: no-repeat !important;
|
||||
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
width: var(--main-size) !important;
|
||||
height: var(--main-size) !important;
|
||||
|
||||
margin-left: 5px;
|
||||
margin-top: var(--unit-size);
|
||||
text-indent: -9999em;
|
||||
}
|
||||
|
||||
@ -373,6 +390,7 @@ hr {
|
||||
border-top: unset;
|
||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||
|
||||
height: max-content;
|
||||
padding: var(--small-size);
|
||||
}
|
||||
|
||||
|
||||
@ -1,19 +1,8 @@
|
||||
<article class="h-entry hentry note">
|
||||
{% set nickname = note.getActorNickname() %}
|
||||
<header tabindex="0" title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}." class="note-info">
|
||||
|
||||
{# TODO: this should link to the note's user profile? #}
|
||||
<strong class="note-author u-url">
|
||||
{# Microformat's h-card properties indicates a face icon is a "u-logo" #}
|
||||
<aside class="note-sidebar">
|
||||
<img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" width="32px" height="32px">
|
||||
{{ nickname }}
|
||||
</strong>
|
||||
|
||||
{% set reply_to = note.getReplyToNickname() %}
|
||||
{% if reply_to is not null and not skip_reply_to is defined %}
|
||||
{% trans with {'%name%': reply_to} %} in reply to %name% {% endtrans %}
|
||||
{% endif %}
|
||||
|
||||
{% if app.user %}
|
||||
<div class="note-actions">
|
||||
{% if have_user %}
|
||||
@ -33,7 +22,23 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</header>
|
||||
</aside>
|
||||
|
||||
<div class="note-wrapper">
|
||||
|
||||
{# TODO: this should link to the note's user profile? #}
|
||||
<div tabindex="0" title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}." class="note-info">
|
||||
<strong class="note-author u-url">
|
||||
{# Microformat's h-card properties indicates a face icon is a "u-logo" #}
|
||||
{{ nickname }}
|
||||
</strong>
|
||||
|
||||
{% set reply_to = note.getReplyToNickname() %}
|
||||
{% if reply_to is not null and not skip_reply_to is defined %}
|
||||
{% trans with {'%name%': reply_to} %} in reply to %name% {% endtrans %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<section tabindex="0" role="dialog" class="e-content entry-content note-content">
|
||||
|
||||
<div class="note-text" tabindex="0" title="{{ 'Note text content.' | trans }}">
|
||||
@ -57,7 +62,6 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</section>
|
||||
|
||||
{% if replies is defined and replies is not empty %}
|
||||
@ -71,4 +75,6 @@
|
||||
{% if reply_to is not empty %}
|
||||
<hr tabindex="0" title="{{ 'End of this reply' | trans }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
@ -17,14 +17,13 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<nav class='main-nav fg'>
|
||||
<nav class='main-nav'>
|
||||
<h1>Settings</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h2>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
|
||||
|
||||
<em>Personal Information, Avatar and Profile</em>
|
||||
</summary>
|
||||
|
||||
@ -34,15 +33,11 @@
|
||||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h3>Personal
|
||||
Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||
|
||||
<h3>Personal Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||
<em>Nickname, Homepage, Bio, Self Tags and more.</em>
|
||||
</summary>
|
||||
|
||||
{% block form_profile %}
|
||||
{% include '/settings/profile.html.twig' %}
|
||||
{% endblock %}
|
||||
{% block form_profile %}{% include '/settings/profile.html.twig' %}{% endblock %}
|
||||
</details>
|
||||
</li>
|
||||
|
||||
@ -54,7 +49,6 @@
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||
|
||||
<em>{{ tab['desc'] }}</em>
|
||||
</summary>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user