thomate/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Packages Projects Releases Wiki Activity

Remove horizontal border and thicken vertical border in a thread tree

Browse source
This commit is contained in:
Tusooa Zhu 2021-08-10 21:28:13 -04:00
parent 0e4a7c3d05
commit 4adffb4835
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
2 changed files with 7 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/conversation/conversation.vue
View file

@ -142,36 +142,14 @@
/* HACK: we want the border width to scale with the status *below it* */ /* HACK: we want the border width to scale with the status *below it* */
.conversation-status { .conversation-status {
border-top-width: 1px; border-bottom-width: 1px;
border-top-style: solid; border-bottom-style: solid;
border-top-color: var(--border, $fallback--border); border-bottom-color: var(--border, $fallback--border);
border-radius: 0; border-radius: 0;
} }
&.-expanded .conversation-body .thread-tree:nth-child(1) > .conversation-status { &.-expanded .thread-tree .conversation-status {
border-top-left-radius: $fallback--panelRadius; border-bottom: none;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
}
/* first element in a reply tree, the border is supplied by reply tree instead
for radius to display properly
*/
&.-expanded .conversation-body {
.conversation-undive-box:nth-child(1),
& > .conversation-status:nth-child(1),
& > .thread-body:nth-child(1) > .thread-tree:nth-child(1) > .conversation-status:nth-child(1),
.thread-tree:nth-child(1) > .conversation-status:nth-child(1) {
border-top: none;
}
}
/* first unexpanded statuses in timeline */
&:first-child:not(.-expanded) {
.conversation-body {
.conversation-status {
border-top: none;
}
}
} }
/* expanded conversation in timeline */ /* expanded conversation in timeline */

7
src/components/thread_tree/thread_tree.vue
View file

@ -110,15 +110,12 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.thread-tree-replies { .thread-tree-replies {
margin-left: $status-margin; margin-left: $status-margin;
border-left: 1px solid var(--border, $fallback--border); border-left: 2px solid var(--border, $fallback--border);
border-top: 1px solid var(--border, $fallback--border);
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
} }
.thread-tree-replies-hidden { .thread-tree-replies-hidden {
padding: $status-margin; padding: $status-margin;
border-top: 1px solid var(--border, $fallback--border); //border-top: 1px solid var(--border, $fallback--border);
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
display: flex; display: flex;
align-items: stretch; align-items: stretch;