mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-11 16:44:57 +02:00
Code Issues Releases Wiki Activity

Merge pull request #54 from phuoc-ng/rating

Browse Source 
Add rating
This commit is contained in:
phuoc-ng
2019-11-26 09:28:49 +07:00
committed by GitHub
parent 46d6b4dd57 724222053a
commit ab542dfc0e
10 changed files with 309 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/App.tsx
View File

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
import './index.css';
import Pattern from './constants/Pattern';
import Explore from './Explore';
import Home from './Home';
import DetailsLoader from './loaders/DetailsLoader';
@@ -12,6 +13,7 @@ const App = () => {
<Router>
<RouteSwitch>
<Route exact={true} path='/'><Home /></Route>
<Route exact={true} path='/explore'><Explore /></Route>
<Route exact={true} path='/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
<Route exact={true} path='/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
<Route exact={true} path='/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>
@@ -37,9 +39,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>

80
client/Explore.tsx Normal file
View File

@@ -0,0 +1,80 @@
import React from 'react';
import { Link } from 'react-router-dom';
import CoverCard from './components/CoverCard';
import Heading from './components/Heading';
import Pattern from './constants/Pattern';
import useDocumentTitle from './hooks/useDocumentTitle';
import Layout from './layouts/Layout';
const Home = () => {
useDocumentTitle('CSS Layout ∙ Explore');
return (
<Layout>
<div className="mv4">
<Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link>
</div>
<div className="bt br bl b--black-20 relative br4 br--top">
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>Explore</h1>
<h2 className="fw3 f3 tc lh-copy ma0 pa4">Here is the collection of patterns</h2>
<section>
<Heading title="Layouts" />
<div className="flex flex-wrap items-start pa4">
<CoverCard pattern={Pattern.HolyGrail} />
<CoverCard pattern={Pattern.Sidebar} />
<CoverCard pattern={Pattern.SplitScreen} />
<CoverCard pattern={Pattern.StickyFooter} />
<CoverCard pattern={Pattern.StickyHeader} />
</div>
</section>
<section>
<Heading title="Patterns" />
<div className="flex flex-wrap items-start pa4">
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} />
<CoverCard pattern={Pattern.Card} />
<CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.InputAddOn} />
<CoverCard pattern={Pattern.MediaObject} />
<CoverCard pattern={Pattern.Menu} />
<CoverCard pattern={Pattern.Modal} />
<CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.PricingTable} />
<CoverCard pattern={Pattern.PropertyList} />
<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} />
<CoverCard pattern={Pattern.SimpleGrid} />
<CoverCard pattern={Pattern.Slider} />
<CoverCard pattern={Pattern.SpinButton} />
<CoverCard pattern={Pattern.SplitNavigation} />
<CoverCard pattern={Pattern.StepperInput} />
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.Tab} />
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
<CoverCard pattern={Pattern.Wizard} />
</div>
</section>
</div>
</Layout>
);
};
export default Home;

83
client/Home.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { Link } from 'react-router-dom';
import CoverCard from './components/CoverCard';
import Heading from './components/Heading';
import Pattern from './constants/Pattern';
import useDocumentTitle from './hooks/useDocumentTitle';
import Layout from './layouts/Layout';
@@ -20,7 +20,16 @@ const Home = () => {
CSS Layout
</h1>
<h2 className="fw3 f3 tc lh-copy ma0 pa4">
<h2
style={{
fontSize: '24px',
fontWeight: 300,
lineHeight: 1.5,
margin: 0,
padding: '64px 0px 32px 0',
textAlign: 'center',
}}
>
a collection of popular layouts and patterns made with CSS
</h2>
@@ -54,22 +63,57 @@ const Home = () => {
</div>
</div>
<section>
<Heading title="Layouts" />
<div className="flex flex-wrap items-start pa4">
<section style={{ position: 'relative' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
zIndex: 9999,
}}
>
<div
style={{
fontSize: '64px',
fontWeight: 600,
marginBottom: '16px',
}}
>
50+ patterns
</div>
<Link
to="/explore"
style={{
backgroundColor: '#00449e',
borderRadius: '4px',
color: '#FFF',
fontSize: '24px',
padding: '12px 16px',
textDecoration: 'none',
}}
>
Explore the collection
</Link>
</div>
<div
style={{
display: 'flex',
flexWrap: 'wrap',
opacity: '0.4',
padding: '32px 16px',
}}
>
<CoverCard pattern={Pattern.HolyGrail} />
<CoverCard pattern={Pattern.Sidebar} />
<CoverCard pattern={Pattern.SplitScreen} />
<CoverCard pattern={Pattern.StickyFooter} />
<CoverCard pattern={Pattern.StickyHeader} />
</div>
</section>
<section>
<Heading title="Patterns" />
<div className="flex flex-wrap items-start pa4">
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} />
@@ -90,19 +134,6 @@ const Home = () => {
<CoverCard pattern={Pattern.PropertyList} />
<CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.SameHeightColumns} />
<CoverCard pattern={Pattern.SearchBox} />
<CoverCard pattern={Pattern.Separator} />
<CoverCard pattern={Pattern.SimpleGrid} />
<CoverCard pattern={Pattern.Slider} />
<CoverCard pattern={Pattern.SpinButton} />
<CoverCard pattern={Pattern.SplitNavigation} />
<CoverCard pattern={Pattern.StepperInput} />
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.Tab} />
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
<CoverCard pattern={Pattern.Wizard} />
</div>
</section>
</div>

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>