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

100
src/App.js
View File

@ -88,56 +88,60 @@ 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' }}>
<Form onSubmit={submitHandler}> <div style={{ flex: 1 }}>
<Form.Group> <Form onSubmit={submitHandler}>
<Form.Label style={{ fontSize: '40px' }}>Ray's Unbased Takes</Form.Label> <Form.Group>
<p>Submit any unbased takes Ray has about various food's, drinks or other ungodly, unbased opinions</p> <Form.Label style={{ fontSize: '40px' }}>Ray's Unbased Takes</Form.Label>
<Col sm={2}></Col> <p>Submit any unbased takes Ray has about various food's, drinks or other ungodly, unbased opinions</p>
<Col sm={8}> <Col sm={2}></Col>
<Form.Label style={{ fontSize: '30px' }}>Enter submitter name:</Form.Label> <Col sm={8}>
<Form.Control <Form.Label style={{ fontSize: '30px' }}>Enter submitter name:</Form.Label>
name="submitter" <Form.Control
type="text" name="submitter"
placeholder="Name" type="text"
value={submitter} placeholder="Name"
onChange={(e) => setSubmitter(e.target.value)} value={submitter}
/> onChange={(e) => setSubmitter(e.target.value)}
<Form.Label style={{ fontSize: '30px' }}>What date did Ray admit this cursed, unbased opinion? (dd-mm-yyyy):</Form.Label> />
<Form.Control <Form.Label style={{ fontSize: '30px' }}>What date did Ray admit this cursed, unbased opinion? (dd-mm-yyyy):</Form.Label>
name="date" <Form.Control
type="text" name="date"
placeholder="Date" type="text"
value={date} placeholder="Date"
onChange={(e) => setDate(e.target.value)} value={date}
/> onChange={(e) => setDate(e.target.value)}
<Form.Label style={{ fontSize: '30px' }}>Enter context and item for this unbased take of Ray:</Form.Label> />
<Form.Control <Form.Label style={{ fontSize: '30px' }}>Enter context and item for this unbased take of Ray:</Form.Label>
type="text" <Form.Control
name="context" type="text"
placeholder="Enter context here" name="context"
value={context} placeholder="Enter context here"
onChange={(e) => setContext(e.target.value)} value={context}
/> onChange={(e) => setContext(e.target.value)}
/>
<Form.Label style={{ fontSize: '30px' }}>Optionally upload evidence:</Form.Label>
<p>The storage bucket I get is limited to 1GB in total with the free tier Google provides but can upgrade if it get's used alot by us.</p> <Form.Label style={{ fontSize: '30px' }}>Optionally upload evidence:</Form.Label>
<Form.Control <p>The storage bucket I get is limited to 1GB in total with the free tier Google provides but can upgrade if it get's used alot by us.</p>
type="file" <Form.Control
name="fileupload" type="file"
placeholder="Upload file here" name="fileupload"
onChange={(e) => { placeholder="Upload file here"
e.stopPropagation(); onChange={(e) => {
setFileupload(e.target.files[0]); e.stopPropagation();
setFileupload(e.target.files[0]);
}} }}
/> />
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>
</Col> </Col>
</Form.Group> </Form.Group>
</Form> </Form>
<h2>Existing Unbased Takes</h2> </div>
<DisplayEntries /> <div>
<h2>Existing Unbased Takes</h2>
<DisplayEntries />
</div>
</div> </div>
); );
} }

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>