From 1438433859c461d3ba1caaa2c11b48f64d0a1f30 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Fri, 7 Jan 2022 21:10:55 +0000 Subject: [PATCH] [PLUGINS][NoteTypeFeedFilter] Polish feed actions HTML, adding proper anchor titles and better user feedback when a filter in applied [COMPONENTS][Collection] Notes feed template HTML polish to accomodate changes needed for NoteTypeFeedFilter --- .../templates/collection/notes.html.twig | 29 ++++-- .../NoteTypeFeedFilter/tabs.html.twig | 7 +- .../assets/default_theme/css/pages/feeds.css | 98 +++++++++++++++++-- .../default_theme/css/widgets/sections.css | 11 ++- public/assets/default_theme/icons/drop.svg | 56 +---------- public/assets/icons/eye-closed.svg.twig | 10 ++ public/assets/icons/eye-opened.svg.twig | 11 +++ public/assets/icons/filter.svg.twig | 10 ++ 8 files changed, 158 insertions(+), 74 deletions(-) create mode 100644 public/assets/icons/eye-closed.svg.twig create mode 100644 public/assets/icons/eye-opened.svg.twig create mode 100644 public/assets/icons/filter.svg.twig diff --git a/components/Collection/templates/collection/notes.html.twig b/components/Collection/templates/collection/notes.html.twig index 4cb013ed15..82d4c238db 100644 --- a/components/Collection/templates/collection/notes.html.twig +++ b/components/Collection/templates/collection/notes.html.twig @@ -9,16 +9,25 @@ {% endblock stylesheets %} {% block body %} -
- {% if page_title is defined %} -

{{ page_title | trans }}

- {% endif %} - -
+
+ {% if page_title is defined %} +

{{ page_title | trans }}

