GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[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

Browse Source
This commit is contained in:
Eliseu Amaro 2022-02-09 18:49:34 +00:00
parent 79bb258ba6
commit 35e907f7b2
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
5 changed files with 78 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/Collection/templates/collection/notes.html.twig
View File

@ -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>

40
public/assets/default_theme/pages/feeds.css
View File

@ -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;
}
}

10
templates/base.html.twig
View File

@ -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>

51
templates/cards/blocks/note.html.twig
View File

@ -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>

26
templates/cards/macros/note.html.twig
View File

@ -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) %}