Skip to content

Commit 8858161

Browse files
AlenarAlenar
committed
refactor(explorer): Put all data over one line with responsive break
This is a tradeoff, we take more vertical space with less data density for data aligned horizontaly. This allow to limit the number of time a long string is broken in several lines
1 parent 5d79afb commit 8858161

File tree

5 files changed

+87
-79
lines changed

5 files changed

+87
-79
lines changed

‎mithril-explorer/src/components/Artifacts/ArtifactCol.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from "react";
2+
import { Col } from "react-bootstrap";
3+
4+
export default function ArtifactCol({ label, children, className = "", ...props }) {
5+
return (
6+
<Col
7+
className={`mx-2 px-0 py-1 d-flex flex-column justify-content-between ${className}`}
8+
{...props}>
9+
<div>
10+
<div>
11+
<em>{label}:</em>
12+
</div>
13+
<div className={`test-end`}>{children}</div>
14+
</div>
15+
<hr className="my-1" />
16+
</Col>
17+
);
18+
}

‎mithril-explorer/src/components/Artifacts/ArtifactListItem.js‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎mithril-explorer/src/components/Artifacts/ArtifactTitle.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Card, Stack } from "react-bootstrap";
2+
import CopyableHash from "#/CopyableHash";
3+
import React from "react";
4+
5+
export default function ArtifactTitle({ hash, index }) {
6+
return (
7+
<Stack direction="horizontal" gap={2}>
8+
<h6 className="text-secondary card-title">#{index + 1}.</h6>
9+
<Card.Title>
10+
<CopyableHash hash={hash} />
11+
</Card.Title>
12+
</Stack>
13+
);
14+
}

