[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:
parent
79bb258ba6
commit
35e907f7b2
|
@ -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>
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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="{{ 'Anchor to main content' | trans }}"></a>
|
||||||
title="{{ 'Press tab to access main content.' | trans }}"></a>
|
<main class="page-content-wrapper" title="{{ 'Page main content' | trans }}">
|
||||||
<section class='page-content accessibility-target'>
|
<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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
{{ block('note_replies', 'cards/blocks/note.html.twig') }}
|
{% if replies is defined %}
|
||||||
|
{{ block('note_replies', 'cards/blocks/note.html.twig') }}
|
||||||
|
{% endif %}
|
||||||
{% endmacro note_vanilla %}
|
{% endmacro note_vanilla %}
|
||||||
|
|
||||||
{% macro note_compact(note) %}
|
{% macro note_compact(note) %}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user