chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved preliminar support for threaded replies

Browse source
This commit is contained in:
Niléane 2023-07-29 22:18:02 +02:00
commit 59cf407f98
No known key found for this signature in database
4 changed files with 74 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

41
TangerineUI-purple.css
View file

@ -778,11 +778,13 @@ body.layout-single-column {
} }
} }
.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper,
.layout-single-column .explore__search-results > div:first-child > .status__wrapper { .layout-single-column .explore__search-results > div:first-child > .status__wrapper {
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
} }
.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper {
border-bottom: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines);
} }
@ -791,19 +793,21 @@ body.layout-single-column {
} }
@media screen and (min-width:890px) { @media screen and (min-width:890px) {
.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper,
.layout-single-column .explore__search-results > div:first-child > .status__wrapper { .layout-single-column .explore__search-results > div:first-child > .status__wrapper {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { .layout-single-column .scrollable > div:last-child > .status__wrapper,
border-bottom-right-radius: 8px; .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper {
border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
} border-bottom-left-radius: 8px;
.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { }
border-top-left-radius: 0; .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper {
border-top-right-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0;
} }
} }
@media screen and (min-width:890px) and (max-width:1174px) { @media screen and (min-width:890px) and (max-width:1174px) {
@ -907,15 +911,18 @@ body.layout-single-column {
position: absolute; position: absolute;
top: 0; top: 0;
width: 0; width: 0;
height: 14px;
}
.layout-single-column .status__line.status__line--full {
height: 100%;
} }
.layout-single-column .status__line--full:before { .layout-single-column .status__line--full:before {
background: var(--color-accent-bg); background: transparent;
inset-inline-start: -3px;
width: 3px;
} }
.layout-single-column .status__line.status__line--full.status__line--first { @media screen and (max-width:889px) {
top: 58px; .layout-single-column .status--in-thread .status__line {
height: calc(100% - 58px); inset-inline-start: 39px;
}
} }
/* ⏺️ Posts when in focus */ /* ⏺️ Posts when in focus */

19
TangerineUI.css
View file

@ -778,11 +778,13 @@ body.layout-single-column {
} }
} }
.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper,
.layout-single-column .explore__search-results > div:first-child > .status__wrapper { .layout-single-column .explore__search-results > div:first-child > .status__wrapper {
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
} }
.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper {
border-bottom: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines);
} }
@ -791,12 +793,14 @@ body.layout-single-column {
} }
@media screen and (min-width:890px) { @media screen and (min-width:890px) {
.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper,
.layout-single-column .explore__search-results > div:first-child > .status__wrapper { .layout-single-column .explore__search-results > div:first-child > .status__wrapper {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper {
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
@ -907,15 +911,18 @@ body.layout-single-column {
position: absolute; position: absolute;
top: 0; top: 0;
width: 0; width: 0;
height: 14px;
}
.layout-single-column .status__line.status__line--full {
height: 100%;
} }
.layout-single-column .status__line--full:before { .layout-single-column .status__line--full:before {
background: var(--color-accent-bg); background: transparent;
inset-inline-start: -3px;
width: 3px;
} }
.layout-single-column .status__line.status__line--full.status__line--first { @media screen and (max-width:889px) {
top: 58px; .layout-single-column .status--in-thread .status__line {
height: calc(100% - 58px); inset-inline-start: 39px;
}
} }
/* ⏺️ Posts when in focus */ /* ⏺️ Posts when in focus */

41
mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
View file

@ -778,11 +778,13 @@ body.layout-single-column {
} }
} }
.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper,
.layout-single-column .explore__search-results > div:first-child > .status__wrapper { .layout-single-column .explore__search-results > div:first-child > .status__wrapper {
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
} }
.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper {
border-bottom: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines);
} }
@ -791,19 +793,21 @@ body.layout-single-column {
} }
@media screen and (min-width:890px) { @media screen and (min-width:890px) {
.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper,
.layout-single-column .explore__search-results > div:first-child > .status__wrapper { .layout-single-column .explore__search-results > div:first-child > .status__wrapper {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { .layout-single-column .scrollable > div:last-child > .status__wrapper,
border-bottom-right-radius: 8px; .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper {
border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
} border-bottom-left-radius: 8px;
.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { }
border-top-left-radius: 0; .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper {
border-top-right-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0;
} }
} }
@media screen and (min-width:890px) and (max-width:1174px) { @media screen and (min-width:890px) and (max-width:1174px) {
@ -907,15 +911,18 @@ body.layout-single-column {
position: absolute; position: absolute;
top: 0; top: 0;
width: 0; width: 0;
height: 14px;
}
.layout-single-column .status__line.status__line--full {
height: 100%;
} }
.layout-single-column .status__line--full:before { .layout-single-column .status__line--full:before {
background: var(--color-accent-bg); background: transparent;
inset-inline-start: -3px;
width: 3px;
} }
.layout-single-column .status__line.status__line--full.status__line--first { @media screen and (max-width:889px) {
top: 58px; .layout-single-column .status--in-thread .status__line {
height: calc(100% - 58px); inset-inline-start: 39px;
}
} }
/* ⏺️ Posts when in focus */ /* ⏺️ Posts when in focus */

19
mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
View file

@ -778,11 +778,13 @@ body.layout-single-column {
} }
} }
.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper,
.layout-single-column .explore__search-results > div:first-child > .status__wrapper { .layout-single-column .explore__search-results > div:first-child > .status__wrapper {
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
} }
.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper {
border-bottom: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines);
} }
@ -791,12 +793,14 @@ body.layout-single-column {
} }
@media screen and (min-width:890px) { @media screen and (min-width:890px) {
.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div:first-child > .status__wrapper,
.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper,
.layout-single-column .explore__search-results > div:first-child > .status__wrapper { .layout-single-column .explore__search-results > div:first-child > .status__wrapper {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div:last-child > .status__wrapper,
.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper {
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
@ -907,15 +911,18 @@ body.layout-single-column {
position: absolute; position: absolute;
top: 0; top: 0;
width: 0; width: 0;
height: 14px;
}
.layout-single-column .status__line.status__line--full {
height: 100%;
} }
.layout-single-column .status__line--full:before { .layout-single-column .status__line--full:before {
background: var(--color-accent-bg); background: transparent;
inset-inline-start: -3px;
width: 3px;
} }
.layout-single-column .status__line.status__line--full.status__line--first { @media screen and (max-width:889px) {
top: 58px; .layout-single-column .status--in-thread .status__line {
height: calc(100% - 58px); inset-inline-start: 39px;
}
} }
/* ⏺️ Posts when in focus */ /* ⏺️ Posts when in focus */