From 12b04a98328e51cf06bacf5266f698cff62e574a Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 4 Jul 2021 09:52:34 +0100
Subject: [PATCH] Move details styling into its own component.
---
src/components/ui/Details.tsx | 28 ++++++++++++++++++++++++++++
src/lib/TextAreaAutoSize.tsx | 1 +
src/pages/friends/Friend.module.scss | 27 ---------------------------
src/pages/friends/Friends.tsx | 5 +++--
4 files changed, 32 insertions(+), 29 deletions(-)
create mode 100644 src/components/ui/Details.tsx
diff --git a/src/components/ui/Details.tsx b/src/components/ui/Details.tsx
new file mode 100644
index 0000000..8bf4705
--- /dev/null
+++ b/src/components/ui/Details.tsx
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+export default styled.details`
+ summary {
+ outline: none;
+ list-style: none;
+ transition: .2s opacity;
+
+ &::marker, &::-webkit-details-marker {
+ display: none;
+ }
+
+ svg {
+ flex-shrink: 0;
+ transition: .2s ease transform;
+ }
+ }
+
+ &:not([open]) {
+ summary {
+ opacity: .7;
+ }
+
+ summary svg {
+ transform: rotateZ(-90deg);
+ }
+ }
+`;
diff --git a/src/lib/TextAreaAutoSize.tsx b/src/lib/TextAreaAutoSize.tsx
index bfc515b..c602655 100644
--- a/src/lib/TextAreaAutoSize.tsx
+++ b/src/lib/TextAreaAutoSize.tsx
@@ -23,6 +23,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
const ref = useRef<HTMLTextAreaElement>();
useEffect(() => {
+ if (isTouchscreenDevice) return;
autoFocus && ref.current.focus();
}, [value]);
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index af867b2..fe103bf 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -39,33 +39,6 @@
}
}
- details {
- summary {
- outline: none;
- list-style: none;
- transition: .2s opacity;
-
- &::marker, &::-webkit-details-marker {
- display: none;
- }
-
- svg {
- flex-shrink: 0;
- transition: .2s ease transform;
- }
- }
-
- &:not([open]) {
- summary {
- opacity: .7;
- }
-
- summary svg {
- transform: rotateZ(-90deg);
- }
- }
- }
-
&[data-empty="true"] {
img {
height: 120px;
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index 7ccf476..607f6d8 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -14,6 +14,7 @@ import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regu
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { TextReact } from "../../lib/i18n";
import { Children } from "../../types/Preact";
+import Details from "../../components/ui/Details";
export default function Friends() {
const { openScreen } = useIntermediate();
@@ -112,7 +113,7 @@ export default function Friends() {
if (list.length === 0) return;
return (
- <details open>
+ <Details open>
<summary>
<Overline className={styles.overline} type="subtle">
<ChevronDown size={20} />
@@ -122,7 +123,7 @@ export default function Friends() {
</Overline>
</summary>
{ list.map(x => <Friend key={x._id} user={x} />) }
- </details>
+ </Details>
)
})
}
--
GitLab