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

26
frontend/src/index.css
View file

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