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

added a 'Don't overflow' button, which turns on and off flex wrap in leaderboards parent

This commit is contained in:
Joonas 2023-01-18 22:37:21 +02:00
parent bb2ab1014e
commit b63fb7e6fc
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/routes/index.jsx
View File

@ -94,7 +94,7 @@ export default function Index() {
const data = useLoaderData();
return (
<div className="container mx-auto flex min-h-screen flex-col">
<div className="flex min-h-screen flex-col">
<header
className="flex w-full flex-col items-center justify-between space-y-4 rounded-b-2xl
border-x border-b border-ctp-surface0 bg-gradient-to-r from-ctp-crust to-ctp-mantle px-12 py-4
@ -170,11 +170,24 @@ export default function Index() {
) : (
""
)}
<input
className="peer/layout hidden w-fit"
type="checkbox"
name="layout"
id="layout"
/>
<label
className="flex cursor-pointer items-center justify-center pt-4 peer-checked/layout:text-ctp-green"
for="layout"
>
Don't overflow
</label>
{data.countyData.length > 0 ? (
<ul className="flex flex-grow flex-col flex-wrap items-center justify-center p-4 md:flex-row">
<ul className="flex flex-grow flex-col overflow-x-auto p-4 peer-checked/layout:flex-wrap peer-checked/layout:items-center peer-checked/layout:justify-center md:flex-row">
{data.countyData.map((county) => (
<li
className="mx-0 my-4 flex w-full max-w-md flex-col space-y-4 rounded border border-ctp-surface0
className="mx-0 my-4 flex w-full max-w-md flex-shrink-0 flex-col space-y-4 rounded border border-ctp-surface0
bg-gradient-to-t from-ctp-crust to-ctp-mantle p-6 shadow-lg shadow-ctp-surface0 sm:mx-4"
key={county.id}
>