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

List products on sidebar

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-30 15:09:47 +07:00
parent 0e5f8059c5
commit f334b7208d
15 changed files with 287 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
client/components/Product.tsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import './product.css';
import ProductModel from '../constants/ProductModel';
import slug from '../helpers/slug';
interface ProductProps {
product: ProductModel;
}
const Product: React.FC<ProductProps> = ({ product }) => {
return (
<div className="product">
<a href={product.url}>
<img className="product__logo" src={`/assets/${slug(product.name)}.png`} alt={`${product.name} - ${product.description}`} />
<div className="product__desc">{product.description}</div>
</a>
</div>
);
};
export default Product;

22
client/components/product.css Normal file
View File

@@ -0,0 +1,22 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.product {
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 0.5rem;
margin: 1rem 0;
overflow: hidden;
}
.product a {
text-decoration: none;
}
.product__logo {
height: auto;
width: 100%;
}
.product__desc {
padding: 0.5rem;
text-align: center;
}

60
client/constants/ProductList.ts Normal file
View File

@@ -0,0 +1,60 @@
import ProductModel from './ProductModel';
const ProductList: ProductModel[] = [
{
name: 'Blur Page',
url: 'https://blur.page',
description: 'A browser extension to hide sensitive information on a web page',
themeColor: '#4e7fb8',
},
{
name: 'Form Validation',
url: 'https://formvalidation.io',
description: 'The best validation library for JavaScript',
themeColor: '#014ba6',
},
{
name: 'React PDF Viewer',
url: 'https://react-pdf-viewer.dev',
description: 'A React component to view a PDF document',
themeColor: '#fb6303',
},
{
name: '1 LOC',
url: 'https://1loc.dev',
description: 'Favorite JavaScript utilities in single line of code',
themeColor: '#000200',
},
{
name: 'CSS Layout',
url: 'https://csslayout.io',
description: 'A collection of popular layouts and patterns made with CSS',
themeColor: '#e7d900',
},
{
name: 'Front-end Tips',
url: 'https://getfrontend.tips',
description: 'Super tiny, quick tips, tricks and best practices of front-end development',
themeColor: '#2e2c74',
},
{
name: 'HTML DOM',
url: 'https://htmldom.dev',
description: 'How to manage HTML DOM with vanilla JavaScript',
themeColor: '#5b5d8a',
},
{
name: 'Responsive Design Patterns',
url: 'https://responsive.page',
description: 'A collection of patterns to create a responsive web page',
themeColor: '#43246d',
},
{
name: 'this VS that',
url: 'https://thisthat.dev',
description: 'The differences between _ and _ in the front-end development',
themeColor: '#414293',
},
];
export { ProductList };

6
client/constants/ProductModel.ts Normal file
View File

@@ -0,0 +1,6 @@
export default interface ProductModel {
name: string;
url: string;
description: string;
themeColor: string;
}

36
client/index.css
View File

