[CARDS][Note] Note's 'in reply to' information added, overall polish of feeds templates and proper titles added for every single section that makes up a note

This commit is contained in:
Eliseu Amaro 2022-02-09 18:49:34 +00:00
parent 79bb258ba6
commit 35e907f7b2
No known key found for this signature in database
GPG Key ID: 96DA09D4B97BC2D5
5 changed files with 78 additions and 65 deletions

View File

@ -14,11 +14,11 @@
{% endfor %} {% endfor %}
{% if notes is defined %} {% if notes is defined %}
<header class="feed-header"> <header class="feed-header" title="{{ 'Current page main header' | trans }}">
{% set current_path = app.request.get('_route') %} {% set current_path = app.request.get('_route') %}
{% if page_title is defined %} {% if page_title is defined %}
{% if current_path starts with 'feed_' or 'conversation' in current_path %} {% if current_path starts with 'feed_' or 'conversation' in current_path %}
<h1 class="section-title">{{ page_title | trans }}</h1> <h1 class="section-title" role="heading">{{ page_title | trans }}</h1>
{% endif %} {% endif %}
{% else %} {% else %}
{% if current_path starts with 'search' %} {% if current_path starts with 'search' %}
@ -27,12 +27,12 @@
<h1 class="section-title">{{ 'Notes' | trans }}</h1> <h1 class="section-title">{{ 'Notes' | trans }}</h1>
{% endif %} {% endif %}
{% endif %} {% endif %}
<nav class="feed-actions"> <nav class="feed-actions" title="{{ 'Actions that change how the feed behaves' | trans }}">
<details class="feed-actions-details"> <details class="feed-actions-details" role="group">
<summary> <summary>
{{ icon('filter', 'icon icon-feed-actions') | raw }} {# button-container #} {{ icon('filter', 'icon icon-feed-actions') | raw }} {# button-container #}
</summary> </summary>
<menu class="feed-actions-details-dropdown"> <menu class="feed-actions-details-dropdown" role="toolbar">
{% for block in handle_event('AddFeedActions', app.request, notes is defined and notes is not empty) %} {% for block in handle_event('AddFeedActions', app.request, notes is defined and notes is not empty) %}
{{ block | raw }} {{ block | raw }}
{% endfor %} {% endfor %}
@ -43,15 +43,15 @@
{% if notes is not empty %} {% if notes is not empty %}
{# Backwards compatibility with hAtom 0.1 #} {# Backwards compatibility with hAtom 0.1 #}
<section class="feed h-feed hfeed notes" tabindex="0" role="feed"> <section class="feed h-feed hfeed notes" role="feed" aria-busy="false" title="{{ 'Feed content' | trans }}">
{% for conversation in notes %} {% for conversation in notes %}
{% block current_note %} {% block current_note %}
{% if conversation is instanceof('array') %} {% if conversation is instanceof('array') %}
{{ noteView.note_vanilla(conversation['note'], conversation['replies']) }} {{ noteView.note_vanilla(conversation['note'], conversation['replies'], {'depth': 0}) }}
{% else %} {% else %}
{{ noteView.note_vanilla(conversation) }} {{ noteView.note_vanilla(conversation) }}
{% endif %} {% endif %}
<hr class="hr-replies-end" tabindex="0" title="{{ 'End of note and replies.' | trans }}"> <hr class="hr-replies-end" role="separator" aria-label="{{ 'Marks the end of previous conversation\'s initial note' | trans }}">
{% endblock current_note %} {% endblock current_note %}
{% endfor %} {% endfor %}
</section> </section>

View File

@ -161,16 +161,22 @@
} }
.note-replies-indicator { .note-replies-indicator {
content: '\201C';
font-size: 32px; font-size: 32px;
opacity: 0.66; opacity: 0.66;
margin-right: 8px; margin-right: 8px;
float: left; float: left;
} }
.note-replies-start { .note-replies-indicator::before {
margin-top: var(--s); content: '\201C';
margin-bottom: var(--s); font-size: 1em;
opacity: 0.66;
margin-right: 0.33em;
}
.note-replies-parent {
opacity: 0.66;
font-size: 0.937rem;
} }
.h-entry a:focus { .h-entry a:focus {
@ -239,32 +245,24 @@ embed header {
border-radius: 0 var(--s) 0 0; border-radius: 0 var(--s) 0 0;
display: flex; display: flex;
line-height: initial; line-height: initial;
padding: 4px var(--s) 4px 0; padding: 4px var(--s) 0 0;
} }
.note-info { .note-info {
display: flex; display: flex;
flex-wrap: wrap; align-items: flex-start;
justify-content: space-between;
align-items: center;
}
.note-info-start {
flex: 1;
width: 15px;
white-space: nowrap; white-space: nowrap;
overflow: auto; overflow: auto;
touch-action: manipulation; touch-action: manipulation;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.note-info-start:focus, .note-info .note-conversation-info,
.note-info-start:hover { .note-info .note-author-uri {
text-align: left; margin-left: 4px;
direction: rtl;
} }
.note-info-start small { .note-info small {
opacity: 0.5; opacity: 0.5;
} }
@ -338,7 +336,7 @@ embed header {
.note-content { .note-content {
border-radius: 0 0 var(--s) var(--s); border-radius: 0 0 var(--s) var(--s);
display: block; display: block;
padding: 0 4px 8px 0; padding: 0 0 8px 0;
flex: 1; flex: 1;
} }
@ -349,6 +347,7 @@ embed header {
} }
.hr-replies-end { .hr-replies-end {
margin-top: var(--xl);
margin-bottom: var(--xl); margin-bottom: var(--xl);
} }
@ -414,11 +413,10 @@ embed header {
margin-left: 0.33em; margin-left: 0.33em;
} }
.note-replies-indicator { .note-replies-indicator::before {
content: '\201C'; content: '\201C';
font-size: 1em; font-size: 1em;
opacity: 0.66; opacity: 0.66;
margin-right: 0.33em; margin-right: 0.33em;
float: left;
} }
} }

