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

Reorganize folder structure

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-17 10:48:47 +07:00
parent 6393b96e84
commit ea2790f07e
22 changed files with 145 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/layouts/badge/Cover.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2">
1
</div>
</div>
</Frame>
);
};
export default Cover;

12
client/layouts/Badge.jsx → client/layouts/badge/Details.jsx
View File

@@ -1,11 +1,11 @@
import React from 'react';
import DetailsLayout from '../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const Badge = () => {
const Details = () => {
useDocumentTitle('CSS Layout ∙ Badge');
return (
@@ -48,4 +48,4 @@ code={`
);
};
export default Badge;
export default Details;

20
client/layouts/button-with-icon/Cover.jsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import Dot from '../../placeholders/Dot';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">
<div className="w-100 h2 flex flex-row items-center ba b--black-30 br2 ph1">
<div className="mr1"><Dot /></div>
<Rectangle />
</div>
</div>
</Frame>
);
};
export default Cover;

38
client/layouts/ButtonWithIcon.jsx → client/layouts/button-with-icon/Details.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react';
import DetailsLayout from '../DetailsLayout';
import Dot from '../placeholders/Dot';
import BrowserFrame from '../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
import DetailsLayout from '../../DetailsLayout';
import Dot from '../../placeholders/Dot';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const ButtonWithIcon = () => {
const Details = () => {
useDocumentTitle('CSS Layout ∙ Button with icon');
return (
@@ -17,10 +17,10 @@ const ButtonWithIcon = () => {
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
<button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
<div className="mr2"><Dot size={32} /></div>
<Rectangle />
</div>
</button>
</div>
</div>
}
@@ -28,22 +28,18 @@ const ButtonWithIcon = () => {
<SampleCode
lang="html"
code={`
<div style="
<button style="
/* Content is centered */
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
/* Colors */
background-color: rgba(0, 0, 0, .3);
color: #FFF;
/* Rounded border */
border-radius: 9999px;
height: 32px;
width: 32px;
">
1
<!-- Icon -->
...
<!-- Label -->
...
</div>
`}
/>
@@ -53,4 +49,4 @@ code={`
);
};
export default ButtonWithIcon;
export default Details;

23
client/layouts/centering/Cover.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import Dot from '../../placeholders/Dot';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">
<Dot />
<div className="w-50 mv1">
<Line />
</div>
<div className="w-40 mv1">
<Line />
</div>
</div>
</Frame>
);
};
export default Cover;

16
client/layouts/Centering.jsx → client/layouts/centering/Details.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react';
import DetailsLayout from '../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame';
import Dot from '../placeholders/Dot';
import Rectangle from '../placeholders/Rectangle';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Dot from '../../placeholders/Dot';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const Centering = () => {
const Details = () => {
useDocumentTitle('CSS Layout ∙ Centering');
return (
@@ -41,4 +41,4 @@ code={`
);
};
export default Centering;
export default Details;

48
client/layouts/holy-grail/Cover.jsx Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex flex-column">
<div className="flex-shrink-0 bb b--black-30">
<div className="w-100 flex items-center pa2">
<div className="w1"><Line /></div>
<div className="w1 ml-auto"><Line /></div>
<div className="w1 ml1"><Line /></div>
</div>
</div>
<div className="flex-grow-1 flex flex-row">
<div className="b--black-30 br pa2 w-30">
<div className="mb1"><Line /></div>
<div className="w-80"><Line /></div>
</div>
<div className="pa2 flex-auto">
<div className="mb1"><Line /></div>
<div className="mb1 w-60"><Line /></div>
<div className="mb2 w-80"><Line /></div>
<div className="mb1"><Line /></div>
<div className="mb1 w-60"><Line /></div>
<div className="mb1 w-80"><Line /></div>
</div>
<div className="b--black-30 bl pa2 w-30">
<div className="mb1"><Line /></div>
<div className="w-80"><Line /></div>
</div>
</div>
<div className="flex-shrink-0 bt b--black-30">
<div className="w-100 flex items-center pa2">
<div className="w1"><Line /></div>
<div className="w1 ml1"><Line /></div>
<div className="w1 ml1"><Line /></div>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

16
client/layouts/HolyGrail.jsx → client/layouts/holy-grail/Details.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react';
import DetailsLayout from '../DetailsLayout';
import Block from '../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
import DetailsLayout from '../../DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const HolyGrail = () => {
const Details = () => {
useDocumentTitle('CSS Layout ∙ Holy grail');
return (
@@ -84,4 +84,4 @@ code={`
);
};
export default HolyGrail;
export default Details;

23
client/layouts/input-add-on/Cover.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex items-center justify-center pa2">
<div className="b--black-30 ba br2 flex w-100 h1">
<div className="b--black-30 br flex items-center justify-center w-30 ph2">
<div className="w-100">
<Line />
</div>
</div>
<div className="flex-grow-1"></div>
</div>
</div>
</Frame>
);
};
export default Cover;

14
client/layouts/InputAddon.jsx → client/layouts/input-add-on/Details.jsx
View File

