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 c029ed416d
commit a79ebaf044
3 changed files with 6 additions and 2 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);
}
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>
{rows.map((item, index) => <BingoRow key={index} items={item}/>)}
</tbody>

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

@ -21,7 +21,7 @@ export default function BingoController({buzzwords} : {buzzwords?: string[]}){
const sizeError = (items.length < size);
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}/>
<form className="w-1/3 m-auto">
<input type="range" min={3} max={5} value={size} className="range range-xs sm:range-sm md:range-md range-secondary" step={1} onChange={({target:{value:s}}) => setSize(+s)}/>

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

@ -9,6 +9,10 @@ export default function BingoItem({text}: Props){
const [clicked, setClicked] = React.useState(false);
return(
<<<<<<< HEAD
<td><a className={clsx("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>
>>>>>>> c0e15bc (feat: Improved layout on mobile devices)
);
}