coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: Standardized headers (#1883)

Browse Source 
* feat: Collection to standard header
feat: Sticky tabs

* chore: Document to standard header

* chore: Dashboard -> Home
chore: Scene component

* chore: Trash, Templates, Drafts

* fix: Mobile improvements

* fix: Content showing at sides and occassionally ontop of sticky headers
This commit is contained in:
Tom Moor
2021-02-14 13:18:33 -08:00
committed by GitHub
parent 32a298054d
commit 4b603460cb
22 changed files with 711 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/components/Tabs.js
View File

@ -1,16 +1,27 @@
// @flow
import * as React from "react";
import styled from "styled-components";
const Tabs = styled.nav`
position: relative;
const Nav = styled.nav`
border-bottom: 1px solid ${(props) => props.theme.divider};
margin-top: 22px;
margin-bottom: 12px;
margin: 12px 0;
overflow-y: auto;
white-space: nowrap;
transition: opacity 250ms ease-out;
`;
// When sticky we need extra background coverage around the sides otherwise
// items that scroll past can "stick out" the sides of the heading
const Sticky = styled.div`
position: sticky;
top: 54px;
margin: 0 -8px;
padding: 0 8px;
background: ${(props) => props.theme.background};
transition: ${(props) => props.theme.backgroundTransition};
z-index: ${(props) => props.theme.depths.stickyHeader};
`;
export const Separator = styled.span`
border-left: 1px solid ${(props) => props.theme.divider};
position: relative;
@ -19,4 +30,12 @@ export const Separator = styled.span`
margin-top: 6px;
`;
const Tabs = (props: {}) => {
return (
<Sticky>
<Nav {...props}></Nav>
</Sticky>
);
};
export default Tabs;