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

31
app/components/Subheading.js
View File

@ -2,19 +2,17 @@
import * as React from "react";
import styled from "styled-components";
type Props = {
type Props = {|
children: React.Node,
};
|};
const H3 = styled.h3`
border-bottom: 1px solid ${(props) => props.theme.divider};
margin-top: 22px;
margin-bottom: 12px;
margin: 12px 0;
line-height: 1;
position: relative;
`;
const Underline = styled("span")`
const Underline = styled.div`
margin-top: -1px;
display: inline-block;
font-weight: 500;
@ -22,14 +20,29 @@ const Underline = styled("span")`
line-height: 1.5;
color: ${(props) => props.theme.textSecondary};
border-bottom: 3px solid ${(props) => props.theme.textSecondary};
padding-top: 7px;
padding-bottom: 5px;
`;
// 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};
`;
const Subheading = ({ children, ...rest }: Props) => {
return (
<H3 {...rest}>
<Underline>{children}</Underline>
</H3>
<Sticky>
<H3 {...rest}>
<Underline>{children}</Underline>
</H3>
</Sticky>
);
};