+ {% endif %} + +
{# Backwards compatibility with hAtom 0.1 #}
diff --git a/plugins/NoteTypeFeedFilter/templates/NoteTypeFeedFilter/tabs.html.twig b/plugins/NoteTypeFeedFilter/templates/NoteTypeFeedFilter/tabs.html.twig index 25bc0ccdc6..03eb4f26b1 100644 --- a/plugins/NoteTypeFeedFilter/templates/NoteTypeFeedFilter/tabs.html.twig +++ b/plugins/NoteTypeFeedFilter/templates/NoteTypeFeedFilter/tabs.html.twig @@ -1,3 +1,8 @@ {% for tab in tabs %} - {{ tab['icon'] }} +
  • + + {{ tab['icon'] }} + {{ icon(tab.active ? 'eye-opened' : 'eye-closed', 'icon') | raw }} + +
    • {% endfor %} diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css index cbbc45f69d..23356ec3f4 100644 --- a/public/assets/default_theme/css/pages/feeds.css +++ b/public/assets/default_theme/css/pages/feeds.css @@ -1,30 +1,36 @@ .feed-header { display: flex; margin-top: var(--m); + margin-bottom: var(--m); + align-items: center; } + .feed-header .feed-actions { + text-transform: capitalize; margin-left: auto; } -.feed-header .feed-actions a { - margin-left: var(--s); -} -.feed-header .feed-actions a:not(.active) { - opacity: 0.33; + +.feed-actions-details-dropdown { + font-size: 0.937rem; } + .notes hr { margin-top: var(--s); } + .note-wrapper { width: 100%; height: inherit; border-radius: var(--s) var(--s) 0 0; } + .note-sidebar { display: flex; flex-direction: column; align-items: center; padding: var(--s); } + .note-sidebar > * { max-width: 4rem; max-height: 4rem; @@ -32,63 +38,79 @@ height: auto; border-radius: 2px; } + .note-sidebar img { background: unset !important; } + .h-entry:not(:first-child) { margin-top: var(--s); } + .h-entry:not(embed) { box-shadow: inset 0 0 0 2px var(--border); } + .h-entry img { background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round; } + .h-entry[id^="note-anchor-"]:target { border: 2px solid var(--accent) !important; } + .embed { display: flex; flex-wrap: wrap; padding: var(--s); border: unset; } + .embed header { width: 100%; margin-bottom: var(--m); } + .embed img { width: 25%; height: auto; margin-right: var(--s); } + .embed .p-summary { width: 60%; } + .embed .p-author, .embed .p-name { font-weight: bold; } + .embed img { padding: unset; max-width: min-content; max-height: min-content; } + .embed .p-summary hr { margin-top: var(--s); margin-bottom: var(--s); } + .h-entry .embed[class*="p-"] { padding: unset; } + .h-entry a:focus { text-decoration: underline; } + .h-entry { display: flex; border-radius: var(--s); background-color: var(--background-card) !important; } + .h-entry figure { margin: unset; object-fit: cover; @@ -96,16 +118,19 @@ background: var(--gradient); border-radius: var(--s); } + .h-entry .replies { margin-bottom: var(--s); padding: 0 var(--s) 0 var(--s); border-left: 1px solid var(--border); } + .note-replies-start { font-size: 0.937rem; font-weight: 700; opacity: 0.5; } + .note-info, embed header { display: flex; @@ -114,91 +139,126 @@ embed header { line-height: initial; padding: 8px var(--s) 8px 0; } + .note-info { margin-top: 2px; margin-right: 2px; background: var(--gradient-backwards); } + .note-info > * { align-items: center; } + .note-info-start { display: flex; flex-wrap: wrap; } + .note-info-start > * { word-break: break-all; } + .note-conversation-info { margin-left: 4px; } + .note-author-url, .note-conversation-url, .note-url { font-style: italic; } + embed header { justify-content: space-between; } + .note-author-url { float: left; margin-left: 4px; } + .note-author-nickname, .note-conversation-info { opacity: 0.5; } + .note-author-fullname { font-weight: bold; } + .note-actions { display: flex; align-items: center; margin-left: auto; } + .note-actions ul { display: flex; vertical-align: middle; } + .note-actions ul > li { margin-left: 8px; } + .note-actions-extra-details { display: flex; flex-direction: column; } + +.feed-actions-details summary, .note-actions-extra-details summary { display: block; - opacity: 0.33; width: var(--unit); height: var(--unit); } + +.note-actions-extra-details summary { + opacity: 0.33; +} + +.feed-actions-details[open] > summary, .note-actions-extra-details[open] > summary { opacity: 1 !important; } + +.feed-actions-details[open] > .feed-actions-details-dropdown, .note-actions-extra-details[open] > summary + * { z-index: 1; display: flex; position: absolute; right: 0; flex-direction: column; - padding: var(--s); + padding: 4px 8px; border: 2px solid var(--border); border-radius: var(--s); background: var(--background-card); box-shadow: var(--shadow); width: max-content; } +.feed-actions-details[open] svg { + width: 1em; + height: auto; +} +.feed-actions-details[open] > .feed-actions-details-dropdown a span { + margin-left: 4px; + float: right; +} + .note-actions-extra-details[open] > summary + * > li { line-height: 2; + font-size: 0.937rem; } .note-actions-extra-details hr { margin: 8px !important; } + .note-actions-set { opacity: 1 !important; } + .button-container { border: none !important; mask-repeat: no-repeat !important; @@ -209,9 +269,11 @@ embed header { background-color: var(--foreground); opacity: 0.33; } + .button-container:not(:first-of-type) { margin-left: var(--s); } + .button-container:focus, .button-container:hover { border: none !important; @@ -220,60 +282,71 @@ embed header { opacity: 1; background-color: var(--accent); } + .favourite-button-container { -o-mask-image: url("../../icons/heart.svg"); -moz-mask-image: url("../../icons/heart.svg"); -webkit-mask-image: url("../../icons/heart.svg"); mask-image: url("../../icons/heart.svg"); } + .reply-button-container { -o-mask-image: url("../../icons/reply.svg"); -moz-mask-image: url("../../icons/reply.svg"); -webkit-mask-image: url("../../icons/reply.svg"); mask-image: url("../../icons/reply.svg"); } + .repeat-button-container { -o-mask-image: url("../../icons/repeat.svg"); -moz-mask-image: url("../../icons/repeat.svg"); -webkit-mask-image: url("../../icons/repeat.svg"); mask-image: url("../../icons/repeat.svg"); } + .delete-button-container { -o-mask-image: url("../../icons/delete.svg"); -moz-mask-image: url("../../icons/delete.svg"); -webkit-mask-image: url("../../icons/delete.svg"); mask-image: url("../../icons/delete.svg"); } + .note-content { display: flex; flex-direction: column; border-radius: 0 0 var(--s) var(--s); padding: 0 var(--s) var(--s) 0; } + .note-text a { text-decoration: underline !important; } + .note-attachments { display: flex; justify-items: flex-start; } + .note-attachments-unit { display: flex; flex-wrap: wrap; max-width: max-content; border-radius: var(--s); padding: var(--s); - align-self:flex-start; + align-self: flex-start; background-color: var(--background-card) !important; } + .note-attachments-unit:not(:only-child) { margin-right: var(--s); } + .note-attachments-unit > figure figcaption { display: flex; word-break: break-all; margin-bottom: var(--s); } + .note-complementary { font-size: 0.937rem; border-left: 2px solid var(--accent); @@ -284,12 +357,15 @@ embed header { margin-right: var(--s); background: var(--gradient) !important; } + .note-complementary a { font-weight: bold; } + .note-complementary:last-of-type { margin-bottom: var(--s); } + .h-entry-language { position: relative; float: right; @@ -298,10 +374,12 @@ embed header { color: var(--foreground); border-radius: 0 0 var(--s) 0; } + .feed-empty { display: flex; flex-direction: column; } + .feed-empty .feed-background { opacity: 3%; width: 40%; @@ -312,13 +390,15 @@ embed header { } /* < 720p */ -@media only screen and (max-width:1280px) { +@media only screen and (max-width: 1280px) { .note-sidebar { padding: 8px 2px 0 2px; } + .note-sidebar .avatar { width: 60%; } + .button-container { width: 0.937rem; height: 0.937rem; diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css index a4fa88ab3c..a1ce51e076 100644 --- a/public/assets/default_theme/css/widgets/sections.css +++ b/public/assets/default_theme/css/widgets/sections.css @@ -31,6 +31,8 @@ align-self: center; margin-left: auto; text-align: right; + font-size: 0.937rem; + opacity: 0.66; } .profile-stats-subscriptions, .profile-stats-subscribers { @@ -145,7 +147,7 @@ background: var(--gradient); padding: 2px 8px; } -.section-widget-subtitle-details summary { +.section-form .section-widget-subtitle-details summary { border: 2px solid var(--border); } .section-widget-title-details summary, @@ -169,6 +171,8 @@ display: flex; } .section-subtitle-summary ~ [class|="form-row"] { + font-size: 0.937rem; + max-font-size: 0.937rem !important; padding: var(--s); } .section-subtitle-summary strong, @@ -183,9 +187,14 @@ .section-title-summary svg:last-child { margin-left: 4px; } +.section-widget-subtitle-details .section-widget-subtitle-details:not(:last-of-type) { + margin-bottom: var(--s); +} .section-form { display: flex; flex-direction: column; + background-color: var(--background-hard); + border-radius: var(--s); max-width: 100%; width: 100%; padding: var(--s); diff --git a/public/assets/default_theme/icons/drop.svg b/public/assets/default_theme/icons/drop.svg index 7d1262813b..c9b9a096d0 100644 --- a/public/assets/default_theme/icons/drop.svg +++ b/public/assets/default_theme/icons/drop.svg @@ -1,54 +1,4 @@ - - - - - - image/svg+xml - - - - - - - drop - + + Dropdown icon + diff --git a/public/assets/icons/eye-closed.svg.twig b/public/assets/icons/eye-closed.svg.twig new file mode 100644 index 0000000000..fdcb824107 --- /dev/null +++ b/public/assets/icons/eye-closed.svg.twig @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/public/assets/icons/eye-opened.svg.twig b/public/assets/icons/eye-opened.svg.twig new file mode 100644 index 0000000000..80178750b5 --- /dev/null +++ b/public/assets/icons/eye-opened.svg.twig @@ -0,0 +1,11 @@ + + + + + + + diff --git a/public/assets/icons/filter.svg.twig b/public/assets/icons/filter.svg.twig new file mode 100644 index 0000000000..44ce52193b --- /dev/null +++ b/public/assets/icons/filter.svg.twig @@ -0,0 +1,10 @@ + + + + Filter + + \ No newline at end of file