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

[CARDS][Note] Note's actions are now inside the same div as Note's complementary info, overall footprint of replies diminished

Browse Source
This commit is contained in:
Eliseu Amaro 2022-02-08 16:13:46 +00:00
parent f6b19d2a0f
commit 80dfea6812
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
2 changed files with 68 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,37 +1,39 @@
.favourite-button-container { .favourite-button-container {
-moz-mask-image: url(../icons/heart.svg); -moz-mask-image: url("../icons/heart.svg");
-o-mask-image: url(../icons/heart.svg); -o-mask-image: url("../icons/heart.svg");
-webkit-mask-image: url(../icons/heart.svg); -webkit-mask-image: url("../icons/heart.svg");
mask-image: url(../icons/heart.svg); mask-image: url("../icons/heart.svg");
} }
.reply-button-container { .reply-button-container {
-moz-mask-image: url(../icons/reply.svg); -moz-mask-image: url("../icons/reply.svg");
-o-mask-image: url(../icons/reply.svg); -o-mask-image: url("../icons/reply.svg");
-webkit-mask-image: url(../icons/reply.svg); -webkit-mask-image: url("../icons/reply.svg");
mask-image: url(../icons/reply.svg); mask-image: url("../icons/reply.svg");
} }
.repeat-button-container { .repeat-button-container {
-moz-mask-image: url(../icons/repeat.svg); -moz-mask-image: url("../icons/repeat.svg");
-o-mask-image: url(../icons/repeat.svg); -o-mask-image: url("../icons/repeat.svg");
-webkit-mask-image: url(../icons/repeat.svg); -webkit-mask-image: url("../icons/repeat.svg");
mask-image: url(../icons/repeat.svg); mask-image: url("../icons/repeat.svg");
} }
.delete-button-container { .delete-button-container {
-moz-mask-image: url(../icons/delete.svg); -moz-mask-image: url("../icons/delete.svg");
-o-mask-image: url(../icons/delete.svg); -o-mask-image: url("../icons/delete.svg");
-webkit-mask-image: url(../icons/delete.svg); -webkit-mask-image: url("../icons/delete.svg");
mask-image: url(../icons/delete.svg); mask-image: url("../icons/delete.svg");
} }
.icon-eye-opened { .icon-eye-opened {
background-color: var(--foreground); background-color: var(--foreground);
-moz-mask-image: url(../icons/eye-opened.svg); -moz-mask-image: url("../icons/eye-opened.svg");
-o-mask-image: url(../icons/eye-opened.svg); -o-mask-image: url("../icons/eye-opened.svg");
-webkit-mask-image: url(../icons/eye-opened.svg); -webkit-mask-image: url("../icons/eye-opened.svg");
mask-image: url(../icons/eye-opened.svg); mask-image: url("../icons/eye-opened.svg");
display: inline-flex; display: inline-flex;
height: 1em; height: 1em;
width: 1em; width: 1em;
@ -39,10 +41,10 @@
.icon-eye-closed { .icon-eye-closed {
background-color: var(--foreground); background-color: var(--foreground);
-moz-mask-image: url(../icons/eye-closed.svg); -moz-mask-image: url("../icons/eye-closed.svg");
-o-mask-image: url(../icons/eye-closed.svg); -o-mask-image: url("../icons/eye-closed.svg");
-webkit-mask-image: url(../icons/eye-closed.svg); -webkit-mask-image: url("../icons/eye-closed.svg");
mask-image: url(../icons/eye-closed.svg); mask-image: url("../icons/eye-closed.svg");
display: inline-flex; display: inline-flex;
height: 1em; height: 1em;
width: 1em; width: 1em;
@ -54,7 +56,8 @@
padding: var(--s); padding: var(--s);
} }
.embed .p-author, .embed .p-name { .embed .p-author,
.embed .p-name {
font-weight: 700; font-weight: 700;
} }
@ -84,15 +87,17 @@
padding: unset; padding: unset;
} }
.feed-actions-details summary, .note-actions-extra-details summary { .feed-actions-details summary,
.note-actions-extra-details summary {
display: block; display: block;
} }
.feed-actions-details-dropdown { .feed-actions-details-dropdown {
font-size: .937rem; font-size: 0.937rem;
} }
.feed-actions-details[open] > .feed-actions-details-dropdown, .note-actions-extra-details[open] > summary + * { .feed-actions-details[open]>.feed-actions-details-dropdown,
.note-actions-extra-details[open]>summary+* {
background: var(--background-card); background: var(--background-card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--s); border-radius: var(--s);
@ -106,7 +111,8 @@
z-index: 1; z-index: 1;
} }
.feed-actions-details[open] > summary, .note-actions-extra-details[open] > summary { .feed-actions-details[open]>summary,
.note-actions-extra-details[open]>summary {
opacity: 1 !important; opacity: 1 !important;
} }
@ -150,23 +156,16 @@
padding: unset; padding: unset;
} }
.u-in-reply-to { .note-replies .note-replies {
display: flex; margin-left: 1em;
} }
.u-in-reply-to > * { .note-replies-indicator {
width: 100%;
}
.u-in-reply-to::before {
content: '\201C'; content: '\201C';
font-size: 32px; font-size: 32px;
opacity: 0.66; opacity: 0.66;
margin-right: var(--s); margin-right: 8px;
} float: left;
.note-replies {
margin-left: var(--xl);
} }
.note-replies-start { .note-replies-start {
@ -225,7 +224,7 @@
padding: 4px; padding: 4px;
} }
.note-attachments-unit > figure figcaption { .note-attachments-unit>figure figcaption {
display: flex; display: flex;
word-break: break-all; word-break: break-all;
} }
@ -242,12 +241,14 @@ embed header {
line-height: initial; line-height: initial;
padding: 4px var(--s) 4px 0; padding: 4px var(--s) 4px 0;
} }
.note-info { .note-info {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.note-info-start { .note-info-start {
flex: 1; flex: 1;
width: 15px; width: 15px;
@ -256,20 +257,26 @@ embed header {
touch-action: manipulation; touch-action: manipulation;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.note-info-start:hover, .note-info-start:focus {
.note-info-start:focus,
.note-info-start:hover {
text-align: left; text-align: left;
direction: rtl; direction: rtl;
} }
.note-info-start small { .note-info-start small {
opacity: 0.5; opacity: 0.5;
} }
.note-author-url { .note-author-url {
font-weight: 700; font-weight: 700;
} }
.note-author-uri, .note-author-uri,
.note-conversation-info { .note-conversation-info {
font-style: italic; font-style: italic;
} }
.note-actions { .note-actions {
display: flex; display: flex;
flex-direction: initial; flex-direction: initial;
@ -277,21 +284,26 @@ embed header {
flex: 1; flex: 1;
align-items: center; align-items: center;
} }
.note-actions > li {
.note-actions>li {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
} }
.note-actions-extra-details ul { .note-actions-extra-details ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.note-actions-extra-details hr { .note-actions-extra-details hr {
margin: unset; margin: unset;
} }
.note-actions-extra-details summary { .note-actions-extra-details summary {
opacity: 0.5; opacity: 0.5;
} }
.note-actions-extra-details[open] > summary + * > a {
.note-actions-extra-details[open]>summary+*>a {
font-size: 0.937rem; font-size: 0.937rem;
line-height: 2; line-height: 2;
} }
@ -307,7 +319,8 @@ embed header {
.note-complementary { .note-complementary {
width: 100%; width: 100%;
display: flex; display: flex;
font-size: .937rem; flex-wrap: wrap;
font-size: 0.937rem;
background: var(--gradient-backwards); background: var(--gradient-backwards);
padding: 4px 8px; padding: 4px 8px;
border-radius: 0 0 var(--s) 0; border-radius: 0 0 var(--s) 0;
@ -330,9 +343,9 @@ embed header {
} }
.note-replies-start { .note-replies-start {
font-size: .937rem; font-size: 0.937rem;
font-weight: 700; font-weight: 700;
opacity: .5; opacity: 0.5;
} }
.hr-replies-end { .hr-replies-end {
@ -345,7 +358,7 @@ embed header {
padding: var(--s); padding: var(--s);
} }
.note-sidebar > * { .note-sidebar>* {
border-radius: 2px; border-radius: 2px;
height: auto; height: auto;
max-height: 3rem; max-height: 3rem;
@ -391,7 +404,9 @@ embed header {
@media only screen and (max-width: 1280px) { @media only screen and (max-width: 1280px) {
.note-sidebar { .note-sidebar {
padding: 4px 6px; max-width: min-content !important;
}
.note-sidebar .avatar {
min-width: var(--xl) !important;
} }
} }

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

@ -30,10 +30,11 @@
<div class="note-replies-start" tabindex="0" title="{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}"></div> <div class="note-replies-start" tabindex="0" title="{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}"></div>
<div class="u-in-reply-to replies"> <div class="u-in-reply-to replies">
{% for conversation in 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']) }} {{ noteView.note_vanilla(conversation['note'], conversation['replies']) }}
{% endfor %} {% endfor %}
</div> </div>
<hr tabindex="0" title="{{ 'End of reply' | trans }}">
</section> </section>
{% endif %} {% endif %}
{% endblock note_replies %} {% endblock note_replies %}