[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:
parent
cb1dc4c10f
commit
1438433859
GPG Key ID:
96DA09D4B97BC2D5
@ -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">
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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 |
10
public/assets/icons/eye-closed.svg.twig
Normal file
10
public/assets/icons/eye-closed.svg.twig
Normal 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 |
11
public/assets/icons/eye-opened.svg.twig
Normal file
11
public/assets/icons/eye-opened.svg.twig
Normal 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 |
10
public/assets/icons/filter.svg.twig
Normal file
10
public/assets/icons/filter.svg.twig
Normal 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 |
Loading…
Reference in New Issue
Block a user