@@ -1,12 +1,12 @@
import React from 'react';
import DetailsLayout from '../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const InputAddon = () => {
const Details = () => {
useDocumentTitle('CSS Layout ∙ Input add-on');
return (
@@ -133,4 +133,4 @@ code={`
);
};
export default InputAddon;
export default Details;

32
client/layouts/media-object/Cover.jsx Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Square from '../../placeholders/Square';
const Cover = () => {
return (
<Frame>
<div className="flex h-100 items-start pa2 w-100">
<div className="h2 w2 mr2">
<Square />
</div>
<div className="flex-auto">
<div className="w-100 mb1"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-80 mb3"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-80 mb3"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-80 mb1"><Line /></div>
</div>
</div>
</Frame>
);
};
export default Cover;

18
client/layouts/MediaObject.jsx → client/layouts/media-object/Details.jsx
View File

@@ -1,14 +1,14 @@
import React from 'react';
import DetailsLayout from '../DetailsLayout';
import Block from '../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle';
import Square from '../placeholders/Square';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
import DetailsLayout from '../../DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Square from '../../placeholders/Square';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const MediaObject = () => {
const Details = () => {
useDocumentTitle('CSS Layout ∙ Media object');
return (
@@ -64,4 +64,4 @@ code={`
);
};
export default MediaObject;
export default Details;

25
client/layouts/sidebar/Cover.jsx Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex">
<div className="b--black-30 br flex flex-column justify-end pa1 w-30">
<div className="mb1"><Line /></div>
<div className="w-80"><Line /></div>
</div>
<div className="flex-grow-1 pa2 b--black-30 br bw2">
<div className="mb2"><Line /></div>
<div className="mb2"><Line /></div>
<div className="mb2"><Line /></div>
<div className="w-80"><Line /></div>
</div>
</div>
</Frame>
);
};
export default Cover;

14
client/layouts/Sidebar.jsx → client/layouts/sidebar/Details.jsx
View File

@@ -1,12 +1,12 @@
import React from 'react';
import DetailsLayout from '../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame';
import Block from '../placeholders/Block';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Block from '../../placeholders/Block';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const Sidebar = () => {
const Details = () => {
useDocumentTitle('CSS Layout ∙ Sidebar');
return (
@@ -55,4 +55,4 @@ code={`
);
};
export default Sidebar;
export default Details;

19
client/layouts/stepper-input/Cover.jsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex items-center justify-center pa2">
<div className="b--black-30 ba br2 flex w-100 h1">
<div className="b--black-30 br flex items-center justify-center w1">-</div>
<div className="flex-grow-1 bg-white"></div>
<div className="b--black-30 bl flex items-center justify-center w1">+</div>
</div>
</div>
</Frame>
);
};
export default Cover;

12
client/layouts/StepperInput.jsx → client/layouts/stepper-input/Details.jsx
View File

@@ -1,12 +1,12 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import DetailsLayout from '../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const StepperInput = () => {
const Details = () => {
useDocumentTitle('CSS Layout ∙ Stepper input');
const [value, setValue] = useState(0);
const decrease = () => setValue(value - 1);
@@ -84,4 +84,4 @@ code={`
);
};
export default StepperInput;
export default Details;

38
client/layouts/sticky-footer/Cover.jsx Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex flex-column">
<div className="flex-shrink-0 b--black-30 br bw2">
<div className="w-100 flex items-center pa2">
<div className="w1"><Line /></div>
<div className="w1 ml-auto"><Line /></div>
<div className="w1 ml1"><Line /></div>
</div>
<Line />
</div>
<div className="flex-grow-1 b--black-30 br bw2">
<div className="pa2">
<div className="w3 mb2"><Line /></div>
<div className="w3 mb2"><Line /></div>
<div className="w2"><Line /></div>
</div>
</div>
<div className="flex-shrink-0">
<Line />
<div className="w-100 flex items-center pa2">
<div className="w1"><Line /></div>
<div className="w1 ml1"><Line /></div>
<div className="w1 ml1"><Line /></div>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

16
client/layouts/StickyFooter.jsx → client/layouts/sticky-footer/Details.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react';
import DetailsLayout from '../DetailsLayout';
import Block from '../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
import DetailsLayout from '../../DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const StickyFooter = () => {
const Details = () => {
useDocumentTitle('CSS Layout ∙ Sticky footer');
return (
@@ -57,4 +57,4 @@ code={`
);
};
export default StickyFooter;
export default Details;

30
client/layouts/sticky-header/Cover.jsx Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex flex-column">
<div className="flex-shrink-0">
<div className="w-100 flex items-center pa2">
<div className="w1"><Line /></div>
<div className="w1 ml-auto"><Line /></div>
<div className="w1 ml1"><Line /></div>
</div>
<Line />
</div>
<div className="flex-grow-1 b--black-30 br bw2">
<div className="pa2">
<div className="w3 mb2"><Line /></div>
<div className="w3 mb2"><Line /></div>
<div className="w2"><Line /></div>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

16
client/layouts/StickyHeader.jsx → client/layouts/sticky-header/Details.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react';
import DetailsLayout from '../DetailsLayout';
import Block from '../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
import DetailsLayout from '../../DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const StickyHeader = () => {
const Details = () => {
useDocumentTitle('CSS Layout ∙ Sticky header');
return (
@@ -50,4 +50,4 @@ code={`
);
};
export default StickyHeader;
export default Details;