‎mithril-explorer/src/components/Artifacts/CardanoDbV2SnapshotsList/DownloadButton.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,12 @@ export default function DownloadButton({ artifactUrl, ...props }) {
127127
Download <DownloadIcon />
128128
</Button>
129129

130-
<Overlay target={target.current} show={show} rootClose onHide={handleClose}>
130+
<Overlay
131+
target={target.current}
132+
show={show}
133+
rootClose
134+
onHide={handleClose}
135+
placement="top-end">
131136
<Popover className={styles.downloadPopover}>
132137
<Popover.Header>
133138
Download Options{" "}

‎mithril-explorer/src/components/Artifacts/CardanoDbV2SnapshotsList/index.js‎

Lines changed: 49 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { useEffect, useState } from "react";
22
import { useSelector } from "react-redux";
3-
import { Button, Card, Col, Container, Row, Stack } from "react-bootstrap";
4-
import ArtifactListItem from "#/Artifacts/ArtifactListItem";
3+
import { Button, Card, Container, Row, Stack } from "react-bootstrap";
4+
import ArtifactCol from "#/Artifacts/ArtifactCol";
5+
import ArtifactTitle from "#/Artifacts/ArtifactTitle";
56
import LatestBadge from "#/Artifacts/LatestBadge";
67
import CertificateModal from "#/CertificateModal";
78
import LocalDateTime from "#/LocalDateTime";
@@ -60,61 +61,56 @@ export default function CardanoDbV2SnapshotsList(props) {
6061
{Object.entries(cardanoDbSnapshots).length === 0 ? (
6162
<p>No cardano database snapshot available</p>
6263
) : (
63-
<Container fluid>
64-
<Row xs={1} md={2} lg={3} xl={4}>
65-
{cardanoDbSnapshots.map((cdb_snapshot, index) => (
66-
<Col key={cdb_snapshot.hash} className="mb-2">
67-
<Card border={index === 0 ? "primary" : ""}>
68-
<Card.Body>
69-
<Card.Title>{cdb_snapshot.hash}</Card.Title>
70-
<ArtifactListItem label="Epoch">{cdb_snapshot.beacon.epoch}</ArtifactListItem>
71-
<ArtifactListItem label="Immutable file number">
64+
<Stack className="mx-2" gap={2}>
65+
{cardanoDbSnapshots.map((cdb_snapshot, index) => (
66+
<Card border={index === 0 ? "primary" : ""} key={cdb_snapshot.hash}>
67+
<Card.Body className="pt-2 pb-1">
68+
<ArtifactTitle hash={cdb_snapshot.hash} index={index} />
69+
<Container fluid>
70+
<Row>
71+
<ArtifactCol label="Epoch">{cdb_snapshot.beacon.epoch}</ArtifactCol>
72+
<ArtifactCol label="Immutable file number">
7273
{cdb_snapshot.beacon.immutable_file_number}
73-
</ArtifactListItem>
74-
<ArtifactListItem label="Merkle Root" wordBreak vertical>
75-
{cdb_snapshot.merkle_root}
76-
</ArtifactListItem>
77-
<ArtifactListItem label="Cardano node">
78-
{cdb_snapshot.cardano_node_version}
79-
</ArtifactListItem>
80-
<ArtifactListItem label="Compression">
81-
{cdb_snapshot.compression_algorithm}
82-
</ArtifactListItem>
83-
<ArtifactListItem label="Certificate hash" wordBreak vertical>
84-
{cdb_snapshot.certificate_hash}{" "}
85-
<Button
86-
size="sm"
87-
onClick={() => showCertificate(cdb_snapshot.certificate_hash)}>
88-
Show
89-
</Button>
90-
</ArtifactListItem>
91-
<ArtifactListItem label="Created">
74+
</ArtifactCol>
75+
<ArtifactCol label="Created">
9276
<LocalDateTime datetime={cdb_snapshot.created_at} />
93-
</ArtifactListItem>
94-
<ArtifactListItem label="DB size">
77+
</ArtifactCol>
78+
<ArtifactCol label="DB size">
9579
{formatBytes(cdb_snapshot.total_db_size_uncompressed)}{" "}
9680
<QuestionTooltip tooltip="Total uncompressed database size" />
97-
</ArtifactListItem>
98-
</Card.Body>
99-
<Card.Footer>
100-
<Stack direction="horizontal" gap={1}>
101-
<LatestBadge show={index === 0} />
102-
<DownloadButton
103-
size="sm"
104-
className="ms-auto"
105-
artifactUrl={`${artifactsEndpoint}/${cdb_snapshot.hash}`}
106-
/>
107-
<RawJsonButton
108-
href={`${artifactsEndpoint}/${cdb_snapshot.hash}`}
109-
size="sm"
110-
/>
111-
</Stack>
112-
</Card.Footer>
113-
</Card>
114-
</Col>
115-
))}
116-
</Row>
117-
</Container>
81+
</ArtifactCol>
82+
<ArtifactCol label="Cardano node">
83+
{cdb_snapshot.cardano_node_version}
84+
</ArtifactCol>
85+
<ArtifactCol label="Compression">
86+
{cdb_snapshot.compression_algorithm}
87+
</ArtifactCol>
88+
<ArtifactCol label="Merkle Root">{cdb_snapshot.merkle_root}</ArtifactCol>
89+
<ArtifactCol label="Certificate hash">
90+
{cdb_snapshot.certificate_hash}
91+
</ArtifactCol>
92+
</Row>
93+
</Container>
94+
</Card.Body>
95+
<Card.Footer>
96+
<Stack direction="horizontal" gap={1}>
97+
<LatestBadge show={index === 0} />
98+
<Button
99+
size="sm"
100+
className="ms-auto"
101+
onClick={() => showCertificate(cdb_snapshot.certificate_hash)}>
102+
Show Certificate
103+
</Button>
104+
<DownloadButton
105+
size="sm"
106+
artifactUrl={`${artifactsEndpoint}/${cdb_snapshot.hash}`}
107+
/>
108+
<RawJsonButton href={`${artifactsEndpoint}/${cdb_snapshot.hash}`} size="sm" />
109+
</Stack>
110+
</Card.Footer>
111+
</Card>
112+
))}
113+
</Stack>
118114
)}
119115
</div>
120116
</>

0 commit comments

Comments
 (0)