mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-05 21:57:32 +02:00
Code Issues Releases Wiki Activity

Add drawer navigation

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-13 09:18:17 +07:00
parent 60211e0959
commit a0b6eb28e4
7 changed files with 140 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -16,6 +16,7 @@ enum Pattern {
DockedAtCorner = 'Docked at corner',
DotLeader = 'Dot leader',
DotNavigation = 'Dot navigation',
Drawer = 'Drawer',
DropArea = 'Drop area',
DropCap = 'Drop cap',
Dropdown = 'Dropdown',

3
client/pages/ExplorePage.tsx
View File

@@ -62,7 +62,7 @@ const ExplorePage = () => {
textAlign: 'center',
}}
>
Here is the collection of 66 patterns
Here is the collection of 67 patterns
</h2>
<div style={{ marginBottom: '32px', textAlign: 'center' }}>
All covers you see in this page are made with CSS only. Inspect them! 🎉
@@ -93,6 +93,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.CircularNavigation} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.Drawer} />
<CoverCard pattern={Pattern.Dropdown} />
<CoverCard pattern={Pattern.FullScreenMenu} />
<CoverCard pattern={Pattern.Menu} />

2
client/pages/HomePage.tsx
View File

@@ -170,7 +170,7 @@ const HomePage = () => {
marginBottom: '16px',
}}
>
66 patterns
67 patterns
</div>
<Link
to="/patterns"

38
client/patterns/drawer/Cover.tsx Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
position: 'relative',
width: '100%',
}}
>
<div
style={{
backgroundColor: '#fff',
height: '100%',
left: 0,
padding: '4px',
position: 'absolute',
top: 0,
width: '40%',
}}
>
<div style={{ marginBottom: '4px' }}><Line /></div>
<div style={{ marginBottom: '4px' }}><Line /></div>
<div style={{ marginBottom: '4px' }}><Line /></div>
<div style={{ width: '80%' }}><Line /></div>
</div>
</div>
</Frame>
);
};
export default Cover;

96
client/patterns/drawer/Details.tsx Normal file
View File

@@ -0,0 +1,96 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Drawer">
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
This pattern is also known as off-canvas.
</div>
<BrowserFrame
content={(
<div
style={{
height: '100%',
position: 'relative',
width: '100%',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
/>
<div
style={{
backgroundColor: '#fff',
height: '100%',
left: 0,
padding: '16px',
position: 'absolute',
top: 0,
width: '250px',
}}
>
<Block numberOfBlocks={20} />
</div>
</div>
)}
source={`
<div style="
/* Container takes full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
">
<!-- Backdrop -->
<div style="
/* Take full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
/* User still can see the content of main page */
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
" />
<!-- Sidebar -->
<div style="
/* Take full height */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 200px;
/* Background */
background-color: #fff;
">
...
</div>
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

2
client/placeholders/Frame.tsx
View File

@@ -5,7 +5,7 @@ const Frame: React.FC<{}> = ({ children }) => {
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
borderRadius: '2px',
boxShadow: 'rgba(0, 0, 0, 0.2) 0px 16px 24px -4px, rgba(0, 0, 0, 0.05) 0px 8px 8px -4px',
height: '100px',
width: '100px',

1
public/sitemap.xml
View File

@@ -22,6 +22,7 @@
<url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
<url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
<url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
<url><loc>https://csslayout.io/patterns/drawer</loc></url>
<url><loc>https://csslayout.io/patterns/drop-area</loc></url>
<url><loc>https://csslayout.io/patterns/drop-cap</loc></url>
<url><loc>https://csslayout.io/patterns/dropdown</loc></url>