datalore/buzzword-bingo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

feat: Improved layout on mobile devices

Browse Source
This commit is contained in:
datalore 2024-02-17 19:04:31 +01:00
parent 7d9ca6bdd5
commit c0e15bccf3
3 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/bingo.tsx
View File

@ -13,7 +13,7 @@ export default function Bingo({size, items}: Props){
rows[i] = activeItems.slice(i * size, (i + 1) * size); rows[i] = activeItems.slice(i * size, (i + 1) * size);
} }
return( return(
<table className='w-1/2 table table-xs sm:table-sm md:table-md bg-primary text-primary-content m-auto'> <table className='table table-xs bg-primary text-primary-content m-auto'>
<tbody> <tbody>
{rows.map((item, index) => <BingoRow key={index} items={item}/>)} {rows.map((item, index) => <BingoRow key={index} items={item}/>)}
</tbody> </tbody>

2
src/app/components/bingocontroller.tsx
View File

@ -22,7 +22,7 @@ export default function BingoController({buzzwords, maxSize} : {buzzwords?: stri
const sizeError = (items.length < size); const sizeError = (items.length < size);
return( return(
<> <>
<div className="w-3/4 flex flex-col m-auto gap-4"> <div className="w-full md:w-3/4 flex flex-col m-auto gap-4">
<Bingo size={size} items={items}/> <Bingo size={size} items={items}/>
<form className="w-1/3 m-auto"> <form className="w-1/3 m-auto">
<input type="range" min={3} max={maxSize!} value={size} className="range range-xs sm:range-sm md:range-md range-secondary" step={1} onChange={({target:{value:s}}) => setSize(+s)}/> <input type="range" min={3} max={maxSize!} value={size} className="range range-xs sm:range-sm md:range-md range-secondary" step={1} onChange={({target:{value:s}}) => setSize(+s)}/>

2
src/app/components/bingoitem.tsx
View File

@ -9,6 +9,6 @@ export default function BingoItem({text}: Props){
const [clicked, setClicked] = React.useState(false); const [clicked, setClicked] = React.useState(false);
return( return(
<td><a className={clsx("text-xs btn btn-xs sm:btn-sm md:btn-md w-full", {"btn-ghost":(!clicked)}, {"btn-accent":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td> <td><a className={clsx("btn btn-xs w-full overflow-hidden", {"btn-ghost":(!clicked)}, {"btn-accent":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td>
); );
} }