From 48f3f430da8e98c26824f1db149372f95aa800b5 Mon Sep 17 00:00:00 2001 From: Robert Long Date: Fri, 21 Jan 2022 15:43:03 -0800 Subject: [PATCH] Update tabs for mobile --- src/Modal.module.css | 6 +++++ src/settings/SettingsModal.jsx | 2 +- src/{ => tabs}/Tabs.jsx | 0 src/{ => tabs}/Tabs.module.css | 36 ++++++++++++++++++++----- src/tabs/Tabs.stories.jsx | 49 ++++++++++++++++++++++++++++++++++ 5 files changed, 86 insertions(+), 7 deletions(-) rename src/{ => tabs}/Tabs.jsx (100%) rename src/{ => tabs}/Tabs.module.css (64%) create mode 100644 src/tabs/Tabs.stories.jsx diff --git a/src/Modal.module.css b/src/Modal.module.css index 53c4314..bf654d2 100644 --- a/src/Modal.module.css +++ b/src/Modal.module.css @@ -52,6 +52,12 @@ } @media (max-width: 799px) { + .modalHeader { + display: flex; + justify-content: space-between; + padding: 24px 24px 0 24px; + } + .modal.mobileFullScreen { position: fixed; left: 0; diff --git a/src/settings/SettingsModal.jsx b/src/settings/SettingsModal.jsx index 0c694c6..984453d 100644 --- a/src/settings/SettingsModal.jsx +++ b/src/settings/SettingsModal.jsx @@ -1,7 +1,7 @@ import React from "react"; import { Modal } from "../Modal"; import styles from "./SettingsModal.module.css"; -import { TabContainer, TabItem } from "../Tabs"; +import { TabContainer, TabItem } from "../tabs/Tabs"; import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; import { ReactComponent as VideoIcon } from "../icons/Video.svg"; import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg"; diff --git a/src/Tabs.jsx b/src/tabs/Tabs.jsx similarity index 100% rename from src/Tabs.jsx rename to src/tabs/Tabs.jsx diff --git a/src/Tabs.module.css b/src/tabs/Tabs.module.css similarity index 64% rename from src/Tabs.module.css rename to src/tabs/Tabs.module.css index 39cec01..8a09ee3 100644 --- a/src/Tabs.module.css +++ b/src/tabs/Tabs.module.css @@ -1,15 +1,14 @@ .tabContainer { - width: 100%; display: flex; flex: 1; + flex-direction: column; } .tabList { display: flex; - flex-direction: column; list-style: none; padding: 0; - margin: 0; + margin: 0 auto 24px auto; } .tab { @@ -20,14 +19,14 @@ background-color: transparent; display: flex; align-items: center; - padding: 0 16px; + padding: 0 8px; border: none; cursor: pointer; } .tab > * { color: var(--textColor4); - margin-right: 16px; + margin: 0 8px 0 0; } .tab svg * { @@ -57,6 +56,31 @@ display: flex; flex-direction: column; flex: 1; - padding: 0 40px; + padding: 0; overflow-y: auto; } + +@media (min-width: 800px) { + .tab { + padding: 0 16px; + } + + .tab > * { + margin: 0 16px 0 0; + } + + .tabContainer { + width: 100%; + flex-direction: row; + margin: 0 0 44px 0; + } + + .tabList { + flex-direction: column; + margin-bottom: 0; + } + + .tabPanel { + padding: 0 40px; + } +} diff --git a/src/tabs/Tabs.stories.jsx b/src/tabs/Tabs.stories.jsx new file mode 100644 index 0000000..0903e11 --- /dev/null +++ b/src/tabs/Tabs.stories.jsx @@ -0,0 +1,49 @@ +import React from "react"; +import { TabContainer, TabItem } from "./Tabs"; +import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; +import { ReactComponent as VideoIcon } from "../icons/Video.svg"; +import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg"; +import { Body } from "../typography/Typography"; + +export default { + title: "Tabs", + component: TabContainer, + parameters: { + layout: "fullscreen", + }, +}; + +export const Tabs = () => ( + + + + Audio + + } + > + Audio Tab Content + + + + Video + + } + > + Video Tab Content + + + + Developer + + } + > + Developer Tab Content + + +);