tanguy/kahvi.juustodiilerit.fi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Constrain tables/grids to fix in viewwidth

Browse source
This commit is contained in:
Tanguy Gérôme 2026-01-06 01:01:17 +02:00
parent 7d3ca6c2c6
commit 3d0e9206cd
Signed by: tanguy
GPG key ID: 10B2947233740B88
2 changed files with 44 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
frontend/src/App.tsx
View file

@ -329,30 +329,32 @@ function Home() {
<button onClick={openDialog.bind(null, addMethodDialogId)}> <button onClick={openDialog.bind(null, addMethodDialogId)}>
Add method Add method
</button> </button>
<table className='methods'> <div className='methods'>
<tbody> <table>
{methods?.map((method: any) => { <tbody>
const coffeeFound = coffees.find((coffee: any) => coffee.id === method.coffee_id) {methods?.map((method: any) => {
const grinderFound = grinders.find((grinder: any) => grinder.id === method.grinder_id) const coffeeFound = coffees.find((coffee: any) => coffee.id === method.coffee_id)
const brewerFound = brewers.find((brewer: any) => brewer.id === method.brewer_id) const grinderFound = grinders.find((grinder: any) => grinder.id === method.grinder_id)
const isRandomlySelected = (randomMethodId && method.id === randomMethodId) const brewerFound = brewers.find((brewer: any) => brewer.id === method.brewer_id)
|| (randomMix && method.coffee_id === randomMix?.coffeeId && method.grinder_id === randomMix?.grinderId && method.brewer_id === randomMix?.brewerId) const isRandomlySelected = (randomMethodId && method.id === randomMethodId)
return ( || (randomMix && method.coffee_id === randomMix?.coffeeId && method.grinder_id === randomMix?.grinderId && method.brewer_id === randomMix?.brewerId)
<tr key={`method-${method.id}`} className={`${isRandomlySelected ? 'randomlySelected' : ''}`}> return (
<td>{coffeeFound.name}</td> <tr key={`method-${method.id}`} className={`${isRandomlySelected ? 'randomlySelected' : ''}`}>
<td>{method.coffee_amount_g} g</td> <td>{coffeeFound.name}</td>
<td>{grinderFound.name}</td> <td>{method.coffee_amount_g} g</td>
<td>{method.grind_setting}</td> <td>{grinderFound.name}</td>
<td>{brewerFound.name}</td> <td>{method.grind_setting}</td>
<td>{method.water_amount_ml} ml</td> <td>{brewerFound.name}</td>
<td>{method.water_temperature_c} °C</td> <td>{method.water_amount_ml} ml</td>
<td>Bloom {method.blooming_time_sec} sec</td> <td>{method.water_temperature_c} °C</td>
<td>Brew {method.brewing_time_sec} sec</td> <td>Bloom {method.blooming_time_sec} sec</td>
</tr> <td>Brew {method.brewing_time_sec} sec</td>
) </tr>
})} )
</tbody> })}
</table> </tbody>
</table>
</div>
<div className="row randomizerButtons"> <div className="row randomizerButtons">
<button onClick={() => { <button onClick={() => {
setRandomMethodId(undefined) setRandomMethodId(undefined)

26
frontend/src/index.css
View file

@ -78,6 +78,7 @@ button:focus-visible {
padding: 0; padding: 0;
min-height: 100vh; min-height: 100vh;
min-width: 100vw; min-width: 100vw;
max-width: 100vw;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -98,6 +99,7 @@ nav h1 {
} }
main { main {
max-width: 100vw;
flex-grow: 1; flex-grow: 1;
align-self: stretch; align-self: stretch;
@ -119,29 +121,31 @@ main {
} }
.mixOptions { .mixOptions {
max-width: 95vw;
padding: 4px;
overflow: auto;
display: grid; display: grid;
grid-gap: 8px; grid-gap: 8px;
grid-template-columns: repeat(auto-fit, 300px); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-flow: column; grid-auto-flow: column;
} }
.coffees, .grinders, .brewers { .coffees, .grinders, .brewers {
/* display: grid; */
/* grid-template-columns: subgrid; */
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
justify-self: center;
} }
.coffees { .coffees {
grid-column: 1; grid-column-start: 1;
} }
.grinders { .grinders {
grid-column: 2; grid-column-start: 2;
} }
.brewers { .brewers {
grid-column: 3; grid-column-start: 3;
} }
button.coffees, button.grinders, button.brewers { button.coffees, button.grinders, button.brewers {
@ -179,11 +183,17 @@ p.coffees, p.grinders, p.brewers {
.addSomethingDialog { .addSomethingDialog {
} }
table.methods { .methods {
max-width: 95vw;
padding: 4px;
overflow: auto;
}
.methods table {
border-collapse: collapse; border-collapse: collapse;
} }
table.methods td { .methods table td {
outline: #777777 1px solid; outline: #777777 1px solid;
padding: 2px 8px; padding: 2px 8px;
} }