View File

@ -100,14 +100,14 @@
</header> </header>
{% endblock header %} {% endblock header %}
<main class="page-content-wrapper">
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden" <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
title="{{ 'Press tab to access main content.' | trans }}"></a> title="{{ 'Anchor to main content' | trans }}"></a>
<section class='page-content accessibility-target'> <main class="page-content-wrapper" title="{{ 'Page main content' | trans }}">
<div class='page-content accessibility-target' role="presentation">
{% block nav %}{% endblock %} {% block nav %}{% endblock %}
{% block body %}{% endblock %} {% block body %}{% endblock %}
{% block javascripts %}{% endblock javascripts %} {% block javascripts %}{% endblock javascripts %}
</section> </div>
</main> </main>
</body> </body>
</html> </html>

View File

@ -26,13 +26,18 @@
{% import '/cards/macros/note.html.twig' as noteView %} {% import '/cards/macros/note.html.twig' as noteView %}
{% if replies is defined and replies is not empty %} {% if replies is defined and replies is not empty %}
<section class="note-replies"> <section class="note-replies" title="{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}">
<div class="note-replies-start" tabindex="0" title="{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}"></div> <div class="note-replies-start"></div>
<div class="u-in-reply-to replies"> <div class="u-in-reply-to replies">
{% for conversation in replies %} {% for conversation in replies %}
<hr tabindex="0" title="{{ 'Start of reply' | trans }}"> {% if extra.depth is defined %}
<span class="note-replies-indicator">“</span> {% set depth_increment = {'depth': extra.depth + 1} %}
{{ noteView.note_vanilla(conversation['note'], conversation['replies']) }} {% set parent = {'parent': block('note_author')} %}
{% set extra = extra|merge(depth_increment) %}
{% set extra = extra|merge(parent) %}
{% endif %}
<span class="note-replies-indicator" role="presentation"></span>
{{ noteView.note_vanilla(conversation['note'], conversation['replies'], extra) }}
{% endfor %} {% endfor %}
</div> </div>
</section> </section>
@ -43,7 +48,7 @@
{% if hide_attachments is not defined %} {% if hide_attachments is not defined %}
{% if note.getAttachments() is not empty %} {% if note.getAttachments() is not empty %}
<section class="note-attachments" tabindex="0" <section class="note-attachments" tabindex="0"
title="{{ 'Note attachments.' | trans }}"> title="{{ 'Attachments for this note' | trans }}">
{% for attachment in note.getAttachments() %} {% for attachment in note.getAttachments() %}
{% include 'cards/blocks/attachment.html.twig' with {'attachment': attachment, 'note': note, 'title': attachment.getBestTitle(note)} only %} {% include 'cards/blocks/attachment.html.twig' with {'attachment': attachment, 'note': note, 'title': attachment.getBestTitle(note)} only %}
{% endfor %} {% endfor %}
@ -66,7 +71,7 @@
{% block note_text %} {% block note_text %}
<div class="note-text" tabindex="0" <div class="note-text" tabindex="0"
title="{{ 'Note text content.' | trans }}"> title="{{ 'Main note content' | trans }}">
{% set paragraph_array = note.getRenderedSplit() %} {% set paragraph_array = note.getRenderedSplit() %}
{% if 'conversation' not in app.request.get('_route') and paragraph_array | length > 3 %} {% if 'conversation' not in app.request.get('_route') and paragraph_array | length > 3 %}
<p>{{ paragraph_array[0] | raw }}</p> <p>{{ paragraph_array[0] | raw }}</p>
@ -88,23 +93,18 @@
{% block note_author %} {% block note_author %}
{# Microformat's h-card properties indicates a face icon is a "u-logo" #} {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
<a href="{{ actor_url }}" class="note-author-url u-url" tabindex="0" <a href="{{ actor_url }}" class="note-author-url u-url" role="doc-credit"
title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}"> title="{{ nickname }}{{ '\'s profile' | trans }}">
{% if fullname is not null %} {% if fullname is not null %}{{ fullname }}{% else %}{{ nickname }}{% endif %}
{{ fullname }}
{% else %}
{{ nickname }}
{% endif %}
</a> </a>
<small class="note-author-uri"> <small class="note-author-uri" title="{{ 'Author related permalinks' | trans }}">
<a href="{{ actor_uri }}" <a href="{{ actor_uri }}" class="u-url" title="{{ nickname }} {{ '\'s permalink' | trans }}">{{ mention }}</a>
class="u-url">{{ mention }}</a>
</small> </small>
{% endblock note_author %} {% endblock note_author %}
{% block note_sidebar %} {% block note_sidebar %}
<aside class="note-sidebar"> <aside class="note-sidebar" title="{{ nickname }} {{ 'avatar' | trans }}">
{% set actor_avatar_dimensions = actor.getAvatarDimensions() %} {% set actor_avatar_dimensions = actor.getAvatarDimensions() %}
<img class="u-logo avatar" src="{{ note.getActorAvatarUrl() }}" <img class="u-logo avatar" src="{{ note.getActorAvatarUrl() }}"
alt="{{ nickname }}'s avatar" alt="{{ nickname }}'s avatar"
@ -114,25 +114,30 @@
{% endblock note_sidebar %} {% endblock note_sidebar %}
{% block note_info %} {% block note_info %}
<span class="note-info-start"> <header class="note-info" title="{{ 'Information about note\'s author' | trans }}">
{{ block('note_author') }} {{ block('note_author') }}
<small class="note-conversation-info"> <small class="note-conversation-info" title="{{ 'Conversation related permalinks' | trans }}">
<a href="{{ note.getConversationUrl() }}" <a href="{{ note.getConversationUrl() }}"
title="{{ 'Conversation\'s permalink' | trans }}"
class="note-conversation-url">{{ 'in conversation' | trans }}</a> class="note-conversation-url">{{ 'in conversation' | trans }}</a>
<a href="{{ note.getUrl() }}" <a href="{{ note.getUrl() }}"
title="{{ 'Note\'s permalink' | trans }}"
class="note-url">{{ note.getModified() | ago }}</a> class="note-url">{{ note.getModified() | ago }}</a>
</small> </small>
</span> </header>
{% endblock note_info %} {% endblock note_info %}
{% block note_complementary %} {% block note_complementary %}
<aside title="{{ 'Note\'s complementary information' | trans }}" class="note-complementary"> <aside
title="{{ 'Additional note context information and actions' | trans }}"
class="note-complementary"
role="complementary">
<div class="note-complementary-info"> <div class="note-complementary-info">
{% for complementary_info in handle_event('AppendCardNote', { 'note': note, 'request': app.request }) %} {% for complementary_info in handle_event('AppendCardNote', { 'note': note, 'request': app.request }) %}
{% set actor_count = complementary_info['actors'] | length %} {% set actor_count = complementary_info['actors'] | length %}
{% set counter = 0 %} {% set counter = 0 %}
{% for complementary_info_actor in complementary_info['actors'] %} {% for complementary_info_actor in complementary_info['actors'] %}
<span> <span role="doc-acknowledgments">
{% if app.user is not null %} {% if app.user is not null %}
{% if complementary_info_actor is defined and complementary_info_actor.getNickname() != app.user.nickname %} {% if complementary_info_actor is defined and complementary_info_actor.getNickname() != app.user.nickname %}
<a href="{{ complementary_info_actor.getUrl() }}">{{ complementary_info_actor.getNickname() }}{% if actor_count > 1 and counter < actor_count - 2 %}{{ ', ' | trans }}{% endif %}</a> <a href="{{ complementary_info_actor.getUrl() }}">{{ complementary_info_actor.getNickname() }}{% if actor_count > 1 and counter < actor_count - 2 %}{{ ', ' | trans }}{% endif %}</a>

