xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update tabs for mobile

Browse source
This commit is contained in:
Robert Long 2022-01-21 15:43:03 -08:00
parent d6fb0e836d
commit 48f3f430da
5 changed files with 86 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/Modal.module.css
View file

@ -52,6 +52,12 @@
} }
@media (max-width: 799px) { @media (max-width: 799px) {
.modalHeader {
display: flex;
justify-content: space-between;
padding: 24px 24px 0 24px;
}
.modal.mobileFullScreen { .modal.mobileFullScreen {
position: fixed; position: fixed;
left: 0; left: 0;

2
src/settings/SettingsModal.jsx
View file

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { Modal } from "../Modal"; import { Modal } from "../Modal";
import styles from "./SettingsModal.module.css"; 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 AudioIcon } from "../icons/Audio.svg";
import { ReactComponent as VideoIcon } from "../icons/Video.svg"; import { ReactComponent as VideoIcon } from "../icons/Video.svg";
import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg"; import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";

0
src/Tabs.jsx → src/tabs/Tabs.jsx
View file

36
src/Tabs.module.css → src/tabs/Tabs.module.css
View file

@ -1,15 +1,14 @@
.tabContainer { .tabContainer {
width: 100%;
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column;
} }
.tabList { .tabList {
display: flex; display: flex;
flex-direction: column;
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0 auto 24px auto;
} }
.tab { .tab {
@ -20,14 +19,14 @@
background-color: transparent; background-color: transparent;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 16px; padding: 0 8px;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
.tab > * { .tab > * {
color: var(--textColor4); color: var(--textColor4);
margin-right: 16px; margin: 0 8px 0 0;
} }
.tab svg * { .tab svg * {
@ -57,6 +56,31 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
padding: 0 40px; padding: 0;
overflow-y: auto; 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;
}
}

49
src/tabs/Tabs.stories.jsx Normal file
View file

@ -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 = () => (
<TabContainer>
<TabItem
title={
<>
<AudioIcon width={16} height={16} />
<Body>Audio</Body>
</>
}
>
Audio Tab Content
</TabItem>
<TabItem
title={
<>
<VideoIcon width={16} height={16} />
<Body>Video</Body>
</>
}
>
Video Tab Content
</TabItem>
<TabItem
title={
<>
<DeveloperIcon width={16} height={16} />
<Body>Developer</Body>
</>
}
>
Developer Tab Content
</TabItem>
</TabContainer>
);