mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-09 15:46:55 +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

20
client/App.jsx
View File

@@ -2,16 +2,16 @@ import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home'; import Home from './Home';
import Badge from './layouts/Badge'; import Badge from './layouts/badge/Details';
import ButtonWithIcon from './layouts/ButtonWithIcon'; import ButtonWithIcon from './layouts/button-with-icon/Details';
import Centering from './layouts/Centering'; import Centering from './layouts/centering/Details';
import HolyGrail from './layouts/HolyGrail'; import HolyGrail from './layouts/holy-grail/Details';
import InputAddon from './layouts/InputAddon'; import InputAddon from './layouts/input-add-on/Details';
import MediaObject from './layouts/MediaObject'; import MediaObject from './layouts/media-object/Details';
import Sidebar from './layouts/Sidebar'; import Sidebar from './layouts/sidebar/Details';
import StepperInput from './layouts/StepperInput'; import StepperInput from './layouts/stepper-input/Details';
import StickyFooter from './layouts/StickyFooter'; import StickyFooter from './layouts/sticky-footer/Details';
import StickyHeader from './layouts/StickyHeader'; import StickyHeader from './layouts/sticky-header/Details';
const App = () => { const App = () => {
return ( return (

20
client/Home.jsx
View File

@@ -1,16 +1,16 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import BadgeCover from './covers/BadgeCover'; import BadgeCover from './layouts/badge/Cover';
import ButtonWithIconCover from './covers/ButtonWithIconCover'; import ButtonWithIconCover from './layouts/button-with-icon/Cover';
import CenterCover from './covers/CenterCover'; import CenterCover from './layouts/centering/Cover';
import HolyGrailCover from './covers/HolyGrailCover'; import HolyGrailCover from './layouts/holy-grail/Cover';
import InputAddonCover from './covers/InputAddonCover'; import InputAddonCover from './layouts/input-add-on/Cover';
import MediaObjectCover from './covers/MediaObjectCover'; import MediaObjectCover from './layouts/media-object/Cover';
import SidebarCover from './covers/SidebarCover'; import SidebarCover from './layouts/sidebar/Cover';
import StickyFooterCover from './covers/StickyFooterCover'; import StepperInputCover from './layouts/stepper-input/Cover';
import StickyHeaderCover from './covers/StickyHeaderCover'; import StickyFooterCover from './layouts/sticky-footer/Cover';
import StepperInputCover from './covers/StepperInputCover'; import StickyHeaderCover from './layouts/sticky-header/Cover';
import Layout from './Layout'; import Layout from './Layout';
import useDocumentTitle from './useDocumentTitle'; import useDocumentTitle from './useDocumentTitle';

6
client/covers/BadgeCover.jsx → client/layouts/badge/Cover.jsx
View File

@@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
const BadgeCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div className="h-100 flex flex-column items-center justify-center">
@@ -14,4 +14,4 @@ const BadgeCover = () => {
); );
}; };
export default BadgeCover; export default Cover;

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

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

10
client/covers/ButtonWithIconCover.jsx → client/layouts/button-with-icon/Cover.jsx
View File

@@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import Dot from '../placeholders/Dot'; import Dot from '../../placeholders/Dot';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const ButtonWithIconCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa2"> <div className="h-100 flex flex-column items-center justify-center pa2">
@@ -17,4 +17,4 @@ const ButtonWithIconCover = () => {
); );
}; };
export default ButtonWithIconCover; 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 React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import Dot from '../placeholders/Dot'; import Dot from '../../placeholders/Dot';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const ButtonWithIcon = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Button with icon'); useDocumentTitle('CSS Layout ∙ Button with icon');
return ( return (
@@ -17,10 +17,10 @@ const ButtonWithIcon = () => {
content={ content={
<div className="h-100 flex flex-column items-center justify-center"> <div className="h-100 flex flex-column items-center justify-center">
<div className="w5"> <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> <div className="mr2"><Dot size={32} /></div>
<Rectangle /> <Rectangle />
</div> </button>
</div> </div>
</div> </div>
} }
@@ -28,22 +28,18 @@ const ButtonWithIcon = () => {
<SampleCode <SampleCode
lang="html" lang="html"
code={` code={`
<div style=" <button style="
/* Content is centered */ /* Content is centered */
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row;
justify-content: center; 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> </div>
`} `}
/> />
@@ -53,4 +49,4 @@ code={`
); );
}; };
export default ButtonWithIcon; export default Details;

10
client/covers/CenterCover.jsx → client/layouts/centering/Cover.jsx
View File

@@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import Dot from '../placeholders/Dot'; import Dot from '../../placeholders/Dot';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const CenterCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div className="h-100 flex flex-column items-center justify-center">
@@ -20,4 +20,4 @@ const CenterCover = () => {
); );
}; };
export default CenterCover; export default Cover;

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

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

8
client/covers/HolyGrailCover.jsx → client/layouts/holy-grail/Cover.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const HolyGrailCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column"> <div className="h-100 flex flex-column">
@@ -45,4 +45,4 @@ const HolyGrailCover = () => {
); );
}; };
export default HolyGrailCover; 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 React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import Block from '../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const HolyGrail = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Holy grail'); useDocumentTitle('CSS Layout ∙ Holy grail');
return ( return (
@@ -84,4 +84,4 @@ code={`
); );
}; };
export default HolyGrail; export default Details;

8
client/covers/InputAddonCover.jsx → client/layouts/input-add-on/Cover.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const InputAddonCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex items-center justify-center pa2"> <div className="h-100 flex items-center justify-center pa2">
@@ -20,4 +20,4 @@ const InputAddonCover = () => {
); );
}; };
export default InputAddonCover; 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 React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const InputAddon = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Input add-on'); useDocumentTitle('CSS Layout ∙ Input add-on');
return ( return (
@@ -133,4 +133,4 @@ code={`
); );
}; };
export default InputAddon; export default Details;

10
client/covers/MediaObjectCover.jsx → client/layouts/media-object/Cover.jsx
View File

@@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
import Square from '../placeholders/Square'; import Square from '../../placeholders/Square';
const MediaObjectCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="flex h-100 items-start pa2 w-100"> <div className="flex h-100 items-start pa2 w-100">
@@ -29,4 +29,4 @@ const MediaObjectCover = () => {
); );
}; };
export default MediaObjectCover; 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 React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import Block from '../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import Square from '../placeholders/Square'; import Square from '../../placeholders/Square';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const MediaObject = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Media object'); useDocumentTitle('CSS Layout ∙ Media object');
return ( return (
@@ -64,4 +64,4 @@ code={`
); );
}; };
export default MediaObject; export default Details;

