mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-09 15:46:55 +02:00
Add folder structure pattern
This commit is contained in:
Phuoc Nguyen
@@ -36,6 +36,7 @@ enum Pattern {
|
|||||||
FixedAtCorner = 'Fixed at corner',
|
FixedAtCorner = 'Fixed at corner',
|
||||||
FixedAtSide = 'Fixed at side',
|
FixedAtSide = 'Fixed at side',
|
||||||
FloatingLabel = 'Floating label',
|
FloatingLabel = 'Floating label',
|
||||||
|
FolderStructure = 'Folder structure',
|
||||||
FullBackground = 'Full background',
|
FullBackground = 'Full background',
|
||||||
FullScreenMenu = 'Full screen menu',
|
FullScreenMenu = 'Full screen menu',
|
||||||
HolyGrail = 'Holy grail',
|
HolyGrail = 'Holy grail',
|
||||||
|
|||||||
@@ -121,6 +121,7 @@ const ExplorePage = () => {
|
|||||||
<CoverCard pattern={Pattern.FeatureList} />
|
<CoverCard pattern={Pattern.FeatureList} />
|
||||||
<CoverCard pattern={Pattern.FixedAtCorner} />
|
<CoverCard pattern={Pattern.FixedAtCorner} />
|
||||||
<CoverCard pattern={Pattern.FixedAtSide} />
|
<CoverCard pattern={Pattern.FixedAtSide} />
|
||||||
|
<CoverCard pattern={Pattern.FolderStructure} />
|
||||||
<CoverCard pattern={Pattern.FullBackground} />
|
<CoverCard pattern={Pattern.FullBackground} />
|
||||||
<CoverCard pattern={Pattern.InitialAvatar} />
|
<CoverCard pattern={Pattern.InitialAvatar} />
|
||||||
<CoverCard pattern={Pattern.KeyboardShortcut} />
|
<CoverCard pattern={Pattern.KeyboardShortcut} />
|
||||||
|
|||||||
130
client/patterns/folder-structure/Cover.tsx
Normal file
130
client/patterns/folder-structure/Cover.tsx
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
/**
|
||||||
|
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||||
|
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||||
|
*/
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import Frame from '../../placeholders/Frame';
|
||||||
|
import Square from '../../placeholders/Square';
|
||||||
|
|
||||||
|
const Cover: React.FC<{}> = () => {
|
||||||
|
return (
|
||||||
|
<Frame>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '0.5rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: '0rem 0rem 0rem 1rem',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '100%',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: '0.5rem',
|
||||||
|
width: '1rem',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
height: '1rem',
|
||||||
|
width: '1rem',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginLeft: '0.5rem',
|
||||||
|
padding: '0rem 0rem 0rem 1rem',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '50%',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: '0.5rem',
|
||||||
|
width: '1rem',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
height: '1rem',
|
||||||
|
width: '1rem',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: '0rem 0rem 0rem 1rem',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '50%',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: '0.5rem',
|
||||||
|
width: '1rem',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
height: '1rem',
|
||||||
|
width: '1rem',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Frame>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Cover;
|
||||||
155
client/patterns/folder-structure/Details.tsx
Normal file
155
client/patterns/folder-structure/Details.tsx
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
/**
|
||||||
|
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||||
|
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||||
|
*/
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Helmet } from 'react-helmet';
|
||||||
|
|
||||||
|
import RelatedPatterns from '../../components/RelatedPatterns';
|
||||||
|
import Pattern from '../../constants/Pattern';
|
||||||
|
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||||
|
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||||
|
import Square from '../../placeholders/Square';
|
||||||
|
import './folder-structure.css';
|
||||||
|
|
||||||
|
const Details: React.FC<{}> = () => {
|
||||||
|
return (
|
||||||
|
<DetailsLayout pattern={Pattern.FolderStructure}>
|
||||||
|
<Helmet>
|
||||||
|
<meta name="description" content="Create a folder structure with CSS" />
|
||||||
|
<meta name="keywords" content="css folder structure, css folder tree" />
|
||||||
|
</Helmet>
|
||||||
|
<BrowserFrame
|
||||||
|
html={`
|
||||||
|
<div className="folder-structure">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Sub items -->
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Sub items -->
|
||||||
|
<ul>
|
||||||
|
<li>...</li>
|
||||||
|
<li>...</li>
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>...</li>
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Repeat other items -->
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={`
|
||||||
|
:root {
|
||||||
|
--folder-structure-item-height: 1rem;
|
||||||
|
--folder-structure-item-margin-left: 2rem;
|
||||||
|
--folder-structure-item-padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-structure ul {
|
||||||
|
/* Reset */
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-structure li {
|
||||||
|
padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-structure li::before {
|
||||||
|
border-left: 1px solid rgba(0, 0, 0, .3);
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
/* Position */
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-structure li::after {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, .3);
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
/* Position */
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
width: var(--folder-structure-item-margin-left);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove the border from the last item */
|
||||||
|
.folder-structure li:last-child::before {
|
||||||
|
height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '0.5rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="folder-structure">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<Square size='1rem' />
|
||||||
|
<ul>
|
||||||
|
<li><Square size='1rem' /></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Square size='1rem' />
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<Square size='1rem' />
|
||||||
|
<ul>
|
||||||
|
<li><Square size='1rem' /></li>
|
||||||
|
<li><Square size='1rem' /></li>
|
||||||
|
<li><Square size='1rem' /></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><Square size='1rem' /></li>
|
||||||
|
<li>
|
||||||
|
<Square size='1rem' />
|
||||||
|
<ul>
|
||||||
|
<li><Square size='1rem' /></li>
|
||||||
|
<li><Square size='1rem' /></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><Square size='1rem' /></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
|
|
||||||
|
<RelatedPatterns patterns={[Pattern.TreeDiagram]} />
|
||||||
|
</DetailsLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Details;
|
||||||
54
client/patterns/folder-structure/folder-structure.css
Normal file
54
client/patterns/folder-structure/folder-structure.css
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
/**
|
||||||
|
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||||
|
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--folder-structure-item-height: 1rem;
|
||||||
|
--folder-structure-item-margin-left: 2rem;
|
||||||
|
--folder-structure-item-padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-structure ul {
|
||||||
|
/* Reset */
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-structure li {
|
||||||
|
padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-structure li::before {
|
||||||
|
border-left: 1px solid rgba(0, 0, 0, .3);
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
/* Position */
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-structure li::after {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, .3);
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
/* Position */
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
width: var(--folder-structure-item-margin-left);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove the border from the last item */
|
||||||
|
.folder-structure li:last-child::before {
|
||||||
|
height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
|
||||||
|
}
|
||||||
@@ -6,6 +6,7 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
|
|
||||||
|
import RelatedPatterns from '../../components/RelatedPatterns';
|
||||||
import Pattern from '../../constants/Pattern';
|
import Pattern from '../../constants/Pattern';
|
||||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||||
@@ -13,18 +14,13 @@ import Square from '../../placeholders/Square';
|
|||||||
import './tree-diagram.css';
|
import './tree-diagram.css';
|
||||||
|
|
||||||
const Details: React.FC<{}> = () => {
|
const Details: React.FC<{}> = () => {
|
||||||
const [value, setValue] = React.useState(900);
|
|
||||||
const decrease = () => setValue(value - 1);
|
|
||||||
const increase = () => setValue(value + 1);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DetailsLayout pattern={Pattern.TreeDiagram}>
|
<DetailsLayout pattern={Pattern.TreeDiagram}>
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<meta name="description" content="Create a tree diagram with CSS" />
|
<meta name="description" content="Create a tree diagram with CSS" />
|
||||||
<meta name="keywords" content="css sitemap, css tree diagram" />
|
<meta name="keywords" content="css sitemap, css tree diagram" />
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<BrowserFrame
|
||||||
<BrowserFrame
|
|
||||||
html={`
|
html={`
|
||||||
<div className="tree-diagram">
|
<div className="tree-diagram">
|
||||||
<ul>
|
<ul>
|
||||||
@@ -129,56 +125,57 @@ li.tree-diagram__root::before {
|
|||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '0.5rem',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div className="tree-diagram">
|
||||||
style={{
|
<ul>
|
||||||
alignItems: 'center',
|
<li className="tree-diagram__root">
|
||||||
display: 'flex',
|
<Square size='2.5rem' />
|
||||||
height: '100%',
|
<ul>
|
||||||
justifyContent: 'center',
|
<li>
|
||||||
padding: '0.5rem',
|
<Square size='2rem' />
|
||||||
}}
|
<ul>
|
||||||
>
|
<li><Square size='1.5rem' /></li>
|
||||||
<div className="tree-diagram">
|
</ul>
|
||||||
<ul>
|
</li>
|
||||||
<li className="tree-diagram__root">
|
<li>
|
||||||
<Square size='2.5rem' />
|
<Square size='2rem' />
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<Square size='2rem' />
|
<Square size='1.5rem' />
|
||||||
<ul>
|
<ul>
|
||||||
<li><Square size='1.5rem' /></li>
|
<li><Square size='1rem' /></li>
|
||||||
</ul>
|
<li><Square size='1rem' /></li>
|
||||||
</li>
|
<li><Square size='1rem' /></li>
|
||||||
<li>
|
</ul>
|
||||||
<Square size='2rem' />
|
</li>
|
||||||
<ul>
|
<li><Square size='1.5rem' /></li>
|
||||||
<li>
|
<li>
|
||||||
<Square size='1.5rem' />
|
<Square size='1.5rem' />
|
||||||
<ul>
|
<ul>
|
||||||
<li><Square size='1rem' /></li>
|
<li><Square size='1rem' /></li>
|
||||||
<li><Square size='1rem' /></li>
|
<li><Square size='1rem' /></li>
|
||||||
<li><Square size='1rem' /></li>
|
</ul>
|
||||||
</ul>
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
<li><Square size='1.5rem' /></li>
|
</li>
|
||||||
<li>
|
<li><Square size='2rem' /></li>
|
||||||
<Square size='1.5rem' />
|
</ul>
|
||||||
<ul>
|
</li>
|
||||||
<li><Square size='1rem' /></li>
|
</ul>
|
||||||
<li><Square size='1rem' /></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><Square size='2rem' /></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</BrowserFrame>
|
</div>
|
||||||
</div>
|
</BrowserFrame>
|
||||||
|
|
||||||
|
<RelatedPatterns patterns={[Pattern.FolderStructure]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ const Rectangle: React.FC<RectangleProps> = ({ height = 8 }) => {
|
|||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: 'rgba(0, 0, 0, .3)',
|
backgroundColor: 'rgba(0, 0, 0, .3)',
|
||||||
borderRadius: '2px',
|
borderRadius: '0.25rem',
|
||||||
height: `${height}px`,
|
height: `${height}px`,
|
||||||
width: '100%',
|
width: '100%',
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -32,6 +32,7 @@
|
|||||||
<url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
|
<url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
|
||||||
<url><loc>https://csslayout.io/patterns/fixed-at-side</loc></url>
|
<url><loc>https://csslayout.io/patterns/fixed-at-side</loc></url>
|
||||||
<url><loc>https://csslayout.io/patterns/floating-label</loc></url>
|
<url><loc>https://csslayout.io/patterns/floating-label</loc></url>
|
||||||
|
<url><loc>https://csslayout.io/patterns/folder-structure</loc></url>
|
||||||
<url><loc>https://csslayout.io/patterns/full-background</loc></url>
|
<url><loc>https://csslayout.io/patterns/full-background</loc></url>
|
||||||
<url><loc>https://csslayout.io/patterns/full-screen-menu</loc></url>
|
<url><loc>https://csslayout.io/patterns/full-screen-menu</loc></url>
|
||||||
<url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
|
<url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
|
||||||
|
|||||||
Reference in New Issue
Block a user