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

Split cards by a few chunks

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-30 10:56:39 +07:00
parent 438be85a10
commit ab064e6c7f
4 changed files with 67 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/helpers/chunk.ts Normal file
View File

@@ -0,0 +1,10 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
function chunk<T>(arr: T[], size: number): T[][] {
return arr.reduce((acc, e, i) => (i % size ? acc[acc.length - 1].push(e) : acc.push([e]), acc), []);
};
export default chunk;

95
client/pages/HomePage.tsx
View File

@@ -12,13 +12,19 @@ import './home.css';
import Ad from '../components/Ad'; import Ad from '../components/Ad';
import CoverCard from '../components/CoverCard'; import CoverCard from '../components/CoverCard';
import Pattern from '../constants/Pattern'; import Pattern from '../constants/Pattern';
import chunk from '../helpers/chunk';
import useDocumentTitle from '../hooks/useDocumentTitle'; import useDocumentTitle from '../hooks/useDocumentTitle';
import Layout from '../layouts/Layout'; import Layout from '../layouts/Layout';
const NUM_SLIDES = 3;
const HomePage = () => { const HomePage = () => {
useDocumentTitle('CSS Layout'); useDocumentTitle('CSS Layout');
const numPatterns = Object.keys(Pattern).length; const numPatterns = Object.keys(Pattern).length;
const numPatternsPerSlide = Math.floor(numPatterns / NUM_SLIDES);
const groups = chunk(Object.entries(Pattern).map(([_, v]) => v).slice(0, NUM_SLIDES * numPatternsPerSlide), numPatternsPerSlide);
return ( return (
<Layout> <Layout>
<Helmet> <Helmet>
@@ -34,80 +40,41 @@ const HomePage = () => {
<div className="container"> <div className="container">
<div className="home__features"> <div className="home__features">
<div className="home__features-feature"> <div className="home__feature">
<div className="home__features-title">Zero Dependencies</div> <div className="home__title">Zero Dependencies</div>
</div> </div>
<div className="home__features-feature"> <div className="home__feature">
<div className="home__features-title">No Frameworks</div> <div className="home__title">No Frameworks</div>
</div> </div>
<div className="home__features-feature"> <div className="home__feature">
<div className="home__features-title">No CSS Hacks</div> <div className="home__title">No CSS Hacks</div>
</div> </div>
<div className="home__features-feature"> <div className="home__feature">
<div className="home__features-title">Real Use Cases</div> <div className="home__title">Real Use Cases</div>
</div> </div>
<div className="home__features-feature"> <div className="home__feature">
<div className="home__features-title">Good Practices</div> <div className="home__title">Good Practices</div>
</div> </div>
<div className="home__features-feature"> <div className="home__feature">
<div className="home__features-title">Accessibility</div> <div className="home__title">Accessibility</div>
</div> </div>
</div> </div>
<section className="home__patterns"> <section className="home__patterns">
<div className="home__patterns-overlay"> <div className="home__overlay">
<div className="home__patterns-heading">{numPatterns} patterns</div> <div className="home__heading">{numPatterns} patterns</div>
<Link to="/patterns" className="home__patterns-explore">Explore the collection</Link> <Link to="/patterns" className="home__explore">Explore the collection</Link>
</div> </div>
<div className="home__patterns-content"> <div className="home__sliders">
<CoverCard pattern={Pattern.HolyGrail} /> {
<CoverCard pattern={Pattern.Sidebar} /> groups.map((patterns, index) => (
<CoverCard pattern={Pattern.SplitScreen} /> <div className="home__slide" key={index}>
<CoverCard pattern={Pattern.StickyFooter} /> {
<CoverCard pattern={Pattern.StickyHeader} /> patterns.map(pattern => <CoverCard key={pattern} pattern={pattern} />)
<CoverCard pattern={Pattern.AvatarList} /> }
<CoverCard pattern={Pattern.Badge} /> </div>
<CoverCard pattern={Pattern.Breadcrumb} /> ))
<CoverCard pattern={Pattern.ButtonWithIcon} /> }
<CoverCard pattern={Pattern.Card} />
<CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.CircularNavigation} />
<CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.DropCap} />
<CoverCard pattern={Pattern.Dropdown} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.FloatingLabel} />
<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.PresenceIndicator} />
<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.UploadButton} />
<CoverCard pattern={Pattern.Wizard} />
</div> </div>
</section> </section>
</div> </div>

45
client/pages/home.css
View File

@@ -31,28 +31,28 @@
margin: 2.5rem auto; margin: 2.5rem auto;
max-width: 48rem; max-width: 48rem;
} }
.home__features-feature { .home__feature {
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
width: 33.333%; width: 33.333%;
} }
.home__features-feature:not(:nth-child(3n)) { .home__feature:not(:nth-child(3n)) {
border-right: 1px solid var(--text-color); border-right: 1px solid var(--text-color);
} }
.home__features-feature:nth-child(-n+3) { .home__feature:nth-child(-n+3) {
border-bottom: 1px solid var(--text-color); border-bottom: 1px solid var(--text-color);
} }
.home__features-title { .home__title {
font-size: 2rem; font-size: 2rem;
font-weight: 500; font-weight: 500;
} }
.home__patterns { .home__patterns {
height: 80rem; height: 60rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.home__patterns-overlay { .home__overlay {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -64,12 +64,12 @@
width: 100%; width: 100%;
z-index: 10; z-index: 10;
} }
.home__patterns-heading { .home__heading {
font-size: 4rem; font-size: 4rem;
font-weight: 600; font-weight: 600;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.home__patterns-explore { .home__explore {
background-color: var(--background-color); background-color: var(--background-color);
border-radius: 0.4rem; border-radius: 0.4rem;
color: var(--text-color); color: var(--text-color);
@@ -77,23 +77,28 @@
padding: 1rem 2rem; padding: 1rem 2rem;
} }
.home__patterns-content { .home__sliders {
animation: slide 40s linear infinite; align-items: center;
display: flex;
flex-wrap: nowrap;
opacity: 0.4;
width: 192rem;
}
.home__slide {
animation: slide 20s linear infinite;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 60rem;
justify-content: center; justify-content: center;
opacity: 0.4; width: 64rem;
padding: 2rem 1rem; will-change: transform;
} }
@keyframes slide{ @keyframes slide {
0% { from {
transform: translateY(0); transform: translateX(0);
} }
50% { to {
transform: translateY(-40rem); transform: translateX(-100%);
}
100% {
transform: translateY(0);
} }
} }