[CSS] Note avatar now bigger. Note actions and avatar now on the side of note.
This commit is contained in:
@@ -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,24 +1,13 @@
|
||||
<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" #}
|
||||
<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 %}
|
||||
|
||||
<aside class="note-sidebar">
|
||||
<img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" width="32px" height="32px">
|
||||
{% if app.user %}
|
||||
<div class="note-actions">
|
||||
{% if have_user %}
|
||||
{% for current_action in get_note_actions(note) %}
|
||||
{{ form_start(current_action) }}
|
||||
<div class="note-actions">
|
||||
{% if have_user %}
|
||||
{% for current_action in get_note_actions(note) %}
|
||||
{{ form_start(current_action) }}
|
||||
{% if current_action.submit_favourite is defined %}
|
||||
{{ form_widget(current_action.submit_favourite) }}
|
||||
{% endif %}
|
||||
@@ -28,47 +17,64 @@
|
||||
{% if current_action.reply is defined %}
|
||||
{{ form_widget(current_action.reply) }}
|
||||
{% endif %}
|
||||
{{ form_end(current_action) }}
|
||||
{% endfor %}
|
||||
{{ form_end(current_action) }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</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>
|
||||
{% endif %}
|
||||
</header>
|
||||
<section tabindex="0" role="dialog" class="e-content entry-content note-content">
|
||||
|
||||
<div class="note-text" tabindex="0" title="{{ 'Note text content.' | trans }}">
|
||||
{{ note.getRendered() | raw }}
|
||||
</div>
|
||||
<section tabindex="0" role="dialog" class="e-content entry-content note-content">
|
||||
|
||||
{% if hide_attachments is not defined %}
|
||||
<div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
|
||||
{% for attachment in note.getAttachments() %}
|
||||
{% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="note-text" tabindex="0" title="{{ 'Note text content.' | trans }}">
|
||||
{{ note.getRendered() | raw }}
|
||||
</div>
|
||||
|
||||
{% if hide_attachments is not defined %}
|
||||
<div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
|
||||
{% for attachment in note.getAttachments() %}
|
||||
{% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if note.getLinks() is not empty %}
|
||||
<div tabindex="0" class="note-links" title="{{ 'Shared links.' | trans }}">
|
||||
{% for link in note.getLinks() %}
|
||||
{% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
|
||||
{{ block | raw }}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
{% if replies is defined and replies is not empty %}
|
||||
<div class="u-in-reply-to replies" tabindex="0" title="{{ 'Begin replies to ' | trans }} {{ nickname }}'s note!">
|
||||
{% for conversation in replies %}
|
||||
{% include '/note/view.html.twig' with {'note': conversation['note'], 'skip_reply_to': true, 'have_user': have_user, 'replies': conversation['replies']} only %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if note.getLinks() is not empty %}
|
||||
<div tabindex="0" class="note-links" title="{{ 'Shared links.' | trans }}">
|
||||
{% for link in note.getLinks() %}
|
||||
{% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
|
||||
{{ block | raw }}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if reply_to is not empty %}
|
||||
<hr tabindex="0" title="{{ 'End of this reply' | trans }}">
|
||||
{% endif %}
|
||||
|
||||
</section>
|
||||
|
||||
{% if replies is defined and replies is not empty %}
|
||||
<div class="u-in-reply-to replies" tabindex="0" title="{{ 'Begin replies to ' | trans }} {{ nickname }}'s note!">
|
||||
{% for conversation in replies %}
|
||||
{% include '/note/view.html.twig' with {'note': conversation['note'], 'skip_reply_to': true, 'have_user': have_user, 'replies': conversation['replies']} only %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if reply_to is not empty %}
|
||||
<hr tabindex="0" title="{{ 'End of this reply' | trans }}">
|
||||
{% endif %}
|
||||
</article>
|
||||
|
||||
@@ -17,60 +17,54 @@
|
||||
{% 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>
|
||||
<summary>
|
||||
<h2>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
|
||||
<em>Personal Information, Avatar and Profile</em>
|
||||
</summary>
|
||||
|
||||
<em>Personal Information, Avatar and Profile</em>
|
||||
</summary>
|
||||
<section>
|
||||
<nav class='set-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h3>Personal Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||
<em>Nickname, Homepage, Bio, Self Tags and more.</em>
|
||||
</summary>
|
||||
|
||||
<section>
|
||||
<nav class='set-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h3>Personal
|
||||
Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||
{% block form_profile %}{% include '/settings/profile.html.twig' %}{% endblock %}
|
||||
</details>
|
||||
</li>
|
||||
|
||||
<em>Nickname, Homepage, Bio, Self Tags and more.</em>
|
||||
</summary>
|
||||
<hr>
|
||||
|
||||
{% block form_profile %}
|
||||
{% include '/settings/profile.html.twig' %}
|
||||
{% endblock %}
|
||||
</details>
|
||||
</li>
|
||||
{% set profile_tabs = handle_event('PopulateProfileSettingsTabs', app.request) %}
|
||||
{% for tab in profile_tabs %}
|
||||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||
<em>{{ tab['desc'] }}</em>
|
||||
</summary>
|
||||
|
||||
<hr>
|
||||
{% include tab['controller']['_template'] with tab['controller'] only %}
|
||||
|
||||
{% set profile_tabs = handle_event('PopulateProfileSettingsTabs', app.request) %}
|
||||
{% for tab in profile_tabs %}
|
||||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||
{# <a href="{{ path(tab['route']) }}"
|
||||
class='hover-effect {{ active(tab['route']) }}'>{{ tab['title'] }}</a> #}
|
||||
|
||||
<em>{{ tab['desc'] }}</em>
|
||||
</summary>
|
||||
</details>
|
||||
</li>
|
||||
|
||||
{% include tab['controller']['_template'] with tab['controller'] only %}
|
||||
|
||||
{# <a href="{{ path(tab['route']) }}"
|
||||
class='hover-effect {{ active(tab['route']) }}'>{{ tab['title'] }}</a> #}
|
||||
|
||||
</details>
|
||||
</li>
|
||||
|
||||
<hr>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
<hr>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
</details>
|
||||
</li>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user