monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

things

Browse source 
Co-authored-by: daph <d@waal.me>
This commit is contained in:
Insert5StarName 2023-12-03 23:14:27 +01:00
parent 6bb6c60589
commit e49607b225
3 changed files with 120 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
packages/frontend/src/components/SkNote.vue
View file

@ -1198,4 +1198,31 @@ function emitUpdReaction(emoji: string, delta: number) {
.clickToOpen {
cursor: pointer;
}
// thread line
.avatarReplyTo::before {
position: absolute;
content: '';
width: 0px;
height: 28px;
left: 29px;
border-left: 2.5px solid rgb(174, 174, 174);
top: -28px;
}
@container (max-width: 580px) {
.avatarReplyTo::before {
height: 24px;
top: -24px;
left: 25px;
}
}
@container (max-width: 450px) {
.avatarReplyTo::before {
height: 22px;
top: -22px;
left: 23px;
}
}
</style>

40
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -768,7 +768,7 @@ function animatedMFM() {
.renote {
display: flex;
align-items: center;
padding: 16px 32px 8px 32px;
padding: 16px 32px 8px 47px;
line-height: 28px;
white-space: pre;
color: var(--renote);
@ -1080,13 +1080,47 @@ function animatedMFM() {
}
}
// thread line
[class*="threadAncestor"] + .note .noteHeader::before {
position: absolute;
content: '';
width: 0px;
height: 32px;
left: 29px; // todo: adapt for container width
border-left: 2.5px solid #0f0;
left: 29px;
border-left: 2.5px solid rgb(174, 174, 174);
top: -32px;
}
@container (max-width: 580px) {
.renote {
padding-left: 37px;
}
[class*="threadAncestor"] + .note .noteHeader::before {
left: 19px;
}
}
@container (max-width: 500px) {
.renote {
padding-left: 36px;
}
[class*="threadAncestor"] + .note .noteHeader::before {
left: 18px;
}
}
@container (max-width: 480px) {
.renote {
padding-left: 35px;
}
[class*="threadAncestor"] + .note .noteHeader::before {
left: 17px;
}
}
@container (max-width: 450px) {
.renote {
padding-left: 33px;
}
[class*="threadAncestor"] + .note .noteHeader::before {
left: 31px;
}
}
</style>

71
packages/frontend/src/components/SkNoteSub.vue
View file

@ -562,10 +562,6 @@ if (props.detail) {
flex-grow: 1;
border-left: 2.5px solid rgb(174, 174, 174);
margin-left: 29px;
&.threadAncestorLine {
border-color: pink;
}
}
.reply {
@ -603,16 +599,21 @@ if (props.detail) {
}
}
.threadAncestor {
&:not(:first-of-type)::before {
position: absolute;
content: '';
width: 0px;
height: 56px;
left: 61px; // todo: adapt for container width
border-left: 2.5px solid #f00;
top: -28px;
}
.threadAncestor + .threadAncestor::before,
[class*="renote"] + .threadAncestor::before {
position: absolute;
content: '';
width: 0px;
height: 56px;
left: 61px;
border-left: 2.5px solid rgb(174, 174, 174);
top: -28px;
}
// TODO FIX specificity issue
[class*="renote"] + .threadAncestor::before {
height: 36px;
top: -8px;
}
@container (max-width: 580px) {
@ -629,7 +630,18 @@ if (props.detail) {
margin-left: 0;
}
}
@container (max-width: 500px) {
[class*="renote"] + .threadAncestor::before {
height: 31px;
top: -8px;
}
}
@container (max-width: 480px) {
[class*="renote"] + .threadAncestor::before {
height: 0px;
top: -8px;
}
}
@container (max-width: 450px) {
.threadLine, .reply {
margin-left: 23px;
@ -644,5 +656,34 @@ if (props.detail) {
.single {
margin-left: 0;
}
[class*="renote"] + .threadAncestor::before {
height: 22px;
top: 0;
}
}
@container (max-width: 580px) {
.threadAncestor:not(:first-of-type)::before {
left: 51px;
height: 28px;
top: 0;
}
}
@container (max-width: 500px) {
.threadAncestor:not(:first-of-type)::before {
left: 50px;
height: 46px;
top: -23px;
}
}
@container (max-width: 480px) {
.threadAncestor:not(:first-of-type)::before {
left: 49px;
}
}
@container (max-width: 450px) {
.threadAncestor:not(:first-of-type)::before {
left: 47px;
}
}
</style>