From f1caabd296abdec68b394a9c19f9dccf07f354bb Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Sat, 19 Feb 2022 19:18:25 +0000 Subject: [PATCH] [CARDS][Note] Note factory template macro created, allows Notes to be represented with completely different macros/blocks, possible to extend types through additional events. Compact Notes have a max height, content can be scrolled by [CSS] Avatars, and Embed attachments now have a max-block-size which acts independently of image orientation --- .../templates/collection/notes.html.twig | 10 +- .../attachmentRelatedNotes.html.twig | 5 +- public/assets/default_theme/pages/feeds.css | 72 ++++--- public/assets/default_theme/reset.css | 4 +- .../assets/default_theme/widgets/sections.css | 26 ++- templates/cards/blocks/note.html.twig | 5 +- .../blocks/note_compact_wrapper.html.twig | 4 +- templates/cards/macros/note.html.twig | 76 -------- templates/cards/macros/note/factory.html.twig | 40 ++++ templates/cards/macros/note/types.html.twig | 175 ++++++++++++++++++ 10 files changed, 273 insertions(+), 144 deletions(-) delete mode 100644 templates/cards/macros/note.html.twig create mode 100644 templates/cards/macros/note/factory.html.twig create mode 100644 templates/cards/macros/note/types.html.twig diff --git a/components/Collection/templates/collection/notes.html.twig b/components/Collection/templates/collection/notes.html.twig index b646779490..3e0fe7da7c 100644 --- a/components/Collection/templates/collection/notes.html.twig +++ b/components/Collection/templates/collection/notes.html.twig @@ -1,5 +1,5 @@ {% extends 'stdgrid.html.twig' %} -{% import '/cards/macros/note.html.twig' as noteView %} +{% import '/cards/macros/note/factory.html.twig' as NoteFactory %} {% block title %}{% if page_title is defined %}{{ page_title | trans }}{% endif %}{% endblock %} @@ -39,9 +39,11 @@ {% for conversation in notes %} {% block current_note %} {% if conversation is instanceof('array') %} - {{ noteView.note_vanilla(conversation['note'], conversation['replies'], {'depth': 0}) }} - {% else %} - {{ noteView.note_vanilla(conversation) }} + {% set args = { 'type': 'vanilla_full', 'note': conversation['note'], 'replies': conversation['replies'] | default, 'extra': { 'depth': 0 } } %} + {{ NoteFactory.constructor(args) }} +{# {% else %} + {% set args = { 'type': 'vanilla_full', 'note': conversation, 'extra': { 'depth': 0 } } %} + {{ NoteFactory.constructor(args) }}#} {% endif %} {% endblock current_note %} diff --git a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig index 3b0b6b5168..8fb9b49694 100644 --- a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig +++ b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig @@ -1,4 +1,4 @@ -{% import '/cards/macros/note.html.twig' as noteView %} +{% import '/cards/macros/note/factory.html.twig' as NoteFactory %}
@@ -8,6 +8,7 @@
{% for note in related_notes %} - {{ noteView.note_compact(note) }} + {% set args = { 'type': 'vanilla_compact', 'note': note } %} + {{ NoteFactory.constructor(args) }} {% endfor %}
\ No newline at end of file diff --git a/public/assets/default_theme/pages/feeds.css b/public/assets/default_theme/pages/feeds.css index 4885968f53..92595e9c21 100644 --- a/public/assets/default_theme/pages/feeds.css +++ b/public/assets/default_theme/pages/feeds.css @@ -73,15 +73,10 @@ } .embed img { - height: auto; - margin-right: var(--s); - width: 25%; -} - -.embed img { - max-height: min-content; - max-width: min-content; padding: unset; + margin-right: var(--s); + max-block-size: 128px; + width: auto; } .feed-header>h1,.feed-header>h2,.feed-header>h3,.feed-header>h4,.feed-header>h5,.feed-header>h6 { @@ -238,7 +233,6 @@ border-radius: 0 var(--s) 0 0; display: flex; line-height: initial; - padding: 4px var(--s) 0 0; } .note-info { @@ -338,11 +332,6 @@ opacity: .5; } -.hr-replies-end { - margin-top: var(--xl); - margin-bottom: var(--xl); -} - .hr-replies-end:last-of-type { display: none; } @@ -350,19 +339,11 @@ .note-sidebar { display: flex; flex-direction: column; - padding: var(--s); + padding: var(--s) 4px 4px var(--s); } -.note-sidebar>* { - border-radius: 2px; - height: auto; - max-height: 3rem; - max-width: 3rem; - width: 100%; -} - -.note-sidebar img { - background: unset !important; +.note-text { + word-break: break-all; } .note-text a { @@ -389,35 +370,44 @@ .note-wrapper { height: inherit; flex: 1; + padding: 4px; } -.posting-extra .h-entry { - padding: var(--s); +.posting-extra [id|="note-compact"] { border: unset; border-bottom: 1px solid var(--border); } -.posting-extra .note-sidebar { - all: unset; +[id|="note-compact"] .note-wrapper { + padding: var(--s); } -.posting-extra .note-sidebar .avatar { +[id|="note-compact"] .note-sidebar { all: unset; - max-width: 1em; - max-height: 1em; - min-width: 1em; + display: inline-flex; margin-right: 4px; } +[id|="note-compact"] .note-sidebar img, +.note-sidebar img { + background: unset !important; +} + +[id|="note-compact"] hr { + margin-bottom: 4px; + margin-top: 4px; +} + +[id|="note-compact"] { + display: block; + width: 100%; + max-height: 16vh; + word-break: break-all; + overflow: auto; + touch-action: manipulation; +} + @media only screen and (max-width:1280px) { - .note-sidebar { - max-width: min-content !important; - } - - .note-sidebar .avatar { - min-width: var(--xl) !important; - } - .note-replies .note-replies { margin-left: .33em; } diff --git a/public/assets/default_theme/reset.css b/public/assets/default_theme/reset.css index 4836434efa..2add334a22 100644 --- a/public/assets/default_theme/reset.css +++ b/public/assets/default_theme/reset.css @@ -96,8 +96,8 @@ body { } p { - margin-top: 4px; - margin-bottom: 4px; + margin-top: 0; + margin-bottom: var(--s); } h1,h2,h3,h4,h5 { diff --git a/public/assets/default_theme/widgets/sections.css b/public/assets/default_theme/widgets/sections.css index ebc720305f..f4adb5c7e6 100644 --- a/public/assets/default_theme/widgets/sections.css +++ b/public/assets/default_theme/widgets/sections.css @@ -18,16 +18,6 @@ padding: 2px 6px; } -.avatar { - border-radius: 2px; - height: auto; - margin-right: 5px; - max-height: 4rem; - max-width: 4rem; - min-width: var(--xxl); - width: 100%; -} - .button-container { background-color: var(--foreground); border: none !important; @@ -227,7 +217,17 @@ } .profile-info .avatar { - flex: .5; + border-radius: 2px; + height: auto; + + max-block-size: 3em; + width: auto; + margin-right: var(--s); +} + +.avatar { + max-block-size: 2em; + width: auto; } .profile-info section { @@ -281,10 +281,6 @@ mask-image: url(../icons/remove-actor.svg); } -section { - margin-bottom: var(--s); -} - .section-details-subtitle .section-details-subtitle:not(:last-of-type) { margin-bottom: var(--s); } diff --git a/templates/cards/blocks/note.html.twig b/templates/cards/blocks/note.html.twig index a407b3deaf..ce7fbac643 100644 --- a/templates/cards/blocks/note.html.twig +++ b/templates/cards/blocks/note.html.twig @@ -23,7 +23,7 @@ {% endblock note_actions %} {% block note_replies %} - {% import '/cards/macros/note.html.twig' as noteView %} + {% import '/cards/macros/note/factory.html.twig' as NoteFactory %} {% if replies is defined and replies is not empty %}
@@ -37,7 +37,8 @@ {% set extra = extra|merge(parent) %} {% endif %} - {{ noteView.note_vanilla(conversation['note'], conversation['replies'], extra) }} + {% set args = { 'type': 'vanilla_full', 'note': conversation['note'], 'replies': conversation['replies'] | default, 'extra': extra } %} + {{ NoteFactory.constructor(args) }} {% endfor %}
diff --git a/templates/cards/blocks/note_compact_wrapper.html.twig b/templates/cards/blocks/note_compact_wrapper.html.twig index 2c4d710ce9..c87c6b6c58 100644 --- a/templates/cards/blocks/note_compact_wrapper.html.twig +++ b/templates/cards/blocks/note_compact_wrapper.html.twig @@ -1,2 +1,2 @@ -{% from 'cards/macros/note.html.twig' import note_compact %} -{{ note_compact(note) }} \ No newline at end of file +{% from 'cards/macros/note/types.html.twig' import vanilla_compact %} +{{ vanilla_compact({'note': note}) }} \ No newline at end of file diff --git a/templates/cards/macros/note.html.twig b/templates/cards/macros/note.html.twig deleted file mode 100644 index 6e3f9d83bf..0000000000 --- a/templates/cards/macros/note.html.twig +++ /dev/null @@ -1,76 +0,0 @@ -{% macro note_vanilla(note, replies, extra) %} - {% set actor = note.getActor() %} - {% set nickname = actor.getNickname() %} - {% set fullname = actor.getFullname() %} - {% set actor_uri = actor.getUri() %} - {% set actor_url = actor.getUrl() %} - {% set mention = mention(actor) %} - {% set note_language = note.getNoteLanguageShortDisplay() %} - -
- {{ block('note_sidebar', 'cards/blocks/note.html.twig') }} - -
- {{ block('note_info', 'cards/blocks/note.html.twig') }} - -
- {% if extra.parent is defined %} - - {{'in reply to' | trans}} {{ extra.parent | raw }} - - {% 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') }} -
-
- {{ block('note_complementary', '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) %} - {% set actor = note.getActor() %} - {% set nickname = actor.getNickname() %} - {% set fullname = actor.getFullname() %} - {% set actor_uri = actor.getUri() %} - {% set actor_url = actor.getUrl() %} - {% set mention = mention(actor) %} - -
-
-
- {{ block('note_sidebar', 'cards/blocks/note.html.twig') }} - {{ block('note_author', 'cards/blocks/note.html.twig') }} -
- -
- - {{ 'in conversation' | trans }} - {{ note.getModified() | ago }} - -
- {{ block('note_text', 'cards/blocks/note.html.twig') }} -
-
-
-{% endmacro note_compact %} \ No newline at end of file diff --git a/templates/cards/macros/note/factory.html.twig b/templates/cards/macros/note/factory.html.twig new file mode 100644 index 0000000000..e8eefb21d7 --- /dev/null +++ b/templates/cards/macros/note/factory.html.twig @@ -0,0 +1,40 @@ +{# +Note factory constructor + + There are various Note types: + - Vanilla (common type); + + Full; + + Compact; + - Page; + + Full; + + Compact; + + This constructor accepts an array of args, this array may or not contain some elements, depending on the Note + type in question. + However, there's 1 GUARANTEE: + - First element identifies note type via a string; + This string will be compared, when there's a match the contructor delegates its respective macro. + + The array of args passed should have the following structure for the default types: + - Vanilla (common type); + + Full: { 'type': { 'vanilla_full' }, 'note': note, ?'replies': { note, ?replies }, ?'extra': { 'foo': bar }; + + Compact: { 'type': { 'vanilla_compact' }, 'note': note, ?'extra': { 'foo': bar } }; + - Page; + + Full { 'type': { 'page_full' }, 'note': note, ?'replies': { note, ?replies }, ?'extra': { 'foo': bar }; + + Compact { 'type': { 'page_compact' }, 'note': note, ?'extra': { 'foo': bar } }; +#} +{% macro constructor(args) %} + {% import '/cards/macros/note/types.html.twig' as NoteTypes %} + + {% if args.type is same as 'vanilla_full' %} + {{ NoteTypes.vanilla_full(args) }} + {% elseif args.type is same as 'vanilla_compact' %} + {{ NoteTypes.vanilla_compact(args) }} + {% elseif args.type is same as 'page_full' %} + {{ NoteTypes.page_full(args) }} + {% elseif args.type is same as 'page_compact' %} + {{ NoteTypes.page_compact(args) }} + {% else %} + {{ NoteTypes.vanilla_full(args) }} + {% endif %} +{% endmacro constructor %} \ No newline at end of file diff --git a/templates/cards/macros/note/types.html.twig b/templates/cards/macros/note/types.html.twig new file mode 100644 index 0000000000..b44eb6d37c --- /dev/null +++ b/templates/cards/macros/note/types.html.twig @@ -0,0 +1,175 @@ + +{# args: { 'type': { 'vanilla_full' }, 'note': note, ?'replies': { note, ?replies }, ?'extra': { 'foo': bar } #} +{% macro vanilla_full(args) %} + {% set note = args.note %} + {% if args.replies is defined %}{% set replies = args.replies %}{% else %}{% set replies = null %}{% endif %} + {% if args.extra is defined %}{% set extra = args.extra %}{% else %}{% set extra = null %}{% endif %} + + {% set actor = note.getActor() %} + {% set nickname = actor.getNickname() %} + {% set fullname = actor.getFullname() %} + {% set actor_uri = actor.getUri() %} + {% set actor_url = actor.getUrl() %} + {% set mention = mention(actor) %} + {% set note_language = note.getNoteLanguageShortDisplay() %} + +
+ {{ block('note_sidebar', 'cards/blocks/note.html.twig') }} + +
+ {{ block('note_info', 'cards/blocks/note.html.twig') }} + +
+ {% if extra.parent is defined %} + + {{'in reply to' | trans}} {{ extra.parent | raw }} + + {% 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') }} +
+
+ {{ block('note_complementary', 'cards/blocks/note.html.twig') }} +
+ + {% if replies is defined %} + {{ block('note_replies', 'cards/blocks/note.html.twig') }} + {% endif %} +{% endmacro vanilla_full %} + + +{# args: { 'type': { 'vanilla_compact' }, 'note': note, ?'extra': { 'foo': bar } } #} +{% macro vanilla_compact(args) %} + {% set note = args.note %} + {% if args.extra is defined %}{% set extra = args.extra %}{% else %}{% set extra = null %}{% endif %} + + {% set actor = note.getActor() %} + {% set nickname = actor.getNickname() %} + {% set fullname = actor.getFullname() %} + {% set actor_uri = actor.getUri() %} + {% set actor_url = actor.getUrl() %} + {% set mention = mention(actor) %} + +
+
+
+ {{ block('note_sidebar', 'cards/blocks/note.html.twig') }} + {{ block('note_author', 'cards/blocks/note.html.twig') }} +
+ +
+ + {{ 'in conversation' | trans }} + {{ note.getModified() | ago }} + +
+ {{ block('note_text', 'cards/blocks/note.html.twig') }} +
+
+
+{% endmacro vanilla_compact %} + + +{# args: { 'type': { 'page_full' }, 'note': note, ?'replies': { note, ?replies }, ?'extra': { 'foo': bar } #} +{% macro page_full(args) %} + {% set note = args.note %} + {% if args.replies is defined %}{% set replies = args.replies %}{% else %}{% set replies = null %}{% endif %} + {% if args.extra is defined %}{% set extra = args.extra %}{% else %}{% set extra = null %}{% endif %} + + {% set actor = note.getActor() %} + {% set nickname = actor.getNickname() %} + {% set fullname = actor.getFullname() %} + {% set actor_uri = actor.getUri() %} + {% set actor_url = actor.getUrl() %} + {% set mention = mention(actor) %} + {% set note_language = note.getNoteLanguageShortDisplay() %} + +
+ {{ block('note_sidebar', 'cards/blocks/note.html.twig') }} + +
+ {{ block('note_info', 'cards/blocks/note.html.twig') }} + +
+ {% if extra.parent is defined %} + + {{'in reply to' | trans}} {{ extra.parent | raw }} + + {% 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') }} +
+
+ {{ block('note_complementary', 'cards/blocks/note.html.twig') }} +
+ + {% if replies is defined %} + {{ block('note_replies', 'cards/blocks/note.html.twig') }} + {% endif %} +{% endmacro page_full %} + + +{# args: { 'type': { 'page_compact' }, 'note': note, ?'extra': { 'foo': bar } } #} +{% macro page_compact(args) %} + {% set note = args.note %} + {% if args.extra is defined %}{% set extra = args.extra %}{% else %}{% set extra = null %}{% endif %} + + {% set actor = note.getActor() %} + {% set nickname = actor.getNickname() %} + {% set fullname = actor.getFullname() %} + {% set actor_uri = actor.getUri() %} + {% set actor_url = actor.getUrl() %} + {% set mention = mention(actor) %} + +
+
+
+ {{ block('note_sidebar', 'cards/blocks/note.html.twig') }} + {{ block('note_author', 'cards/blocks/note.html.twig') }} +
+ +
+ + {{ 'in conversation' | trans }} + {{ note.getModified() | ago }} + +
+ {{ block('note_text', 'cards/blocks/note.html.twig') }} +
+
+
+{% endmacro page_compact %} \ No newline at end of file