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

Add rating

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-26 08:52:54 +07:00
parent 46d6b4dd57
commit a936883c39
9 changed files with 171 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/App.tsx
View File

@@ -37,9 +37,8 @@ const App = () => {
<Route exact={true} path='/questions-and-answers'>
<DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
</Route>
<Route exact={true} path='/radio-switch'>
<DetailsLoader pattern={Pattern.RadioSwitch} />
</Route>
<Route exact={true} path='/radio-switch'><DetailsLoader pattern={Pattern.RadioSwitch} /></Route>
<Route exact={true} path='/rating'><DetailsLoader pattern={Pattern.Rating} /></Route>
<Route exact={true} path='/same-height-columns'>
<DetailsLoader pattern={Pattern.SameHeightColumns} />
</Route>

1
client/Home.tsx
View File

@@ -91,6 +91,7 @@ const Home = () => {
<CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.Rating} />
<CoverCard pattern={Pattern.SameHeightColumns} />
<CoverCard pattern={Pattern.SearchBox} />
<CoverCard pattern={Pattern.Separator} />

1
client/constants/Pattern.ts
View File

@@ -21,6 +21,7 @@ enum Pattern {
ProgressBar = 'Progress bar',
QuestionsAndAnswers = 'Questions and answers',
RadioSwitch = 'Radio switch',
Rating = 'Rating',
SameHeightColumns = 'Same height columns',
SearchBox = 'Search box',
Separator = 'Separator',

36
client/patterns/rating/Cover.tsx Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
}}
>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>★</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>★</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>★</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>☆</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>☆</div>
</div>
</div>
</Frame>
);
};
export default Cover;

85
client/patterns/rating/Details.tsx Normal file
View File

@@ -0,0 +1,85 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Star from './Star';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Rating">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div className="rating">
<Star isActive={false} />
<Star isActive={false} />
<Star isActive={false} />
<Star isActive={false} />
<Star isActive={true} />
</div>
</div>
)}
source={`
<style>
.rating {
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
flex-direction: row-reverse;
font-size: 32px;
}
.rating .star:hover, .rating .star:hover ~ .star {
color: transparent;
}
/*
Make all previous stars selected when hover on a star
Note that we use \`flex-direction: row-reverse\` on the container
*/
.rating .star:hover:before,
.rating .star:hover ~ .star:before {
color: #00449e;
content: '\\2605';
left: 0;
position: absolute;
}
.star {
/* Reset styles for button */
background-color: transparent;
border: transparent;
margin: 0 2px;
padding: 0;
/* Used to postion the hover state */
position: relative;
}
</style>
<div class="rating">
<button class="star">☆</button>
<button class="star">☆</button>
<button class="star">☆</button>
<button class="star">☆</button>
<button class="star">★</button>
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

17
client/patterns/rating/Star.tsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import './star.css';
interface StarProps {
isActive: boolean;
}
const Star: React.FC<StarProps> = ({ isActive }) => {
return (
<button className="star">
{isActive ? '★' : '☆'}
</button>
);
};
export default Star;

26
client/patterns/rating/star.css Normal file
View File

@@ -0,0 +1,26 @@
.rating {
align-items: center;
display: flex;
font-size: 32px;
justify-content: center;
flex-direction: row-reverse;
}
.rating .star:hover, .rating .star:hover ~ .star {
color: transparent;
}
.rating .star:hover:before, .rating .star:hover ~ .star:before {
color: #00449e;
content: '\2605';
left: 0;
position: absolute;
}
.star {
background-color: transparent;
border: transparent;
margin: 0 2px;
padding: 0;
position: relative;
}

3
client/placeholders/Frame.tsx
View File

@@ -3,8 +3,9 @@ import React from 'react';
const Frame: React.FC<{}> = ({ children }) => {
return (
<div
className="ba b--black-30 br2"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
boxShadow: 'rgba(0, 0, 0, 0.2) 0px 16px 24px -4px, rgba(0, 0, 0, 0.05) 0px 8px 8px -4px',
height: '100px',
width: '100px',

1
public/sitemap.xml
View File

@@ -25,6 +25,7 @@
<url><loc>https://csslayout.io/property-list</loc></url>
<url><loc>https://csslayout.io/questions-and-answers</loc></url>
<url><loc>https://csslayout.io/radio-switch</loc></url>
<url><loc>https://csslayout.io/rating</loc></url>
<url><loc>https://csslayout.io/same-height-columns</loc></url>
<url><loc>https://csslayout.io/search-box</loc></url>
<url><loc>https://csslayout.io/separator</loc></url>