commit e75348762ea8bc4178051a2acbe64e7fe0ec06a2
parent f78d3e5dd8e7824bde3d6d8c68346ca2ef2d00ae
Author: MTRNord <mtrnord1@gmail.com>
Date: Mon, 24 Jan 2022 22:31:52 +0100
Center the dropzone vertically
Diffstat:
1 file changed, 25 insertions(+), 21 deletions(-)
diff --git a/pages/submit.tsx b/pages/submit.tsx
@@ -2,6 +2,7 @@ import Head from "next/head";
import { PureComponent, ReactNode } from "react";
import Dropzone, { FileRejection } from "react-dropzone";
import { ClientContext } from "../components/ClientContext";
+import Footer from "../components/Footer";
import Header from "../components/Header";
type Props = {};
@@ -96,7 +97,7 @@ class Submit extends PureComponent<Props, State> {
render(): ReactNode {
return (
- <div className='min-h-full bg-[#f8f8f8] dark:bg-[#06070D]'>
+ <div className='min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
<title key="title">Matrix Art | Submit Post</title>
<meta property="og:title" content="Matrix Art | Submit Post" key="og-title" />
@@ -105,29 +106,32 @@ class Submit extends PureComponent<Props, State> {
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='w-full lg:pt-20 pt-52 z-0'>
- <div className='z-[100] sticky lg:top-20 top-[12.5rem] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
- <div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
- <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>Submit Image</h1>
- </div>
+ <div className='z-[100] sticky lg:top-20 top-[12.5rem] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
+ <div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
+ <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>Submit Image</h1>
</div>
- <div className="flex justify-center items-center mt-4">
- <Dropzone accept='image/*' onDropAccepted={this.onDrop} onDropRejected={this.onDropError}>
- {({ getRootProps, getInputProps }) => (
- <section className="flex flex-col">
- <div className="dark:bg-[#fefefe]/[.25] bg-[#14181E]/[.25] min-h-[11.5rem] min-w-[39.5rem] flex-[1] flex flex-col items-center justify-center p-5 border-2 rounded-sm border-[#eeeeee] border-dashed outline-none hover:border-[#2196f3] duration-[24ms] transition" {...getRootProps()}>
- <input {...getInputProps()} />
- <p className="text-base text-gray-900 dark:text-gray-200">Drag 'n' drop some images here, or click to select images</p>
- </div>
- <ul className="flex flex-row flex-wrap gap-1 mt-4 max-w-[50rem] justify-evenly">
- {this.renderThumbs()}
- <li className='grow-[10]'></li>
- </ul>
- </section>
- )}
- </Dropzone>
+ </div>
+ <main className='min-h-full lg:pt-20 pt-52 z-0 bottom-0 relative'>
+ <div className="min-h-full flex justify-center items-center">
+ <div className="flex justify-center items-center mt-4">
+ <Dropzone accept='image/*' onDropAccepted={this.onDrop} onDropRejected={this.onDropError}>
+ {({ getRootProps, getInputProps }) => (
+ <section className="flex flex-col">
+ <div className="dark:bg-[#fefefe]/[.25] bg-[#14181E]/[.25] min-h-[11.5rem] min-w-[39.5rem] flex-[1] flex flex-col items-center justify-center p-5 border-2 rounded-sm border-[#eeeeee] border-dashed outline-none hover:border-[#2196f3] duration-[24ms] transition" {...getRootProps()}>
+ <input {...getInputProps()} />
+ <p className="text-base text-gray-900 dark:text-gray-200">Drag 'n' drop some images here, or click to select images</p>
+ </div>
+ <ul className="flex flex-row flex-wrap gap-1 mt-4 max-w-[50rem] justify-evenly">
+ {this.renderThumbs()}
+ <li className='grow-[10]'></li>
+ </ul>
+ </section>
+ )}
+ </Dropzone>
+ </div>
</div>
</main>
+ <Footer></Footer>
</div>
);
}
