[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
This commit is contained in:
Eliseu Amaro 2022-01-07 21:10:55 +00:00
parent cb1dc4c10f
commit 1438433859
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
8 changed files with 158 additions and 74 deletions

View File

@ -9,16 +9,25 @@
{% endblock stylesheets %}
{% block body %}
<header class="feed-header">
<header class="feed-header">
{% if page_title is defined %}
<h1>{{ page_title | trans }}</h1>
<h1 class="heading-no-margin">{{ page_title | trans }}</h1>
{% endif %}
<nav class="feed-actions">
<details class="feed-actions-details">
<summary>
{{ icon('filter', 'icon icon-feed-actions') | raw }} {# button-container #}
</summary>
<div class="feed-actions-details-dropdown">
<ul>
{% for block in handle_event('AddFeedActions', app.request, notes is defined and notes is not empty) %}
{{ block | raw }}
{% endfor %}
</ul>
</div>
</details>
</nav>
</header>
</header>
{# Backwards compatibility with hAtom 0.1 #}
<main class="feed" tabindex="0" role="feed">

View File

@ -1,3 +1,8 @@
{% for tab in tabs %}
<a {{ tab.active ? 'class="active"' : '' }} href="{{ tab.url }}">{{ tab['icon'] }}</a>
<li>
<a href="{{ tab.url }}" title="{{ tab.active ? ('Hide ' ~ tab['icon']) : ('Show ' ~ tab['icon']) | trans }}">
{{ tab['icon'] }}
<span>{{ icon(tab.active ? 'eye-opened' : 'eye-closed', 'icon') | raw }}</span>
</a>
</li>
{% endfor %}

View File

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

View File

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

View File

@ -1,54 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="drop.svg"
id="svg6"
viewBox="0 0 32 32"
version="1.1">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs10" />
<sodipodi:namedview
inkscape:current-layer="svg6"
inkscape:window-maximized="1"
inkscape:window-y="30"
inkscape:window-x="0"
inkscape:cy="16.019032"
inkscape:cx="16.050301"
inkscape:zoom="27.75"
showgrid="false"
id="namedview8"
inkscape:window-height="1022"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<title
id="title2">drop</title>
<path
style="fill-opacity:1"
id="path4"
d="M16 25.173c-0.823 0-10.695-17.1-10.284-17.813s20.157-0.713 20.568 0c0.411 0.713-9.461 17.813-10.284 17.813z" />
<svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<title>Dropdown icon</title>
<path d="m16 25.173c-0.823 0-10.695-17.1-10.284-17.813s20.157-0.713 20.568 0-9.461 17.813-10.284 17.813z"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 223 B

View File

@ -0,0 +1,10 @@
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}"
viewBox="0 0 24 24"
width="24"
height="24">
<path d="M8.052 5.837A9.715 9.715 0 0112 5c2.955 0 5.309 1.315 7.06 2.864 1.756 1.553 2.866 3.307 3.307 4.08a.11.11 0 01.016.055.122.122 0 01-.017.06 16.766 16.766 0 01-1.53 2.218.75.75 0 101.163.946 18.253 18.253 0 001.67-2.42 1.607 1.607 0 00.001-1.602c-.485-.85-1.69-2.757-3.616-4.46C18.124 5.034 15.432 3.5 12 3.5c-1.695 0-3.215.374-4.552.963a.75.75 0 00.604 1.373z"></path><path fill-rule="evenodd" d="M19.166 17.987C17.328 19.38 14.933 20.5 12 20.5c-3.432 0-6.125-1.534-8.054-3.24C2.02 15.556.814 13.648.33 12.798a1.606 1.606 0 01.001-1.6A18.305 18.305 0 013.648 7.01L1.317 5.362a.75.75 0 11.866-1.224l20.5 14.5a.75.75 0 11-.866 1.224l-2.651-1.875zM4.902 7.898c-1.73 1.541-2.828 3.273-3.268 4.044a.118.118 0 00-.017.059c0 .015.003.034.016.055.441.774 1.551 2.527 3.307 4.08C6.69 17.685 9.045 19 12 19c2.334 0 4.29-.82 5.874-1.927l-3.516-2.487a3.5 3.5 0 01-5.583-3.949L4.902 7.899z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,11 @@
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}"
viewBox="0 0 24 24"
width="24"
height="24">
<path d="M15.5 12a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0z"></path>
<path fill-rule="evenodd" d="M12 3.5c-3.432 0-6.125 1.534-8.054 3.24C2.02 8.445.814 10.352.33 11.202a1.6 1.6 0 000 1.598c.484.85 1.69 2.758 3.616 4.46C5.876 18.966 8.568 20.5 12 20.5c3.432 0 6.125-1.534 8.054-3.24 1.926-1.704 3.132-3.611 3.616-4.461a1.6 1.6 0 000-1.598c-.484-.85-1.69-2.757-3.616-4.46C18.124 5.034 15.432 3.5 12 3.5zM1.633 11.945c.441-.774 1.551-2.528 3.307-4.08C6.69 6.314 9.045 5 12 5c2.955 0 5.309 1.315 7.06 2.864 1.756 1.553 2.866 3.307 3.307 4.08a.111.111 0 01.017.056.111.111 0 01-.017.056c-.441.774-1.551 2.527-3.307 4.08C17.31 17.685 14.955 19 12 19c-2.955 0-5.309-1.315-7.06-2.864-1.756-1.553-2.866-3.306-3.307-4.08A.11.11 0 011.616 12a.11.11 0 01.017-.055z"></path>
</svg>

After

Width:  |  Height:  |  Size: 976 B

View File

@ -0,0 +1,10 @@
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}"
viewBox="0 0 24 24"
width="24"
height="24">
<title>Filter</title>
<path d="M2.75 6a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM6 11.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H6.75a.75.75 0 01-.75-.75zm4 4.938a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75z"></path>
</svg>

After

Width:  |  Height:  |  Size: 461 B