From 652736c300b90138dd45c46a4d978a3a04e2cc04 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Sun, 4 Jul 2021 17:49:44 +0200
Subject: [PATCH] Fix: Fixed detail element in friends list
---
src/components/common/CollapsibleSection.tsx | 10 +++---
src/components/ui/Details.tsx | 37 +++++++++++++++++---
src/pages/friends/Friends.tsx | 2 +-
3 files changed, 37 insertions(+), 12 deletions(-)
diff --git a/src/components/common/CollapsibleSection.tsx b/src/components/common/CollapsibleSection.tsx
index 1f31e21..3b6409f 100644
--- a/src/components/common/CollapsibleSection.tsx
+++ b/src/components/common/CollapsibleSection.tsx
@@ -39,12 +39,10 @@ export default function CollapsibleSection({ id, defaultValue, summary, children
onToggle={e => setState(e.currentTarget.open)}
{...detailsProps}>
<summary>
- <ChevronDown size={20} />
- { summary }
- {/*<Overline type="subtle" className="overline">*/}
- {/*<div className="title">*/}
- {/*</div>*/}
- {/*</Overline>*/}
+ <div class="padding">
+ <ChevronDown size={20} />
+ { summary }
+ </div>
</summary>
{ children }
</Details>
diff --git a/src/components/ui/Details.tsx b/src/components/ui/Details.tsx
index 0a03202..f06a67f 100644
--- a/src/components/ui/Details.tsx
+++ b/src/components/ui/Details.tsx
@@ -9,23 +9,50 @@ export default styled.details<{ sticky?: boolean, large?: boolean }>`
` }
${ props => props.large && css`
- padding: 5px 0;
+ /*padding: 5px 0;*/
+ background: var(--primary-background);
+ color: var(--secondary-foreground);
+
+ .padding { /*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
+ display: flex;
+ align-items: center;
+ padding: 5px 0;
+ margin: 0.8em 0px 0.4em;
+ cursor: pointer;
+ }
` }
outline: none;
- display: flex;
cursor: pointer;
list-style: none;
align-items: center;
transition: .2s opacity;
+
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
&::marker, &::-webkit-details-marker {
display: none;
}
- > svg {
- flex-shrink: 0;
- transition: .2s ease transform;
+ .title {
+ flex-grow: 1;
+ margin-top: 1px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .padding {
+ display: flex;
+ align-items: center;
+
+ > svg {
+ flex-shrink: 0;
+ margin-inline-end: 4px;
+ transition: .2s ease transform;
+ }
}
}
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index 01d3608..d90b5d5 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -118,7 +118,7 @@ export default function Friends() {
id={`friends_${section_id}`}
defaultValue={true}
sticky large
- summary={<Overline type="subtle" className="overline"><Text id={i18n} /> — { list.length }</Overline>}>
+ summary={<div class="title"><Text id={i18n} /> — { list.length }</div>}>
{ list.map(x => <Friend key={x._id} user={x} />) }
</CollapsibleSection>
)
--
GitLab