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

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

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

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