8
client/covers/SidebarCover.jsx → client/layouts/sidebar/Cover.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const SidebarCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex"> <div className="h-100 flex">
@@ -22,4 +22,4 @@ const SidebarCover = () => {
); );
}; };
export default SidebarCover; export default Cover;

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

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

6
client/covers/StepperInputCover.jsx → client/layouts/stepper-input/Cover.jsx
View File

@@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
const StepperInputCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex items-center justify-center pa2"> <div className="h-100 flex items-center justify-center pa2">
@@ -16,4 +16,4 @@ const StepperInputCover = () => {
); );
}; };
export default StepperInputCover; 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 React, { useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const StepperInput = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Stepper input'); useDocumentTitle('CSS Layout ∙ Stepper input');
const [value, setValue] = useState(0); const [value, setValue] = useState(0);
const decrease = () => setValue(value - 1); const decrease = () => setValue(value - 1);
@@ -84,4 +84,4 @@ code={`
); );
}; };
export default StepperInput; export default Details;

8
client/covers/StickyFooterCover.jsx → client/layouts/sticky-footer/Cover.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const StickyFooterCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column"> <div className="h-100 flex flex-column">
@@ -35,4 +35,4 @@ const StickyFooterCover = () => {
); );
}; };
export default StickyFooterCover; 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 React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import Block from '../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const StickyFooter = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Sticky footer'); useDocumentTitle('CSS Layout ∙ Sticky footer');
return ( return (
@@ -57,4 +57,4 @@ code={`
); );
}; };
export default StickyFooter; export default Details;

8
client/covers/StickyHeaderCover.jsx → client/layouts/sticky-header/Cover.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const StickyHeaderCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column"> <div className="h-100 flex flex-column">
@@ -27,4 +27,4 @@ const StickyHeaderCover = () => {
); );
}; };
export default StickyHeaderCover; 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 React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import Block from '../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const StickyHeader = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Sticky header'); useDocumentTitle('CSS Layout ∙ Sticky header');
return ( return (
@@ -50,4 +50,4 @@ code={`
); );
}; };
export default StickyHeader; export default Details;