[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 {
|
.h-entry {
|
||||||
margin-top: var(--unit-size);
|
margin-top: var(--unit-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
.notes hr {
|
.notes hr {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
@ -270,14 +271,39 @@ hr {
|
||||||
.h-entry .embed header {
|
.h-entry .embed header {
|
||||||
padding: var(--unit-size);
|
padding: var(--unit-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry .embed .p-summary {
|
.h-entry .embed .p-summary {
|
||||||
padding: var(--unit-size);
|
padding: var(--unit-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry,
|
.h-entry,
|
||||||
.note {
|
.note {
|
||||||
|
display: flex;
|
||||||
background-color: var(--translucent);
|
background-color: var(--translucent);
|
||||||
border-radius: var(--unit-size);
|
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 {
|
.h-entry .replies .h-entry {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
|
|
@ -308,18 +334,9 @@ hr {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-author .avatar {
|
|
||||||
width: auto;
|
|
||||||
height: var(--main-size);
|
|
||||||
border-radius: var(--unit-size);
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-actions {
|
.note-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
height: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-container {
|
.button-container {
|
||||||
|
|
@ -328,10 +345,10 @@ hr {
|
||||||
|
|
||||||
background-repeat: no-repeat !important;
|
background-repeat: no-repeat !important;
|
||||||
|
|
||||||
width: 1em !important;
|
width: var(--main-size) !important;
|
||||||
height: 1em !important;
|
height: var(--main-size) !important;
|
||||||
|
|
||||||
margin-left: 5px;
|
margin-top: var(--unit-size);
|
||||||
text-indent: -9999em;
|
text-indent: -9999em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -373,6 +390,7 @@ hr {
|
||||||
border-top: unset;
|
border-top: unset;
|
||||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||||
|
|
||||||
|
height: max-content;
|
||||||
padding: var(--small-size);
|
padding: var(--small-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,13 @@
|
||||||
<article class="h-entry hentry note">
|
<article class="h-entry hentry note">
|
||||||
{% set nickname = note.getActorNickname() %}
|
{% 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 %}
|
{% if app.user %}
|
||||||
<div class="note-actions">
|
<div class="note-actions">
|
||||||
{% if have_user %}
|
{% if have_user %}
|
||||||
{% for current_action in get_note_actions(note) %}
|
{% for current_action in get_note_actions(note) %}
|
||||||
{{ form_start(current_action) }}
|
{{ form_start(current_action) }}
|
||||||
{% if current_action.submit_favourite is defined %}
|
{% if current_action.submit_favourite is defined %}
|
||||||
{{ form_widget(current_action.submit_favourite) }}
|
{{ form_widget(current_action.submit_favourite) }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
@ -28,47 +17,64 @@
|
||||||
{% if current_action.reply is defined %}
|
{% if current_action.reply is defined %}
|
||||||
{{ form_widget(current_action.reply) }}
|
{{ form_widget(current_action.reply) }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{{ form_end(current_action) }}
|
{{ form_end(current_action) }}
|
||||||
{% endfor %}
|
{% 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 %}
|
{% endif %}
|
||||||
</div>
|
</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 }}">
|
<section tabindex="0" role="dialog" class="e-content entry-content note-content">
|
||||||
{{ note.getRendered() | raw }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% if hide_attachments is not defined %}
|
<div class="note-text" tabindex="0" title="{{ 'Note text content.' | trans }}">
|
||||||
<div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
|
{{ note.getRendered() | raw }}
|
||||||
{% for attachment in note.getAttachments() %}
|
</div>
|
||||||
{% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
|
|
||||||
{% endfor %}
|
{% if hide_attachments is not defined %}
|
||||||
</div>
|
<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 %}
|
{% endif %}
|
||||||
|
|
||||||
{% if note.getLinks() is not empty %}
|
{% if reply_to is not empty %}
|
||||||
<div tabindex="0" class="note-links" title="{{ 'Shared links.' | trans }}">
|
<hr tabindex="0" title="{{ 'End of this reply' | trans }}">
|
||||||
{% for link in note.getLinks() %}
|
|
||||||
{% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
|
|
||||||
{{ block | raw }}
|
|
||||||
{% endfor %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
{% 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>
|
</div>
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if reply_to is not empty %}
|
|
||||||
<hr tabindex="0" title="{{ 'End of this reply' | trans }}">
|
|
||||||
{% endif %}
|
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -17,60 +17,54 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<nav class='main-nav fg'>
|
<nav class='main-nav'>
|
||||||
<h1>Settings</h1>
|
<h1>Settings</h1>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<details class="section-title-settings">
|
<details class="section-title-settings">
|
||||||
<summary>
|
<summary>
|
||||||
<h2>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
|
<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>
|
<section>
|
||||||
</summary>
|
<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>
|
{% block form_profile %}{% include '/settings/profile.html.twig' %}{% endblock %}
|
||||||
<nav class='set-nav'>
|
</details>
|
||||||
<ul>
|
</li>
|
||||||
<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>
|
<hr>
|
||||||
</summary>
|
|
||||||
|
|
||||||
{% block form_profile %}
|
{% set profile_tabs = handle_event('PopulateProfileSettingsTabs', app.request) %}
|
||||||
{% include '/settings/profile.html.twig' %}
|
{% for tab in profile_tabs %}
|
||||||
{% endblock %}
|
<li>
|
||||||
</details>
|
<details class="section-title-settings">
|
||||||
</li>
|
<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) %}
|
{# <a href="{{ path(tab['route']) }}"
|
||||||
{% for tab in profile_tabs %}
|
class='hover-effect {{ active(tab['route']) }}'>{{ tab['title'] }}</a> #}
|
||||||
<li>
|
|
||||||
<details class="section-title-settings">
|
|
||||||
<summary>
|
|
||||||
<h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
|
||||||
|
|
||||||
<em>{{ tab['desc'] }}</em>
|
</details>
|
||||||
</summary>
|
</li>
|
||||||
|
|
||||||
{% include tab['controller']['_template'] with tab['controller'] only %}
|
<hr>
|
||||||
|
{% endfor %}
|
||||||
{# <a href="{{ path(tab['route']) }}"
|
</ul>
|
||||||
class='hover-effect {{ active(tab['route']) }}'>{{ tab['title'] }}</a> #}
|
</nav>
|
||||||
|
</section>
|
||||||
</details>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</section>
|
|
||||||
</details>
|
</details>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue