diff --git a/client/index.html b/client/index.html index d363e8a..fb038a8 100644 --- a/client/index.html +++ b/client/index.html @@ -1,8 +1,9 @@ - + - CSS layout + CSS layout + diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx index 01414d5..b64e66b 100644 --- a/client/pages/ExplorePage.tsx +++ b/client/pages/ExplorePage.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import { Link } from 'react-router-dom'; import CoverCard from '../components/CoverCard'; @@ -14,6 +15,10 @@ const ExplorePage = () => { return ( + + + +
{ return ( + + + +
= () => { return ( + + + +
= ({ children }) => { const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
You can use a close button to remove a chip. diff --git a/client/patterns/circular-navigation/Details.tsx b/client/patterns/circular-navigation/Details.tsx index d9df121..0e5b4ad 100644 --- a/client/patterns/circular-navigation/Details.tsx +++ b/client/patterns/circular-navigation/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -43,6 +44,10 @@ const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
This pattern is also known as off-canvas. diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx index 77b4def..810b553 100644 --- a/client/patterns/drop-area/Details.tsx +++ b/client/patterns/drop-area/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import Block from '../../placeholders/Block'; @@ -7,6 +8,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
Move the mouse over the button to see the dropdown. diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx index 607430b..23fcdd7 100644 --- a/client/patterns/feature-comparison/Details.tsx +++ b/client/patterns/feature-comparison/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import RelatedPatterns from '../../components/RelatedPatterns'; import Pattern from '../../constants/Pattern'; @@ -11,6 +12,10 @@ import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
Type something in the input to see how the label is shown up. diff --git a/client/patterns/full-screen-menu/Details.tsx b/client/patterns/full-screen-menu/Details.tsx index 3af91c7..791bc26 100644 --- a/client/patterns/full-screen-menu/Details.tsx +++ b/client/patterns/full-screen-menu/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -7,6 +8,10 @@ import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
To center the content, you also can use other technique demonstrated in diff --git a/client/patterns/input-addon/Details.tsx b/client/patterns/input-addon/Details.tsx index caf053d..7ede896 100644 --- a/client/patterns/input-addon/Details.tsx +++ b/client/patterns/input-addon/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -7,6 +8,10 @@ import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
= ({ action, keys }) => { return ( -
= ({ action, keys }) => { > {keys} -
+
); }; const Details: React.FC<{}> = () => { return ( + + + +
We use the native kbd tag to display the keyboard shortcut. diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx index 7bb3c47..52ee04e 100644 --- a/client/patterns/media-object/Details.tsx +++ b/client/patterns/media-object/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import Block from '../../placeholders/Block'; @@ -9,6 +10,10 @@ import Square from '../../placeholders/Square'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
You can use the close button to diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx index 6607bd4..f321cab 100644 --- a/client/patterns/notification/Details.tsx +++ b/client/patterns/notification/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import { Link } from 'react-router-dom'; import DetailsLayout from '../../layouts/DetailsLayout'; @@ -9,6 +10,10 @@ import Circle from '../../placeholders/Circle'; const Details: React.FC<{}> = () => { return ( + + + +
You can use the close button to diff --git a/client/patterns/overlay-play-button/Details.tsx b/client/patterns/overlay-play-button/Details.tsx index 9dad788..3d4e0b0 100644 --- a/client/patterns/overlay-play-button/Details.tsx +++ b/client/patterns/overlay-play-button/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import RelatedPatterns from '../../components/RelatedPatterns'; import Pattern from '../../constants/Pattern'; @@ -9,6 +10,10 @@ import Triangle from '../../placeholders/Triangle'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
You can add a ribbon to diff --git a/client/patterns/progress-bar/Details.tsx b/client/patterns/progress-bar/Details.tsx index c650709..44eb0bd 100644 --- a/client/patterns/progress-bar/Details.tsx +++ b/client/patterns/progress-bar/Details.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { Helmet } from 'react-helmet'; import useInterval from '../../hooks/useInterval'; import DetailsLayout from '../../layouts/DetailsLayout'; @@ -12,6 +13,10 @@ const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= ({ percentages }) => { const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
You can move the mouse over each squares located at the corners and the middle of sides to see diff --git a/client/patterns/ribbon/Details.tsx b/client/patterns/ribbon/Details.tsx index 39c6aea..354ec53 100644 --- a/client/patterns/ribbon/Details.tsx +++ b/client/patterns/ribbon/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import RelatedPatterns from '../../components/RelatedPatterns'; import Pattern from '../../constants/Pattern'; @@ -9,6 +10,10 @@ import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
Try to scroll the main content!
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
The footer always sticks to the bottom if the main content is short. diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx index bfa96c1..7605eaa 100644 --- a/client/patterns/sticky-header/Details.tsx +++ b/client/patterns/sticky-header/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import Block from '../../placeholders/Block'; @@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
Try to scroll the main content to see the header sticks to the top of page. diff --git a/client/patterns/sticky-sections/Details.tsx b/client/patterns/sticky-sections/Details.tsx index 160fc41..241a9f2 100644 --- a/client/patterns/sticky-sections/Details.tsx +++ b/client/patterns/sticky-sections/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -6,6 +7,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { return ( + + + +
Try to scroll the main content to see each section sticks to the top of page. diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx index 7949848..04a357d 100644 --- a/client/patterns/switch/Details.tsx +++ b/client/patterns/switch/Details.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { Helmet } from 'react-helmet'; import RelatedPatterns from '../../components/RelatedPatterns'; import Pattern from '../../constants/Pattern'; @@ -11,6 +12,10 @@ const Details: React.FC<{}> = () => { return ( + + + +
The checkbox is placed inside a label. So when clicking on the label, diff --git a/client/patterns/tab/Details.tsx b/client/patterns/tab/Details.tsx index 69e4150..4269f44 100644 --- a/client/patterns/tab/Details.tsx +++ b/client/patterns/tab/Details.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -33,6 +34,10 @@ const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
Move the mouser over the main element to see the tooltip. diff --git a/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx index 783fd49..d26f7ca 100644 --- a/client/patterns/upload-button/Details.tsx +++ b/client/patterns/upload-button/Details.tsx @@ -1,13 +1,17 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; -import Circle from '../../placeholders/Circle'; import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
You can click the button to choose a file. diff --git a/client/patterns/validation-icon/Details.tsx b/client/patterns/validation-icon/Details.tsx index 2309fe6..4a3320c 100644 --- a/client/patterns/validation-icon/Details.tsx +++ b/client/patterns/validation-icon/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -6,6 +7,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
In this pattern, the video is displayed in the background. diff --git a/client/patterns/wizard/Details.tsx b/client/patterns/wizard/Details.tsx index 5933dff..d1b9bcf 100644 --- a/client/patterns/wizard/Details.tsx +++ b/client/patterns/wizard/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import Block from '../../placeholders/Block'; @@ -9,6 +10,10 @@ import Line from '../../placeholders/Line'; const Details: React.FC<{}> = () => { return ( + + + +