reiyua
/
BraycedForUnbased
mirror of https://github.com/reiyua/BraycedForUnbased.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make exsting entry boxes move depending on existing entry amount

This commit is contained in:
Ray 2024-01-02 08:22:48 +00:00 committed by GitHub
parent 140fd39f4c
commit 8bdb1fa1af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@ -88,7 +88,8 @@ export function MyForm(props) {
// Create form for user to input data // Create form for user to input data
return ( return (
<div style={{ backgroundColor: '#84BC9C' }}> <div style={{ backgroundColor: '#84BC9C', display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
<div style={{ flex: 1 }}>
<Form onSubmit={submitHandler}> <Form onSubmit={submitHandler}>
<Form.Group> <Form.Group>
<Form.Label style={{ fontSize: '40px' }}>Ray's Unbased Takes</Form.Label> <Form.Label style={{ fontSize: '40px' }}>Ray's Unbased Takes</Form.Label>
@ -136,9 +137,12 @@ export function MyForm(props) {
</Col> </Col>
</Form.Group> </Form.Group>
</Form> </Form>
</div>
<div>
<h2>Existing Unbased Takes</h2> <h2>Existing Unbased Takes</h2>
<DisplayEntries /> <DisplayEntries />
</div> </div>
</div>
); );
} }
export default MyForm; export default MyForm;

4
src/components/DisplayEntries.js
View File

@ -23,9 +23,9 @@ export function DisplayEntries() {
}, []); }, []);
return ( return (
<div className="cardContainer"> <div className="cardContainer" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
{entries.map((entry) => ( {entries.map((entry) => (
<Card key={entry.id} style={{ width: '18rem' }}> <Card key={entry.id} style={{ margin: '1rem', maxWidth: 'calc(50% - 2rem)' }}>
<Card.Body> <Card.Body>
<Card.Title>{entry.submitter}</Card.Title> <Card.Title>{entry.submitter}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">{entry.date}</Card.Subtitle> <Card.Subtitle className="mb-2 text-muted">{entry.date}</Card.Subtitle>