mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-09 15:46:55 +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

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;
}