logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 8780246ce5566e60520354f5a3de92eacd059f61
parent 61bb69c88f6d70431a72bfb649d0f796b976a83b
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Sun,  8 Aug 2021 12:55:04 -0400

Optimize thread border radius

Diffstat:

Msrc/components/conversation/conversation.vue12+++++++++---
Msrc/components/thread_tree/thread_tree.vue3+--
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 {