Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add reply connectors, a

Browse Source
This commit is contained in:
Freeplay 2023-02-19 20:12:01 -05:00
parent 66c3ac0654
commit e32bab700d
2 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/src/components/MkNoteFooter.vue
View File

@ -126,7 +126,6 @@ function blur() {
.footer { .footer {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
// margin-top: .4em;
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
> .button { > .button {

46
packages/client/src/components/MkNoteSub.vue
View File

@ -65,10 +65,11 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
<style lang="scss" scoped> <style lang="scss" scoped>
.wrpstxzv { .wrpstxzv {
padding: 16px 32px; padding: 16px 32px;
--divider: rgba(255,255,255,0.5); // for now
&.children { &.children {
padding: 10px 0 0 var(--avatarSize); padding: 10px 0 0 var(--indent);
padding-left: var(--indent) !important;
font-size: 1em; font-size: 1em;
cursor: auto; cursor: auto;
@ -127,8 +128,10 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
} }
} }
&.reply :deep(.footer) {
font-size: .9em;
}
> .reply, > .more { > .reply, > .more {
// border-left: solid 0.5px var(--divider);
margin-top: 10px; margin-top: 10px;
&.single { &.single {
padding: 0 !important; padding: 0 !important;
@ -144,13 +147,14 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
&:first-child { &:first-child {
padding-top: 30px; padding-top: 30px;
} }
> .main > .body { .line::before {
padding-bottom: 16px; margin-bottom: -16px;
} }
} }
// Reply Lines // Reply Lines
&.reply, &.reply-to, &.reply-to-more { &.reply, &.reply-to, &.reply-to-more {
--indent: var(--avatarSize);
> .main { > .main {
> .avatar-container { > .avatar-container {
display: flex; display: flex;
@ -172,15 +176,15 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
&::before { &::before {
content: ""; content: "";
display: block; display: block;
width: 2px; border-left: 2px solid var(--divider);
background-color: var(--divider);
background-color: white; // FOr now
margin-inline: auto; margin-inline: auto;
.note > & {
margin-bottom: -16px;
} }
} }
} }
&.single, &.singleStart {
> .main > .avatar-container > .line::before {
margin-bottom: -10px;
}
} }
.reply:last-child, &.reply:not(.children) { // Hide line in last reply of thread .reply:last-child, &.reply:not(.children) { // Hide line in last reply of thread
> .main:last-child > .avatar-container > .line { > .main:last-child > .avatar-container > .line {
@ -194,11 +198,33 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
&::before {
margin-top: -10px;
}
} }
&:not(.single):not(.singleStart) > .main > .avatar-container > .line { &:not(.single):not(.singleStart) > .main > .avatar-container > .line {
display: none; display: none;
} }
} }
// Reply line connectors
.reply.children:not(.single) {
position: relative;
> .line {
position: absolute;
left: 0;
&::after {
content: "";
position: absolute;
border-left: 2px solid var(--divider);
border-bottom: 2px solid var(--divider);
margin-left: calc(var(--avatarSize) / 2 - 1px);
margin-top: -20px;
width: calc(var(--indent) / 3);
height: calc((var(--avatarSize) / 2) + 20px);
border-bottom-left-radius: calc(var(--indent) / 3);
}
}
}
&.max-width_450px { &.max-width_450px {
padding: 14px 16px; padding: 14px 16px;