mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-09 07:36:30 +02:00
Add folder structure pattern
This commit is contained in:
Phuoc Nguyen
@@ -36,6 +36,7 @@ enum Pattern {
|
||||
FixedAtCorner = 'Fixed at corner',
|
||||
FixedAtSide = 'Fixed at side',
|
||||
FloatingLabel = 'Floating label',
|
||||
FolderStructure = 'Folder structure',
|
||||
FullBackground = 'Full background',
|
||||
FullScreenMenu = 'Full screen menu',
|
||||
HolyGrail = 'Holy grail',
|
||||
|
||||
@@ -121,6 +121,7 @@ const ExplorePage = () => {
|
||||
<CoverCard pattern={Pattern.FeatureList} />
|
||||
<CoverCard pattern={Pattern.FixedAtCorner} />
|
||||
<CoverCard pattern={Pattern.FixedAtSide} />
|
||||
<CoverCard pattern={Pattern.FolderStructure} />
|
||||
<CoverCard pattern={Pattern.FullBackground} />
|
||||
<CoverCard pattern={Pattern.InitialAvatar} />
|
||||
<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 { Helmet } from 'react-helmet';
|
||||
|
||||
import RelatedPatterns from '../../components/RelatedPatterns';
|
||||
import Pattern from '../../constants/Pattern';
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
@@ -13,18 +14,13 @@ import Square from '../../placeholders/Square';
|
||||
import './tree-diagram.css';
|
||||
|
||||
const Details: React.FC<{}> = () => {
|
||||
const [value, setValue] = React.useState(900);
|
||||
const decrease = () => setValue(value - 1);
|
||||
const increase = () => setValue(value + 1);
|
||||
|
||||
return (
|
||||
<DetailsLayout pattern={Pattern.TreeDiagram}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a tree diagram with CSS" />
|
||||
<meta name="keywords" content="css sitemap, css tree diagram" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div className="tree-diagram">
|
||||
<ul>
|
||||
@@ -129,56 +125,57 @@ li.tree-diagram__root::before {
|
||||
border-right: none;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<div className="tree-diagram">
|
||||
<ul>
|
||||
<li className="tree-diagram__root">
|
||||
<Square size='2.5rem' />
|
||||
<ul>
|
||||
<li>
|
||||
<Square size='2rem' />
|
||||
<ul>
|
||||
<li><Square size='1.5rem' /></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Square size='2rem' />
|
||||
<ul>
|
||||
<li>
|
||||
<Square size='1.5rem' />
|
||||
<ul>
|
||||
<li><Square size='1rem' /></li>
|
||||
<li><Square size='1rem' /></li>
|
||||
<li><Square size='1rem' /></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><Square size='1.5rem' /></li>
|
||||
<li>
|
||||
<Square size='1.5rem' />
|
||||
<ul>
|
||||
<li><Square size='1rem' /></li>
|
||||
<li><Square size='1rem' /></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><Square size='2rem' /></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="tree-diagram">
|
||||
<ul>
|
||||
<li className="tree-diagram__root">
|
||||
<Square size='2.5rem' />
|
||||
<ul>
|
||||
<li>
|
||||
<Square size='2rem' />
|
||||
<ul>
|
||||
<li><Square size='1.5rem' /></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Square size='2rem' />
|
||||
<ul>
|
||||
<li>
|
||||
<Square size='1.5rem' />
|
||||
<ul>
|
||||
<li><Square size='1rem' /></li>
|
||||
<li><Square size='1rem' /></li>
|
||||
<li><Square size='1rem' /></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><Square size='1.5rem' /></li>
|
||||
<li>
|
||||
<Square size='1.5rem' />
|
||||
<ul>
|
||||
<li><Square size='1rem' /></li>
|
||||
<li><Square size='1rem' /></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><Square size='2rem' /></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FolderStructure]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -14,7 +14,7 @@ const Rectangle: React.FC<RectangleProps> = ({ height = 8 }) => {
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, .3)',
|
||||
borderRadius: '2px',
|
||||
borderRadius: '0.25rem',
|
||||
height: `${height}px`,
|
||||
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-side</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-screen-menu</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
|
||||
|
||||
Reference in New Issue
Block a user