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

Merge pull request #19 from phuoc-ng/progress-bar

Browse Source 
Progress bar
This commit is contained in:
phuoc-ng
2019-11-17 15:41:09 +07:00
committed by GitHub
parent 8da253fdf7 2876976c63
commit a8000d1b42
21 changed files with 126 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/App.jsx
View File

@@ -11,6 +11,7 @@ import InputAddon from './layouts/input-add-on/Details';
import MediaObject from './layouts/media-object/Details';
import Menu from './layouts/menu/Details';
import PreviousNextButtons from './layouts/previous-next-buttons/Details';
import ProgressBar from './layouts/progress-bar/Details';
import SameHeightColumns from './layouts/same-height-columns/Details';
import Sidebar from './layouts/sidebar/Details';
import SplitScreen from './layouts/split-screen/Details';
@@ -32,6 +33,7 @@ const App = () => {
<Route exact={true} path='/media-object'><MediaObject /></Route>
<Route exact={true} path='/menu'><Menu /></Route>
<Route exact={true} path='/previous-next-buttons'><PreviousNextButtons /></Route>
<Route exact={true} path='/progress-bar'><ProgressBar /></Route>
<Route exact={true} path='/same-height-columns'><SameHeightColumns /></Route>
<Route exact={true} path='/sidebar'><Sidebar /></Route>
<Route exact={true} path='/split-screen'><SplitScreen /></Route>

9
client/Home.jsx
View File

@@ -10,6 +10,7 @@ import InputAddonCover from './layouts/input-add-on/Cover';
import MediaObjectCover from './layouts/media-object/Cover';
import MenuCover from './layouts/menu/Cover';
import PreviousNextButtonCover from './layouts/previous-next-buttons/Cover';
import ProgressBarCover from './layouts/progress-bar/Cover';
import SameHeightColumnsCover from './layouts/same-height-columns/Cover';
import SidebarCover from './layouts/sidebar/Cover';
import SplitScreenCover from './layouts/split-screen/Cover';
@@ -17,7 +18,7 @@ import StepperInputCover from './layouts/stepper-input/Cover';
import StickyFooterCover from './layouts/sticky-footer/Cover';
import StickyHeaderCover from './layouts/sticky-header/Cover';
import Layout from './Layout';
import useDocumentTitle from './useDocumentTitle';
import useDocumentTitle from './hooks/useDocumentTitle';
const Home = () => {
useDocumentTitle('CSS Layout');
@@ -125,6 +126,12 @@ const Home = () => {
<h4 className="f4 mv0 pt3">Previous next buttons</h4>
</Link>
</div>
<div className="pa1 w-20">
<Link to="/progress-bar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<ProgressBarCover />
<h4 className="f4 mv0 pt3">Progress bar</h4>
</Link>
</div>
<div className="pa1 w-20">
<Link to="/same-height-columns" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<SameHeightColumnsCover />

0
client/useDocumentTitle.js → client/hooks/useDocumentTitle.js
View File

16
client/hooks/useInterval.js Normal file
View File

@@ -0,0 +1,16 @@
import { useEffect } from 'react';
const useInterval = (callback, delay) => {
useEffect(
() => {
const handler = () => callback();
if (delay !== null) {
const id = setInterval(handler, delay);
return () => clearInterval(id);
}
},
[delay]
);
};
export default useInterval;

2
client/layouts/badge/Details.jsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Badge');

2
client/layouts/button-with-icon/Details.jsx
View File

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Button with icon');

2
client/layouts/centering/Details.jsx
View File

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Centering');

2
client/layouts/fixed-at-corner/Details.jsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Fixed at corner');

2
client/layouts/holy-grail/Details.jsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Holy grail');

2
client/layouts/input-add-on/Details.jsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Input add-on');

2
client/layouts/media-object/Details.jsx
View File

@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Square from '../../placeholders/Square';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Media object');

2
client/layouts/menu/Details.jsx
View File

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Menu');

2
client/layouts/previous-next-buttons/Details.jsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Previous and next buttons');

17
client/layouts/progress-bar/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 pa2">
<div className="h1 w-100 br-pill bg-black-10 pa1">
<div className="w-40 br-pill h-100 bg-blue" />
</div>
</div>
</Frame>
);
};
export default Cover;

68
client/layouts/progress-bar/Details.jsx Normal file
View File

@@ -0,0 +1,68 @@
import React, { useState } from 'react';
import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../hooks/useDocumentTitle';
import useInterval from '../../hooks/useInterval';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Progress bar');
const [progress, setProgress] = useState(0);
useInterval(() => {
setProgress(v => v === 100 ? 0 : v + 1);
}, 1 * 100);
return (
<DetailsLayout>
<h1 className="f1 tc">Progress bar</h1>
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="h1 w-50 br-pill bg-black-10">
<div className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7" style={{ width: `${progress}%` }}>
{progress}%
</div>
</div>
</div>
}
source={
<SampleCode
lang="html"
code={`
<div style="
/* Colors */
background-color: rgba(0, 0, 0, .1);
/* Rounded border */
border-radius: 9999px;
">
<div style="
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
/* Colors */
background-color: #357edd;
color: #fff;
/* Rounded border */
border-radius: 9999px;
/* Width based on the number of percentages */
width: 40%;
">
<!-- The number of percentages -->
40%
</div>
</div>
`}
/>
}
/>
</DetailsLayout>
);
};
export default Details;

2
client/layouts/same-height-columns/Details.jsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Same height columns');

2
client/layouts/sidebar/Details.jsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Block from '../../placeholders/Block';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Sidebar');

2
client/layouts/split-screen/Details.jsx
View File

@@ -6,7 +6,7 @@ import Block from '../../placeholders/Block';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Split screen');

2
client/layouts/stepper-input/Details.jsx
View File

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Stepper input');

2
client/layouts/sticky-footer/Details.jsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Sticky footer');

2
client/layouts/sticky-header/Details.jsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
import useDocumentTitle from '../../hooks/useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Sticky header');