View File

@ -1,4 +1,4 @@
{% macro note_vanilla(note, replies) %} {% macro note_vanilla(note, replies, extra) %}
{% set actor = note.getActor() %} {% set actor = note.getActor() %}
{% set nickname = actor.getNickname() %} {% set nickname = actor.getNickname() %}
{% set fullname = actor.getFullname() %} {% set fullname = actor.getFullname() %}
@ -7,16 +7,24 @@
{% set mention = mention(actor) %} {% set mention = mention(actor) %}
{% set note_language = note.getNoteLanguageShortDisplay() %} {% set note_language = note.getNoteLanguageShortDisplay() %}
<article id="{{ 'note-anchor-' ~ note.getId() }}" <article
class="h-entry hentry note" lang={{ note.getLanguageLocale() }}> id="{{ 'note-anchor-' ~ note.getId() }}"
class="h-entry hentry note"
lang="{{ note.getLanguageLocale() }}"
title="{{'A note by actor' | trans}} {{ nickname }}"
role="article"
tabindex="0">
{{ block('note_sidebar', 'cards/blocks/note.html.twig') }} {{ block('note_sidebar', 'cards/blocks/note.html.twig') }}
<div class="note-wrapper"> <div class="note-wrapper">
<header class="note-info">
{{ block('note_info', 'cards/blocks/note.html.twig') }} {{ block('note_info', 'cards/blocks/note.html.twig') }}
</header>
<section role="dialog" class="e-content entry-content note-content"> <section class="e-content entry-content note-content" title="{{ 'Note\'s main content' | trans }}">
{% if extra.parent is defined %}
<em class="note-replies-parent" title="{{'Reply with depth' | trans}} {{ extra.depth }}" tabindex="0">
{{'in reply to' | trans}} {{ extra.parent | raw }}
</em>
{% endif %}
{{ block('note_text', 'cards/blocks/note.html.twig') }} {{ block('note_text', 'cards/blocks/note.html.twig') }}
{{ block('note_attachments', 'cards/blocks/note.html.twig') }} {{ block('note_attachments', 'cards/blocks/note.html.twig') }}
{{ block('note_links', 'cards/blocks/note.html.twig') }} {{ block('note_links', 'cards/blocks/note.html.twig') }}
@ -25,7 +33,9 @@
{{ block('note_complementary', 'cards/blocks/note.html.twig') }} {{ block('note_complementary', 'cards/blocks/note.html.twig') }}
</article> </article>
{% if replies is defined %}
{{ block('note_replies', 'cards/blocks/note.html.twig') }} {{ block('note_replies', 'cards/blocks/note.html.twig') }}
{% endif %}
{% endmacro note_vanilla %} {% endmacro note_vanilla %}
{% macro note_compact(note) %} {% macro note_compact(note) %}