qwertyasdfgh
/
imageboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update styling

This commit is contained in:
Joonas 2023-01-16 00:20:24 +02:00
parent 0bf4b31c40
commit f9ed2333aa
3 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Header.jsx
View File

@ -2,7 +2,7 @@ import { Link } from "@remix-run/react";
export default function Header() {
return (
<div className="flex space-x-4 justify-center items-center py-6 px-12 mb-12 bg-ctp-crust rounded shadow-lg shadow-ctp-sapphire outline">
<div className="flex space-x-4 justify-center items-center py-6 px-12 mb-12 bg-ctp-crust rounded mx-auto shadow-lg shadow-ctp-sapphire outline">
<div className="flex-1">
</div>

33
app/routes/index.jsx
View File

@ -99,22 +99,23 @@ export default function Index() {
return (
<Overlay>
<div className="bg-ctp-crust outline rounded-xl shadow-lg shadow-ctp-red max-w-2xl mx-auto p-4 space-y-4">
<div className="bg-ctp-crust outline rounded-xl shadow-lg shadow-ctp-red w-fit p-10 mx-auto space-y-4">
<h1 className="text-center text-4xl font-semibold text-transparent bg-clip-text bg-gradient-to-br from-ctp-subtext0 to-ctp-subtext1 ">Create a thread</h1>
<Form className="rounded flex flex-wrap text-center justify-center items-center " method="post" encType="multipart/form-data">
<label className="flex flex-col m-2" htmlFor="title-input"><span className="font-semibold text-ctp-subtext0">Title</span>
<textarea className=" bg-ctp-surface0 m-1 p-1 rounded-md shadow shadow-ctp-overlay0" required minLength={3} type="text" name="title" placeholder="Lain" />
<p>{errors ? errors.title : ''}</p>
</label>
<label className="flex flex-col m-2" htmlFor="post-input"><span className="font-semibold text-ctp-subtext0">Post</span>
<textarea className=" bg-ctp-surface0 m-1 p-1 rounded shadow shadow-ctp-overlay0" required minLength={3} type="text" name="post" placeholder="Iwakura" />
<p>{errors ? errors.post : ''}</p>
</label>
<label className="flex flex-col m-2" htmlFor="image-upload"><span className="font-semibold text-ctp-subtext0">Image</span>
<input className="block w-full px-3 py-1.5 text-base font-semibold text-ctp-text bg-ctp-surface0 bg-clip-padding rounded transition ease-in-out m-0" required accept="image/*" type="file" id="image-upload" name="image" />
<p>{errors ? errors.image : ''}</p>
</label>
<br />
<Form className="rounded space-y-4 flex flex-col flex-wrap text-center justify-center items-center " method="post" encType="multipart/form-data">
<div className="space-y-4">
<label className="flex flex-col" htmlFor="title-input"><span className="font-semibold text-ctp-subtext0">Title</span>
<textarea className=" bg-ctp-surface0 m-1 p-1 rounded-md shadow shadow-ctp-overlay0" required minLength={3} type="text" name="title" placeholder="Lain" />
<p className="text-ctp-red">{errors ? errors.title : ''}</p>
</label>
<label className="flex flex-col" htmlFor="post-input"><span className="font-semibold text-ctp-subtext0">Post</span>
<textarea className=" bg-ctp-surface0 m-1 p-1 rounded shadow shadow-ctp-overlay0" required minLength={3} type="text" name="post" placeholder="Iwakura" />
<p className="text-ctp-red">{errors ? errors.post : ''}</p>
</label>
<label className="flex flex-col" htmlFor="image-upload"><span className="font-semibold text-ctp-subtext0">Image (500kbps max)</span>
<input className="block w-full px-3 py-1.5 text-base font-semibold text-ctp-text bg-ctp-surface0 bg-clip-padding rounded transition ease-in-out m-0" required accept="image/*" type="file" id="image-upload" name="image" />
<p className="text-ctp-red">{errors ? errors.image : ''}</p>
</label>
</div>
<button className=" bg-ctp-surface1 text-ctp-flamingo shadow shadow-ctp-overlay0 hover hover:bg-ctp-surface2 py-2 px-4 hover:underline rounded-full" type="submit">Create!</button>
</Form>
</div>
@ -126,7 +127,7 @@ export default function Index() {
{data.length > 0 ?
<ul className="flex flex-wrap justify-around items-center p-8">
{data.map(thread =>
thread.title.includes(search) || thread.post.includes(search) ? <li className="bg-ctp-mantle shadow-xl outline shadow-ctp-pink rounded-xl p-4 m-4 hover:shadow-xl scale-100 hover:scale-110 duration-300" key={thread.id}>
thread.title.includes(search) || thread.post.includes(search) ? <li className={`bg-ctp-mantle shadow-xl outline shadow-ctp-pink rounded-xl p-4 m-4 hover:shadow-xl scale-100 hover:scale-110 duration-300`} key={thread.id}>
<Link className="space-y-4 flex flex-col" to={`threads/${thread.id}`}>
<div className="flex items-center justify-center">
<img className="w-48 max-h-96 rounded-xl " src={`/uploads/${thread.imageName}`} alt="thread image" />

12
app/routes/threads/$threadId.jsx
View File

@ -106,7 +106,7 @@ export default function Thread() {
return (
<Overlay>
<div className="flex flex-col">
<div id="OP" className="bg-ctp-crust flex flex-col shadow-lg border-4 rounded p-4">
<div id="OP" className="bg-ctp-crust w-fit flex flex-col shadow-lg border-4 rounded p-4">
<span><strong>{data.title}</strong> Post id: <strong>{data.id}</strong> Created at: <strong>{new Date(data.createdAt).toLocaleString()}</strong> Reply count: <strong>{data.posts.length}</strong></span>
<br />
<div className="flex flex-col">
@ -152,13 +152,13 @@ export default function Thread() {
)}
</ul>
</div>
<Form id="bottom" className="space-y-2 flex flex-col justify-center items-center" method="post" encType="multipart/form-data">
<label className="flex flex-col m-2 space-y-2" htmlFor="text-input">
<Form id="bottom" className="space-y-4 flex flex-col items-center" method="post" encType="multipart/form-data">
<label className="flex flex-col" htmlFor="text-input">
{replying ? <p className="text-center font-semibold text-ctp-black" >Replying to reply id: {replying} <button className="text-ctp-sky hover:text-ctp-teal hover:underline" onClick={() => setReplying('')}>Reset</button></p> : ''}
<span className="font-semibold text-center text-ctp-subtext0" >Post</span> <textarea className=" bg-ctp-surface0 m-1 p-1 rounded shadow shadow-ctp-overlay0" required minLength={3} name="post" type="text" />
{actionData ? <p>{actionData.post}</p> : ''}
</label>
<label className="flex flex-col m-2" htmlFor="image-upload"><span className="font-semibold text-center text-ctp-subtext0">Image</span>
<label className="flex flex-col" htmlFor="image-upload"><span className="font-semibold text-center text-ctp-subtext0">Image (500kbps max)</span>
<input className="block w-full px-3 py-1.5 text-base font-semibold text-ctp-text bg-ctp-surface0 bg-clip-padding rounded transition ease-in-out m-0" accept="image/*" type="file" id="image-upload" name="image" />
<p>{actionData?.image}</p>
</label>
@ -168,9 +168,9 @@ export default function Thread() {
<input className="bg-ctp-surface0 m-1 p-1 rounded shadow shadow-ctp-overlay0" placeholder="Enter a Reply ID" type="number" name="replying" value={replying} />
</div>
</details>
{actionData?.replying}
<p className="text-ctp-red">{actionData?.replying}</p>
<button className="bg-white px-4 py-2 shadow rounded-full" type="submit">Submit</button>
<button className="bg-ctp-crust px-4 py-2 shadow rounded-full" type="submit">Submit</button>
</Form>
</Overlay>
);