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

Update details layout

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-30 16:02:50 +07:00
parent 7543d759ca
commit 1762968dbf
7 changed files with 54 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/components/SampleCode.tsx
View File

@@ -3,7 +3,7 @@
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import highlight from '../helpers/highlight';
@@ -18,8 +18,11 @@ const SampleCode: React.FC<SampleCodeProps> = ({ code, fullHeight = false, lang
? <></>
: (
<pre
className="hljs"
style={{
border: 'none',
borderRadius: 0,
boxShadow: 'none',
fontFamily: "'Source Code Pro', monospace",
height: fullHeight ? '100%' : 'auto',
lineHeight: 1.5,
margin: 0,

6
client/constants/ProductList.ts
View File

@@ -25,12 +25,6 @@ const ProductList: ProductModel[] = [
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',

21
client/helpers/randomIterms.ts Normal file
View File

@@ -0,0 +1,21 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
type Tuple<T> = [number, T[]];
function randomItems<T>(arr: T[], count: number): T[] {
const result = arr.concat().reduce(
(p, _, __, arr) => {
const [a, b] = p;
return (a < count)
? [a + 1, b.concat(arr.splice(Math.random() * arr.length | 0, 1))]
: p;
},
[0, []] as Tuple<T>
);
return (result as Tuple<T>)[1];
};
export default randomItems;

4
client/index.css
View File

@@ -18,8 +18,8 @@ a {
text-decoration: none;
}
code {
font-family: 'Source Code Pro', monospace;
pre[class*="language-"] {
}
/* Layout */

10
client/layouts/DetailsLayout.tsx
View File

@@ -3,14 +3,14 @@
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Ad from '../components/Ad';
import useDocumentTitle from '../hooks/useDocumentTitle';
import Layout from './Layout';
import Product from '../components/Product';
import { ProductList } from '../constants/ProductList';
import randomFromArray from '../helpers/randomFromArray';
import randomItems from '../helpers/randomIterms';
interface DetailsLayoutProps {
title: string;
@@ -19,7 +19,7 @@ interface DetailsLayoutProps {
const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
useDocumentTitle(`CSS Layout ∙ ${title}`);
const product = randomFromArray(ProductList);
const products = randomItems(ProductList, 3);
return (
<Layout>
@@ -36,7 +36,9 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
<div className="sidebar">
<div className="sidebar__inner">
<Ad />
<Product product={product} />
{
products.map(product => <Product key={product.name} product={product} />)
}
</div>
</div>
</div>

113
client/placeholders/BrowserFrame.tsx
View File

@@ -3,9 +3,10 @@
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React, { useState } from 'react';
import * as React from 'react';
import SampleCode from '../components/SampleCode';
import './browserFrame.css';
interface BrowserFrameProps {
content: React.ReactNode;
@@ -13,113 +14,13 @@ interface BrowserFrameProps {
}
const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
const [isContentActive, setContentActive] = useState(true);
const flip = () => setContentActive((isActive) => !isActive);
return (
<div
className='shadow-2xl'
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba( 0, 0, 0, 0.05)',
borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
display: 'flex',
padding: '8px 16px',
}}
>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFB700',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
{source && (
<div style={{ marginLeft: 'auto' }}>
<button
style={{
backgroundColor: '#00449E',
borderColor: 'transparent',
borderRadius: '4px',
color: '#FFF',
cursor: 'pointer',
padding: '4px 8px',
}}
onClick={flip}
>
{isContentActive ? 'Source' : 'Demo'}
</button>
</div>
)}
<div className="demo">
<div className="demo__source">
{source && <SampleCode fullHeight={true} lang="html" code={source} />}
</div>
<div
style={{
height: '512px',
position: 'relative',
transform: isContentActive ? '' : 'rotateY(180deg)',
transformStyle: 'preserve-3d',
transition: 'transform 1s',
}}
>
<div
style={{
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
height: '100%',
left: 0,
opacity: isContentActive ? 1 : 0,
overflow: 'scroll',
position: 'absolute',
top: 0,
width: '100%',
}}
>
{content}
</div>
{source && (
<div
style={{
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
height: '100%',
left: 0,
opacity: isContentActive ? 0 : 1,
overflow: 'scroll',
position: 'absolute',
top: 0,
transform: 'rotateY(180deg)',
width: '100%',
}}
>
<SampleCode fullHeight={true} lang="html" code={source} />
</div>
)}
<div className="demo__live">
{content}
</div>
</div>
);

13
client/placeholders/browserFrame.css Normal file
View File

@@ -0,0 +1,13 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.demo {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.25rem;
}
.demo__source,
.demo__live {
height: 32rem;
}