From 3caa6e0258652d5adf70b46f206bfe7e61f9e781 Mon Sep 17 00:00:00 2001
From: meyer <meyer@astron.nl>
Date: Tue, 17 Nov 2020 21:26:43 +0100
Subject: [PATCH] use container instead of cards for a different layout
---
src/components/archives/ArchiveCard.js | 21 ++++++++++++---------
src/components/archives/Archives.js | 10 ++++++----
2 files changed, 18 insertions(+), 13 deletions(-)
diff --git a/src/components/archives/ArchiveCard.js b/src/components/archives/ArchiveCard.js
index a4dcad0..a639c36 100644
--- a/src/components/archives/ArchiveCard.js
+++ b/src/components/archives/ArchiveCard.js
@@ -5,12 +5,10 @@ import { NavLink } from "react-router-dom";
// display a single archive on a card
export default function ArchiveCard({ archive }) {
return (
- <Card className="card-description">
+ <Card>
<Card.Body>
<Card.Title className="h2">{archive.name}</Card.Title>
- <Container fluid>
- <Row>
- <Card className="card-description">
+ <Card className="card-description">
<Card.Body>
<Image
className="mx-auto d-block"
@@ -21,19 +19,24 @@ export default function ArchiveCard({ archive }) {
<Card.Title className="h3 pt-3">{archive.short_description}</Card.Title>
<Card.Text className="text-justify">{archive.long_description}</Card.Text>
</Card.Body>
+ </Card>
+ {/* <Container fluid>
+ <Row>
+
</Card>
</Row>
<Row className="p-2">
- <Button
- className="mx-auto"
+
+ </Row>
+ </Container> */}
+ <Button
+ className="mt-3"
as={NavLink}
variant="outline-info"
to={`/archives/${archive.uri}`}
>
Visit {archive.name} Archives
- </Button>
- </Row>
- </Container>
+ </Button>
</Card.Body>
</Card>
);
diff --git a/src/components/archives/Archives.js b/src/components/archives/Archives.js
index f2148c0..8bc97d4 100644
--- a/src/components/archives/Archives.js
+++ b/src/components/archives/Archives.js
@@ -1,5 +1,5 @@
import React, { useContext } from "react";
-import { CardColumns } from "react-bootstrap";
+import { Container, Row, Col } from "react-bootstrap";
import ArchiveCard from "./ArchiveCard";
import { GlobalContext } from "../../contexts/GlobalContext";
@@ -9,11 +9,13 @@ export function Archives() {
console.log("archives: ", { archives });
return (
- <CardColumns className="row-2">
+ <Container fluid>
+ <Row>
{archives.map((archive) => {
let key = "archive-" + archive.id;
- return <ArchiveCard key={key} archive={archive} />;
+ return <Col><ArchiveCard key={key} archive={archive} /></Col>;
})}
- </CardColumns>
+ </Row>
+ </Container>
);
}
--
GitLab