fafo/jeol-t330a
15
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

succd: Fix layout on large screens

Browse source 
Make sure the grid cannot grow too large on big screens.  Also slightly
adjust the breakpoint to avoid some weird artifacts.
This commit is contained in:
Rahix 2024-10-05 01:16:33 +02:00
parent e2fc15ed9b
commit 4f74e92c45
1 changed files with 13 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

18
succbone/succd/index.html
View file

@ -52,12 +52,20 @@ td > span {
height: 10em; height: 10em;
} }
.graph-container {
background-color: #e8e8e8;
text-align: center;
}
.main-grid { .main-grid {
margin: 2em; margin-top: 2em;
margin-left: auto;
margin-right: auto;
max-width: 160em;
clear: both; clear: both;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(50em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(54em, 1fr));
column-gap: 2em; column-gap: 2em;
row-gap: 2em; row-gap: 2em;
} }
@ -136,9 +144,9 @@ td > span {
</tr> </tr>
</table> </table>
<p> <div class="graph-container">
<canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas> <canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
</p> </div>
</div> </div>
<p style="font-style: italic; font-size: 12px; margin-top: 5em;"> <p style="font-style: italic; font-size: 12px; margin-top: 5em;">
@ -170,7 +178,7 @@ let historicalDraw = (w, h) => {
// coordinate calculation. // coordinate calculation.
canvas.clearRect(0, 0, w, h); canvas.clearRect(0, 0, w, h);
canvas.fillStyle = "#f0f0f0"; canvas.fillStyle = "#e8e8e8";
canvas.fillRect(0, 0, w, h); canvas.fillRect(0, 0, w, h);
// Margins of the main graph window. // Margins of the main graph window.