crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created reusable columns component

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-24 14:40:13 +02:00
committed by fabioberger
parent bb33609164
commit 99074b3c34
5 changed files with 24 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/website/ts/components/docs/layout/columns.tsx Normal file
View File

@@ -0,0 +1,11 @@
import styled from 'styled-components';
export const Columns = styled.div`
display: grid;
grid-template-columns: 290px 0 1fr;
grid-column-gap: 30px;
@media (max-width: 900px) {
grid-template-columns: 1fr;
}
`;

14
packages/website/ts/components/docs/layout/docs_page_layout.tsx
View File

@@ -44,17 +44,3 @@ const LoaderWrapper = styled.div`
justify-content: center;
height: 300px;
`;
// const Columns = styled.div`
// display: grid;
// grid-template-columns: 130px 0 1fr;
// grid-column-gap: 60px;
// @media (min-width: 1440px) {
// grid-template-columns: 230px 0 1fr;
// }
// @media (max-width: 900px) {
// grid-template-columns: 1fr;
// }
// `;

13
packages/website/ts/pages/docs/guides.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import styled from 'styled-components';
import { Columns } from 'ts/components/docs/layout/columns';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
import { Resource } from 'ts/components/docs/resource/resource';
import { Filters } from 'ts/components/docs/sidebar/filters';
@@ -22,17 +22,6 @@ export const DocsGuides: React.FC = () => (
</DocsPageLayout>
);
const Columns = styled.div`
display: grid;
grid-template-columns: 250px 1fr;
grid-column-gap: 98px;
grid-row-gap: 30px;
@media (max-width: 900px) {
grid-template-columns: 1fr;
}
`;
const filters = [
{
attribute: 'topics',

22
packages/website/ts/pages/docs/tools.tsx
View File

@@ -2,11 +2,15 @@ import React from 'react';
import styled from 'styled-components';
import { FeatureLink } from 'ts/components/docs/feature_link';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
import { Resource } from 'ts/components/docs/resource/resource';
import { Filters } from 'ts/components/docs/sidebar/filters';
import { Heading } from 'ts/components/text';
import { Columns } from 'ts/components/docs/layout/columns';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
import { Separator } from 'ts/components/docs/separator';
import { Hits, InstantSearch } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';
@@ -19,7 +23,8 @@ export const DocsTools: React.FC = () => {
<InstantSearch searchClient={searchClient} indexName="0x_tools_test">
<Columns>
<Filters filters={filters} />
<article>
<Separator />
<ContentWrapper>
<Hits hitComponent={Resource} />
{/* <FeaturedToolsWrapper>
@@ -56,22 +61,15 @@ export const DocsTools: React.FC = () => {
<Resource key={`resource-${index}`} {...resource} />
))}
</ResourcesWrapper> */}
</article>
</ContentWrapper>
</Columns>
</InstantSearch>
</DocsPageLayout>
);
};
const Columns = styled.div`
display: grid;
grid-template-columns: 250px 1fr;
grid-column-gap: 98px;
grid-row-gap: 30px;
@media (max-width: 900px) {
grid-template-columns: 1fr;
}
const ContentWrapper = styled.article`
min-width: 0;
`;
const FeaturedToolsWrapper = styled.div`

16
packages/website/ts/pages/docs/view.tsx
View File

@@ -19,7 +19,9 @@ import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
import { Table } from 'ts/components/docs/mdx/table';
import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
import { Columns } from 'ts/components/docs/layout/columns';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
import { Separator } from 'ts/components/docs/separator';
import { IContents, TableOfContents } from 'ts/components/docs/sidebar/table_of_contents';
@@ -83,20 +85,6 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
);
};
const Columns = styled.div`
display: grid;
grid-template-columns: 130px 0 1fr;
grid-column-gap: 60px;
@media (min-width: 1440px) {
grid-template-columns: 230px 0 1fr;
}
@media (max-width: 900px) {
grid-template-columns: 1fr;
}
`;
const ContentWrapper = styled.article`
min-width: 0;
`;