@@ -28,10 +28,24 @@ code {
max-width: 64rem;
padding: 0 1rem;
}
.content {
display: flex;
}
.main {
margin: 4rem 0;
flex: 1;
overflow: auto;
}
.sidebar {
display: none;
}
/* Sidebar */
.sidebar__inner {
position: sticky;
top: 1rem;
}
/* Hero */
.hero {
background: var(--background-color);
display: flex;
@@ -58,4 +72,24 @@ code {
font-size: 2rem;
margin: 2rem 0;
text-align: center;
}
/* Responsive */
@media (min-width: 640px) {
.sidebar {
display: block;
flex: 0 0 10rem;
margin-left: 0.5rem;
}
}
@media (min-width: 768px) {
.sidebar {
flex-basis: 12rem;
}
}
@media (min-width: 1024px) {
.sidebar {
flex-basis: 16rem;
margin-left: 1rem;
}
}

261
client/pages/ExplorePage.tsx
View File

@@ -9,7 +9,9 @@ import { Helmet } from 'react-helmet';
import Ad from '../components/Ad';
import CoverCard from '../components/CoverCard';
import Heading from '../components/Heading';
import Product from '../components/Product';
import Pattern from '../constants/Pattern';
import { ProductList } from '../constants/ProductList';
import useDocumentTitle from '../hooks/useDocumentTitle';
import Layout from '../layouts/Layout';
import './explorePage.css';
@@ -32,133 +34,144 @@ const ExplorePage = () => {
</div>
<div className="container">
<Ad />
<div className="content">
<main class="main">
<section>
<Heading title="Layout" />
<section>
<Heading title="Layout" />
<div className="explore__collection">
<CoverCard pattern={Pattern.CardLayout} />
<CoverCard pattern={Pattern.HolyGrail} />
<CoverCard pattern={Pattern.SameHeightColumns} />
<CoverCard pattern={Pattern.Sidebar} />
<CoverCard pattern={Pattern.SimpleGrid} />
<CoverCard pattern={Pattern.SplitScreen} />
<CoverCard pattern={Pattern.StickyFooter} />
<CoverCard pattern={Pattern.StickyHeader} />
<CoverCard pattern={Pattern.StickySections} />
</div>
</section>
<div className="explore__collection">
<CoverCard pattern={Pattern.CardLayout} />
<CoverCard pattern={Pattern.HolyGrail} />
<CoverCard pattern={Pattern.SameHeightColumns} />
<CoverCard pattern={Pattern.Sidebar} />
<CoverCard pattern={Pattern.SimpleGrid} />
<CoverCard pattern={Pattern.SplitScreen} />
<CoverCard pattern={Pattern.StickyFooter} />
<CoverCard pattern={Pattern.StickyHeader} />
<CoverCard pattern={Pattern.StickySections} />
<section>
<Heading title="Navigation" />
<div className="explore__collection">
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.CircularNavigation} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.Drawer} />
<CoverCard pattern={Pattern.Dropdown} />
<CoverCard pattern={Pattern.FullScreenMenu} />
<CoverCard pattern={Pattern.MegaMenu} />
<CoverCard pattern={Pattern.Menu} />
<CoverCard pattern={Pattern.NestedDropdowns} />
<CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.SplitNavigation} />
<CoverCard pattern={Pattern.Tab} />
<CoverCard pattern={Pattern.Wizard} />
</div>
</section>
<section>
<Heading title="Input" />
<div className="explore__collection">
<CoverCard pattern={Pattern.ButtonWithIcon} />
<CoverCard pattern={Pattern.Chip} />
<CoverCard pattern={Pattern.CustomCheckboxButton} />
<CoverCard pattern={Pattern.CustomRadioButton} />
<CoverCard pattern={Pattern.FloatingLabel} />
<CoverCard pattern={Pattern.InputAddon} />
<CoverCard pattern={Pattern.RadioButtonGroup} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.Rating} />
<CoverCard pattern={Pattern.SearchBox} />
<CoverCard pattern={Pattern.Slider} />
<CoverCard pattern={Pattern.SpinButton} />
<CoverCard pattern={Pattern.StepperInput} />
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
<CoverCard pattern={Pattern.UploadButton} />
</div>
</section>
<section>
<Heading title="Display" />
<div className="explore__collection">
<CoverCard pattern={Pattern.Accordion} />
<CoverCard pattern={Pattern.ArrowButtons} />
<CoverCard pattern={Pattern.Avatar} />
<CoverCard pattern={Pattern.AvatarList} />
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Card} />
<CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.CloseButton} />
<CoverCard pattern={Pattern.CookieBanner} />
<CoverCard pattern={Pattern.CornerRibbon} />
<CoverCard pattern={Pattern.CurvedBackground} />
<CoverCard pattern={Pattern.DiagonalSection} />
<CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.DropCap} />
<CoverCard pattern={Pattern.FadingLongSection} />
<CoverCard pattern={Pattern.FeatureComparison} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.FixedAtSide} />
<CoverCard pattern={Pattern.FullBackground} />
<CoverCard pattern={Pattern.InitialAvatar} />
<CoverCard pattern={Pattern.KeyboardShortcut} />
<CoverCard pattern={Pattern.LinedPaper} />
<CoverCard pattern={Pattern.MediaObject} />
<CoverCard pattern={Pattern.OverlayPlayButton} />
<CoverCard pattern={Pattern.PricingTable} />
<CoverCard pattern={Pattern.PropertyList} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.Ribbon} />
<CoverCard pattern={Pattern.Separator} />
<CoverCard pattern={Pattern.StackedCards} />
<CoverCard pattern={Pattern.StampBorder} />
<CoverCard pattern={Pattern.Statistic} />
<CoverCard pattern={Pattern.StatusLight} />
<CoverCard pattern={Pattern.StickyTableColumn} />
<CoverCard pattern={Pattern.StickyTableHeaders} />
<CoverCard pattern={Pattern.Teardrop} />
<CoverCard pattern={Pattern.Timeline} />
<CoverCard pattern={Pattern.TriangleButtons} />
<CoverCard pattern={Pattern.VideoBackground} />
<CoverCard pattern={Pattern.Watermark} />
</div>
</section>
<section>
<Heading title="Feedback" />
<div className="explore__collection">
<CoverCard pattern={Pattern.Modal} />
<CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.PopoverArrow} />
<CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.RadialProgressBar} />
<CoverCard pattern={Pattern.ResizableElement} />
<CoverCard pattern={Pattern.PresenceIndicator} />
<CoverCard pattern={Pattern.Tooltip} />
<CoverCard pattern={Pattern.ValidationIcon} />
</div>
</section>
</main>
<div className="sidebar">
<div className="sidebar__inner">
<Ad />
{
ProductList.map(product => <Product key={product.name} product={product} />)
}
</div>
</div>
</section>
<section>
<Heading title="Navigation" />
<div className="explore__collection">
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.CircularNavigation} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.Drawer} />
<CoverCard pattern={Pattern.Dropdown} />
<CoverCard pattern={Pattern.FullScreenMenu} />
<CoverCard pattern={Pattern.MegaMenu} />
<CoverCard pattern={Pattern.Menu} />
<CoverCard pattern={Pattern.NestedDropdowns} />
<CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.SplitNavigation} />
<CoverCard pattern={Pattern.Tab} />
<CoverCard pattern={Pattern.Wizard} />
</div>
</section>
<section>
<Heading title="Input" />
<div className="explore__collection">
<CoverCard pattern={Pattern.ButtonWithIcon} />
<CoverCard pattern={Pattern.Chip} />
<CoverCard pattern={Pattern.CustomCheckboxButton} />
<CoverCard pattern={Pattern.CustomRadioButton} />
<CoverCard pattern={Pattern.FloatingLabel} />
<CoverCard pattern={Pattern.InputAddon} />
<CoverCard pattern={Pattern.RadioButtonGroup} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.Rating} />
<CoverCard pattern={Pattern.SearchBox} />
<CoverCard pattern={Pattern.Slider} />
<CoverCard pattern={Pattern.SpinButton} />
<CoverCard pattern={Pattern.StepperInput} />
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
<CoverCard pattern={Pattern.UploadButton} />
</div>
</section>
<section>
<Heading title="Display" />
<div className="explore__collection">
<CoverCard pattern={Pattern.Accordion} />
<CoverCard pattern={Pattern.ArrowButtons} />
<CoverCard pattern={Pattern.Avatar} />
<CoverCard pattern={Pattern.AvatarList} />
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Card} />
<CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.CloseButton} />
<CoverCard pattern={Pattern.CookieBanner} />
<CoverCard pattern={Pattern.CornerRibbon} />
<CoverCard pattern={Pattern.CurvedBackground} />
<CoverCard pattern={Pattern.DiagonalSection} />
<CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.DropCap} />
<CoverCard pattern={Pattern.FadingLongSection} />
<CoverCard pattern={Pattern.FeatureComparison} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.FixedAtSide} />
<CoverCard pattern={Pattern.FullBackground} />
<CoverCard pattern={Pattern.InitialAvatar} />
<CoverCard pattern={Pattern.KeyboardShortcut} />
<CoverCard pattern={Pattern.LinedPaper} />
<CoverCard pattern={Pattern.MediaObject} />
<CoverCard pattern={Pattern.OverlayPlayButton} />
<CoverCard pattern={Pattern.PricingTable} />
<CoverCard pattern={Pattern.PropertyList} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.Ribbon} />
<CoverCard pattern={Pattern.Separator} />
<CoverCard pattern={Pattern.StackedCards} />
<CoverCard pattern={Pattern.StampBorder} />
<CoverCard pattern={Pattern.Statistic} />
<CoverCard pattern={Pattern.StatusLight} />
<CoverCard pattern={Pattern.StickyTableColumn} />
<CoverCard pattern={Pattern.StickyTableHeaders} />
<CoverCard pattern={Pattern.Teardrop} />
<CoverCard pattern={Pattern.Timeline} />
<CoverCard pattern={Pattern.TriangleButtons} />
<CoverCard pattern={Pattern.VideoBackground} />
<CoverCard pattern={Pattern.Watermark} />
</div>
</section>
<section>
<Heading title="Feedback" />
<div className="explore__collection">
<CoverCard pattern={Pattern.Modal} />
<CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.PopoverArrow} />
<CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.RadialProgressBar} />
<CoverCard pattern={Pattern.ResizableElement} />
<CoverCard pattern={Pattern.PresenceIndicator} />
<CoverCard pattern={Pattern.Tooltip} />
<CoverCard pattern={Pattern.ValidationIcon} />
</div>
</section>
</div>
</div>
</Layout>
);

BIN
public/assets/1-loc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
public/assets/blur-page.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
public/assets/css-layout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/assets/form-validation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
public/assets/front-end-tips.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
public/assets/html-dom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/assets/react-pdf-viewer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
public/assets/responsive-design-patterns.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/assets/this-vs-that.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB