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

Optimize the Questions and answer

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-04 22:33:53 +07:00
parent 439b7062fc
commit 5b73a64e4d
1 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/patterns/questions-and-answers/Details.tsx
View File

@@ -1,5 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -18,7 +20,7 @@ const Details: React.FC<{}> = () => {
const isOpened = (index === activeItem); const isOpened = (index === activeItem);
const click = () => setActiveItem(isOpened ? -1 : index); const click = () => setActiveItem(isOpened ? -1 : index);
return ( return (
<div> <>
<div <div
style={{ style={{
alignItems: 'center', alignItems: 'center',
@@ -32,8 +34,15 @@ const Details: React.FC<{}> = () => {
{title} {title}
<Triangle size={8} corner={isOpened ? 't' : 'b'} /> <Triangle size={8} corner={isOpened ? 't' : 'b'} />
</div> </div>
{isOpened && children} <div
style={{
display: isOpened ? 'block' : 'none',
marginBottom: '16px',
}}
>
{children}
</div> </div>
</>
); );
}; };
@@ -53,6 +62,15 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<div style={{ width: '60%' }}> <div style={{ width: '60%' }}>
<div
style={{
margin: '0 auto',
paddingBottom: '24px',
width: '200px',
}}
>
<Rectangle />
</div>
<div <div
style={{ style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)', borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
@@ -63,7 +81,7 @@ const Details: React.FC<{}> = () => {
index={0} index={0}
title={<div style={{ width: '40%' }}><Rectangle /></div>} title={<div style={{ width: '40%' }}><Rectangle /></div>}
> >
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div> <Block numberOfBlocks={10} />
</Item> </Item>
</div> </div>
<div <div
@@ -75,7 +93,7 @@ const Details: React.FC<{}> = () => {
index={1} index={1}
title={<div style={{ width: '80%' }}><Rectangle /></div>} title={<div style={{ width: '80%' }}><Rectangle /></div>}
> >
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div> <Block numberOfBlocks={15} />
</Item> </Item>
</div> </div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}> <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
@@ -83,7 +101,7 @@ const Details: React.FC<{}> = () => {
index={2} index={2}
title={<div style={{ width: '60%' }}><Rectangle /></div>} title={<div style={{ width: '60%' }}><Rectangle /></div>}
> >
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div> <Block numberOfBlocks={10} />
</Item> </Item>
</div> </div>
</div> </div>
@@ -112,6 +130,8 @@ const Details: React.FC<{}> = () => {
`} `}
/> />
</div> </div>
<RelatedPatterns patterns={[Pattern.Accordion]} />
</DetailsLayout> </DetailsLayout>
); );
}; };