Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Optimize thread border radius

Browse source
This commit is contained in:
Tusooa Zhu 2021-08-08 12:55:04 -04:00
parent 61bb69c88f
commit 8780246ce5
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
2 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -130,10 +130,13 @@
.Conversation { .Conversation {
.conversation-undive-box { .conversation-undive-box {
padding: $status-margin; 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* */ /* HACK: we want the border width to scale with the status *below it* */
.conversation-undive-box,
.conversation-status { .conversation-status {
border-top-width: 1px; border-top-width: 1px;
border-top-style: solid; border-top-style: solid;
@ -146,11 +149,14 @@
border-top-left-radius: var(--panelRadius, $fallback--panelRadius); 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 { &.-expanded .conversation-body {
.conversation-undive-box:nth-child(1), .conversation-undive-box:nth-child(1),
& > .conversation-status: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; border-top: none;
} }
} }

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

@ -111,10 +111,9 @@
.thread-tree-replies { .thread-tree-replies {
margin-left: $status-margin; margin-left: $status-margin;
border-left: 1px solid var(--border, $fallback--border); 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: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $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 { .thread-tree-replies-hidden {