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

Add voting control

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-04-01 22:32:40 +07:00
parent 6fda4730b3
commit 2d21c9427f
7 changed files with 283 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -93,6 +93,7 @@ enum Pattern {
UploadButton = 'Upload button',
ValidationIcon = 'Validation icon',
VideoBackground = 'Video background',
Voting = 'Voting',
Watermark = 'Watermark',
Wizard = 'Wizard',
}

1
client/pages/ExplorePage.tsx
View File

@@ -142,6 +142,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Timeline} />
<CoverCard pattern={Pattern.TriangleButtons} />
<CoverCard pattern={Pattern.VideoBackground} />
<CoverCard pattern={Pattern.Voting} />
<CoverCard pattern={Pattern.Watermark} />
</div>
</section>

2
client/patterns/spin-button/Details.tsx
View File

@@ -134,7 +134,7 @@ css={`
</div>
</BrowserFrame>
</div>
<RelatedPatterns patterns={[Pattern.StepperInput]} />
<RelatedPatterns patterns={[Pattern.StepperInput, Pattern.Voting]} />
</DetailsLayout>
);
};

2
client/patterns/stepper-input/Details.tsx
View File

@@ -147,7 +147,7 @@ css={`
</div>
</BrowserFrame>
</div>
<RelatedPatterns patterns={[Pattern.SpinButton]} />
<RelatedPatterns patterns={[Pattern.SpinButton, Pattern.Voting]} />
</DetailsLayout>
);
};

2
client/patterns/triangle-buttons/Details.tsx
View File

@@ -238,7 +238,7 @@ css={`
</BrowserFrame>
</div>
<RelatedPatterns patterns={[Pattern.ArrowButtons]} />
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Voting]} />
</DetailsLayout>
);
};

88
client/patterns/voting/Cover.tsx Normal file
View File

@@ -0,0 +1,88 @@
/**
* 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';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '0.5rem',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '0.25rem',
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div
style={{
height: '1rem',
position: 'relative',
}}
>
<div
style={{
borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
borderStyle: 'solid',
borderWidth: '0 0.5rem 0.5rem 0.5rem',
height: 0,
left: '50%',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
width: 0,
}}
/>
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
flex: 1,
padding: '0.25rem',
justifyContent: 'center',
}}
>
99
</div>
<div
style={{
height: '1rem',
position: 'relative',
}}
>
<div
style={{
borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
borderStyle: 'solid',
borderWidth: '0.5rem 0.5rem 0 0.5rem',
height: 0,
left: '50%',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
width: 0,
}}
/>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

190
client/patterns/voting/Details.tsx Normal file
View File

@@ -0,0 +1,190 @@
/**
* 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';
const Details: React.FC<{}> = () => {
const [value, setValue] = React.useState(900);
const decrease = () => setValue(value - 1);
const increase = () => setValue(value + 1);
return (
<DetailsLayout pattern={Pattern.Voting}>
<Helmet>
<meta name="description" content="Create a voting control with CSS flexbox" />
<meta name="keywords" content="css flexbox, css triangle buttons, css voting control" />
</Helmet>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div class="voting">
<!-- Up button -->
<button class="voting__button">
<div class="voting__triangle voting__triangle--up"></div>
</button>
<!-- Number -->
<div class="voting__number">
...
</div>
<!-- Down button -->
<button class="voting__button">
<div class="voting__triangle voting__triangle--down"></div>
</button>
</div>
`}
css={`
.voting {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0.25rem;
display: flex;
flex-direction: column;
height: 8rem;
}
.voting__button {
/* Reset */
background: none;
border: none;
cursor: pointer;
/* Size */
height: 1rem;
/* Position the triangle */
position: relative;
}
.voting__triangle {
border-style: solid;
/* Size */
height: 0;
width: 0;
}
.voting__triangle--up {
border-color: transparent transparent rgba(0, 0, 0, 0.3);
border-width: 0 0.5rem 0.5rem;
}
.voting__triangle--down {
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
border-width: 0.5rem 0.5rem 0px;
}
.voting__number {
/* Take the available height */
flex: 1;
/* Center the number */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 0.25rem;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '0.5rem',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '0.25rem',
display: 'flex',
flexDirection: 'column',
height: '8rem',
}}
>
<button
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
height: '1rem',
position: 'relative',
}}
onClick={increase}
>
<div
style={{
borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
borderStyle: 'solid',
borderWidth: '0 0.5rem 0.5rem 0.5rem',
height: 0,
left: '50%',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
width: 0,
}}
/>
</button>
<div
style={{
alignItems: 'center',
display: 'flex',
flex: 1,
padding: '0.25rem',
justifyContent: 'center',
}}
>
{value}
</div>
<button
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
height: '1rem',
position: 'relative',
}}
onClick={decrease}
>
<div
style={{
borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
borderStyle: 'solid',
borderWidth: '0.5rem 0.5rem 0 0.5rem',
height: 0,
left: '50%',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
width: 0,
}}
/>
</button>
</div>
</div>
</BrowserFrame>
</div>
<RelatedPatterns
patterns={[
Pattern.SpinButton, Pattern.StepperInput, Pattern.TriangleButtons
]}
/>
</DetailsLayout>
);
};
export default Details;