commit: 8780246ce5566e60520354f5a3de92eacd059f61
parent 61bb69c88f6d70431a72bfb649d0f796b976a83b
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 8 Aug 2021 12:55:04 -0400
Optimize thread border radius
Diffstat:
2 files changed, 10 insertions(+), 5 deletions(-)
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
@@ -130,10 +130,13 @@
.Conversation {
.conversation-undive-box {
padding: $status-margin;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: var(--border, $fallback--border);
+ border-radius: 0;
}
/* HACK: we want the border width to scale with the status *below it* */
- .conversation-undive-box,
.conversation-status {
border-top-width: 1px;
border-top-style: solid;
@@ -146,11 +149,14 @@
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
}
- /* first element in conversation body */
+ /* 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-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;
}
}
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
@@ -111,10 +111,9 @@
.thread-tree-replies {
margin-left: $status-margin;
border-left: 1px 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);
- border-bottom-left-radius: $fallback--panelRadius;
- border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
}
.thread-tree-replies-hidden {