graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-23 01:23:08 +02:00
Code Issues Projects Releases Packages Wiki 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 { .clickToOpen {
cursor: pointer; 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> </style>

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

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

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

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