[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
parent
79bb258ba6
commit
35e907f7b2
|
|
@ -14,11 +14,11 @@
|
|||
{% endfor %}
|
||||
|
||||
{% 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') %}
|
||||
{% if page_title is defined %}
|
||||
{% 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 %}
|
||||
{% else %}
|
||||
{% if current_path starts with 'search' %}
|
||||
|
|
@ -27,12 +27,12 @@
|
|||
<h1 class="section-title">{{ 'Notes' | trans }}</h1>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<nav class="feed-actions">
|
||||
<details class="feed-actions-details">
|
||||
<nav class="feed-actions" title="{{ 'Actions that change how the feed behaves' | trans }}">
|
||||
<details class="feed-actions-details" role="group">
|
||||
<summary>
|
||||
{{ icon('filter', 'icon icon-feed-actions') | raw }} {# button-container #}
|
||||
</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) %}
|
||||
{{ block | raw }}
|
||||
{% endfor %}
|
||||
|
|
@ -43,15 +43,15 @@
|
|||
|
||||
{% if notes is not empty %}
|
||||
{# 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 %}
|
||||
{% block current_note %}
|
||||
{% if conversation is instanceof('array') %}
|
||||
{{ noteView.note_vanilla(conversation['note'], conversation['replies']) }}
|
||||
{{ noteView.note_vanilla(conversation['note'], conversation['replies'], {'depth': 0}) }}
|
||||
{% else %}
|
||||
{{ noteView.note_vanilla(conversation) }}
|
||||
{% 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 %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -161,16 +161,22 @@
|
|||
}
|
||||
|
||||
.note-replies-indicator {
|
||||
content: '\201C';
|
||||
font-size: 32px;
|
||||
opacity: 0.66;
|
||||
margin-right: 8px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.note-replies-start {
|
||||
margin-top: var(--s);
|
||||
margin-bottom: var(--s);
|
||||
.note-replies-indicator::before {
|
||||
content: '\201C';
|
||||
font-size: 1em;
|
||||
opacity: 0.66;
|
||||
margin-right: 0.33em;
|
||||
}
|
||||
|
||||
.note-replies-parent {
|
||||
opacity: 0.66;
|
||||
font-size: 0.937rem;
|
||||
}
|
||||
|
||||
.h-entry a:focus {
|
||||
|
|
@ -239,32 +245,24 @@ embed header {
|
|||
border-radius: 0 var(--s) 0 0;
|
||||
display: flex;
|
||||
line-height: initial;
|
||||
padding: 4px var(--s) 4px 0;
|
||||
padding: 4px var(--s) 0 0;
|
||||
}
|
||||
|
||||
.note-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.note-info-start {
|
||||
flex: 1;
|
||||
width: 15px;
|
||||
align-items: flex-start;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
touch-action: manipulation;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.note-info-start:focus,
|
||||
.note-info-start:hover {
|
||||
text-align: left;
|
||||
direction: rtl;
|
||||
.note-info .note-conversation-info,
|
||||
.note-info .note-author-uri {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.note-info-start small {
|
||||
.note-info small {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
|
@ -338,7 +336,7 @@ embed header {
|
|||
.note-content {
|
||||
border-radius: 0 0 var(--s) var(--s);
|
||||
display: block;
|
||||
padding: 0 4px 8px 0;
|
||||
padding: 0 0 8px 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
@ -349,6 +347,7 @@ embed header {
|
|||
}
|
||||
|
||||
.hr-replies-end {
|
||||
margin-top: var(--xl);
|
||||
margin-bottom: var(--xl);
|
||||
}
|
||||
|
||||
|
|
@ -414,11 +413,10 @@ embed header {
|
|||
margin-left: 0.33em;
|
||||
}
|
||||
|
||||
.note-replies-indicator {
|
||||
.note-replies-indicator::before {
|
||||
content: '\201C';
|
||||
font-size: 1em;
|
||||
opacity: 0.66;
|
||||
margin-right: 0.33em;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,14 +100,14 @@
|
|||
</header>
|
||||
{% endblock header %}
|
||||
|
||||
<main class="page-content-wrapper">
|
||||
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
|
||||
title="{{ 'Press tab to access main content.' | trans }}"></a>
|
||||
<section class='page-content accessibility-target'>
|
||||
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
|
||||
title="{{ 'Anchor to main content' | trans }}"></a>
|
||||
<main class="page-content-wrapper" title="{{ 'Page main content' | trans }}">
|
||||
<div class='page-content accessibility-target' role="presentation">
|
||||
{% block nav %}{% endblock %}
|
||||
{% block body %}{% endblock %}
|
||||
{% block javascripts %}{% endblock javascripts %}
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -26,13 +26,18 @@
|
|||
{% import '/cards/macros/note.html.twig' as noteView %}
|
||||
|
||||
{% if replies is defined and replies is not empty %}
|
||||
<section class="note-replies">
|
||||
<div class="note-replies-start" tabindex="0" title="{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}"></div>
|
||||
<section class="note-replies" title="{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}">
|
||||
<div class="note-replies-start"></div>
|
||||
<div class="u-in-reply-to replies">
|
||||
{% for conversation in replies %}
|
||||
<hr tabindex="0" title="{{ 'Start of reply' | trans }}">
|
||||
<span class="note-replies-indicator">“</span>
|
||||
{{ noteView.note_vanilla(conversation['note'], conversation['replies']) }}
|
||||
{% if extra.depth is defined %}
|
||||
{% set depth_increment = {'depth': extra.depth + 1} %}
|
||||
{% 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 %}
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -43,7 +48,7 @@
|
|||
{% if hide_attachments is not defined %}
|
||||
{% if note.getAttachments() is not empty %}
|
||||
<section class="note-attachments" tabindex="0"
|
||||
title="{{ 'Note attachments.' | trans }}">
|
||||
title="{{ 'Attachments for this note' | trans }}">
|
||||
{% for attachment in note.getAttachments() %}
|
||||
{% include 'cards/blocks/attachment.html.twig' with {'attachment': attachment, 'note': note, 'title': attachment.getBestTitle(note)} only %}
|
||||
{% endfor %}
|
||||
|
|
@ -66,7 +71,7 @@
|
|||
|
||||
{% block note_text %}
|
||||
<div class="note-text" tabindex="0"
|
||||
title="{{ 'Note text content.' | trans }}">
|
||||
title="{{ 'Main note content' | trans }}">
|
||||
{% set paragraph_array = note.getRenderedSplit() %}
|
||||
{% if 'conversation' not in app.request.get('_route') and paragraph_array | length > 3 %}
|
||||
<p>{{ paragraph_array[0] | raw }}</p>
|
||||
|
|
@ -88,23 +93,18 @@
|
|||
|
||||
{% block note_author %}
|
||||
{# 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"
|
||||
title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}">
|
||||
{% if fullname is not null %}
|
||||
{{ fullname }}
|
||||
{% else %}
|
||||
{{ nickname }}
|
||||
{% endif %}
|
||||
<a href="{{ actor_url }}" class="note-author-url u-url" role="doc-credit"
|
||||
title="{{ nickname }}{{ '\'s profile' | trans }}">
|
||||
{% if fullname is not null %}{{ fullname }}{% else %}{{ nickname }}{% endif %}
|
||||
</a>
|
||||
|
||||
<small class="note-author-uri">
|
||||
<a href="{{ actor_uri }}"
|
||||
class="u-url">{{ mention }}</a>
|
||||
<small class="note-author-uri" title="{{ 'Author related permalinks' | trans }}">
|
||||
<a href="{{ actor_uri }}" class="u-url" title="{{ nickname }} {{ '\'s permalink' | trans }}">{{ mention }}</a>
|
||||
</small>
|
||||
{% endblock note_author %}
|
||||
|
||||
{% block note_sidebar %}
|
||||
<aside class="note-sidebar">
|
||||
<aside class="note-sidebar" title="{{ nickname }} {{ 'avatar' | trans }}">
|
||||
{% set actor_avatar_dimensions = actor.getAvatarDimensions() %}
|
||||
<img class="u-logo avatar" src="{{ note.getActorAvatarUrl() }}"
|
||||
alt="{{ nickname }}'s avatar"
|
||||
|
|
@ -114,25 +114,30 @@
|
|||
{% endblock note_sidebar %}
|
||||
|
||||
{% block note_info %}
|
||||
<span class="note-info-start">
|
||||
<header class="note-info" title="{{ 'Information about note\'s author' | trans }}">
|
||||
{{ block('note_author') }}
|
||||
<small class="note-conversation-info">
|
||||
<small class="note-conversation-info" title="{{ 'Conversation related permalinks' | trans }}">
|
||||
<a href="{{ note.getConversationUrl() }}"
|
||||
title="{{ 'Conversation\'s permalink' | trans }}"
|
||||
class="note-conversation-url">{{ 'in conversation' | trans }}</a>
|
||||
<a href="{{ note.getUrl() }}"
|
||||
title="{{ 'Note\'s permalink' | trans }}"
|
||||
class="note-url">{{ note.getModified() | ago }}</a>
|
||||
</small>
|
||||
</span>
|
||||
</header>
|
||||
{% endblock note_info %}
|
||||
|
||||
{% 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">
|
||||
{% for complementary_info in handle_event('AppendCardNote', { 'note': note, 'request': app.request }) %}
|
||||
{% set actor_count = complementary_info['actors'] | length %}
|
||||
{% set counter = 0 %}
|
||||
{% for complementary_info_actor in complementary_info['actors'] %}
|
||||
<span>
|
||||
<span role="doc-acknowledgments">
|
||||
{% if app.user is not null %}
|
||||
{% 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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% macro note_vanilla(note, replies) %}
|
||||
{% macro note_vanilla(note, replies, extra) %}
|
||||
{% set actor = note.getActor() %}
|
||||
{% set nickname = actor.getNickname() %}
|
||||
{% set fullname = actor.getFullname() %}
|
||||
|
|
@ -7,16 +7,24 @@
|
|||
{% set mention = mention(actor) %}
|
||||
{% set note_language = note.getNoteLanguageShortDisplay() %}
|
||||
|
||||
<article id="{{ 'note-anchor-' ~ note.getId() }}"
|
||||
class="h-entry hentry note" lang={{ note.getLanguageLocale() }}>
|
||||
<article
|
||||
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') }}
|
||||
|
||||
<div class="note-wrapper">
|
||||
<header class="note-info">
|
||||
{{ block('note_info', 'cards/blocks/note.html.twig') }}
|
||||
</header>
|
||||
{{ block('note_info', 'cards/blocks/note.html.twig') }}
|
||||
|
||||
<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_attachments', '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') }}
|
||||
</article>
|
||||
|
||||
{{ block('note_replies', 'cards/blocks/note.html.twig') }}
|
||||
{% if replies is defined %}
|
||||
{{ block('note_replies', 'cards/blocks/note.html.twig') }}
|
||||
{% endif %}
|
||||
{% endmacro note_vanilla %}
|
||||
|
||||
{% macro note_compact(note) %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user