Skip to content
Permalink
Browse files

[DDW-867] Implement Block details page design (#24)

  • Loading branch information...
DeeJayElly authored and rhyslbw committed Oct 9, 2019
1 parent 6ddc104 commit 86b568bc88694f9b9656a104000fe673df414f3d
@@ -5,6 +5,7 @@ Changelog

### Features

- Implement block details component ([PR 24](https://github.com/input-output-hk/cardano-explorer-app/pull/24))
- Implement transaction details component ([PR 23](https://github.com/input-output-hk/cardano-explorer-app/pull/23))
- Implement no search results component ([PR 25](https://github.com/input-output-hk/cardano-explorer-app/pull/25))
- Implement blocks component ([PR 17](https://github.com/input-output-hk/cardano-explorer-app/pull/17/))
@@ -0,0 +1,60 @@
.blockSummaryContainer {
background-color: $primary-bg;
margin: 0;
padding: 32px 247px;

.header {
margin-bottom: 41px;
}

.content {
display: flex;
justify-content: space-between;

.infoPanel {
color: $solid-text;
opacity: 0.7;

.infoRow {
display: flex;
font-size: 12px;
letter-spacing: 0.6px;
line-height: 1.33;
margin-bottom: 10px;

.infoLabel {
font-family: 'Proxima Nova Semibold', sans-serif;
font-weight: 600;
width: 130px;
}

.infoValue {
font-family: 'Proxima Nova L', sans-serif;
font-weight: 300;

span {
color: $primary-highlight-color;
cursor: pointer;
}

@media (max-width: 768px) {
word-break: break-all;
}
}

@media (max-width: 768px) {
flex-direction: column;
margin-bottom: 20px;
}
}
}
}

@media (max-width: 1200px) {
padding: 32px 200px;
}

@media (max-width: 992px) {
padding: 32px;
}
}
@@ -0,0 +1,84 @@
import { observer } from 'mobx-react-lite';
import moment from 'moment';
import DividerWithTitle from '../../widgets/divider-with-title/components/DividerWithTitle';
import styles from './BlockSummary.scss';

export interface IBlockSummaryProps {
block: number;
confirmations: number;
createdBy: string;
epoch: number;
id: string;
merkleRoot: string;
nextBlock: string;
prevBlock: string;
size: number;
time: number;
transactions: number;
}

const BlockSummary = (props: IBlockSummaryProps) => (
<div className={styles.blockSummaryContainer}>
<div className={styles.header}>
<DividerWithTitle title="Block Summary" />
</div>
<div className={styles.content}>
<div className={styles.infoPanel}>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>ID</div>
<div className={styles.infoValue}>{props.id}</div>
</div>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>Epoch</div>
<div className={styles.infoValue}>
<span>{props.epoch}</span>
</div>
</div>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>Block</div>
<div className={styles.infoValue}>{props.block}</div>
</div>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>Confirmations</div>
<div className={styles.infoValue}>{props.confirmations}</div>
</div>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>Size</div>
<div className={styles.infoValue}>{props.size} bytes</div>
</div>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>Transactions</div>
<div className={styles.infoValue}>{props.transactions}</div>
</div>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>Created by</div>
<div className={styles.infoValue}>{props.createdBy}</div>
</div>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>Time</div>
<div className={styles.infoValue}>
{moment(props.time).format('YYYY/MM/DD HH:mm:ss')}
</div>
</div>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>Previous block</div>
<div className={styles.infoValue}>
<span>{props.prevBlock}</span>
</div>
</div>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>Next block</div>
<div className={styles.infoValue}>
<span>{props.nextBlock}</span>
</div>
</div>
<div className={styles.infoRow}>
<div className={styles.infoLabel}>Merkle root</div>
<div className={styles.infoValue}>{props.merkleRoot}</div>
</div>
</div>
</div>
</div>
);

export default observer(BlockSummary);
@@ -22,5 +22,9 @@
top: 50%;
transform: translate(-50%, -50%);
z-index: 500;

@media (max-width: 340px) {
padding: 1.5px 8px;
}
}
}
@@ -1,6 +1,7 @@
import { storiesOf } from '@storybook/react';
import React from 'react';
import Blocks from '../source/features/blocks/components/Blocks';
import BlockSummary from '../source/features/blocks/components/BlockSummary';

import { ThemeDecorator } from './support/ThemeDecorator';

@@ -86,4 +87,5 @@ storiesOf('Blocks', module)
>
<Blocks items={blocks} />
</div>
));
))
.add('Block Summary', () => <BlockSummary {...blockSummary} />);

0 comments on commit 86b568b

Please sign in to comment.
You can’t perform that action at this time.