Make web app fill viewport

This commit is contained in:
Matthew Gordon 2025-06-10 12:26:58 -03:00
parent 420bfed5e9
commit 4d1a333414
2 changed files with 25 additions and 6 deletions

View File

@ -5,11 +5,13 @@
<link rel="stylesheet" href="pteropus-frame.css">
</style>
</head>
<body>
<body>
<div id="whole-window">
<script type="module" src="pteropus-frame.js"></script>
<canvas id="pteropus-canvas"></canvas>
<div id="bottom-panel">
<input type="file" id="file-upload-file-input" name="filename" accept="image/tiff, .tif, .tiff">
</div>
</body>
</div>
</body>
</html>

View File

@ -1,5 +1,22 @@
#pteropus-canvas {
height: 100%;
width: 100%;
display: block;
body {
margin: 0;
}
#whole-window {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
#pteropus-canvas {
display: flex;
flex-grow: 1;
margin: 0.4rem;
}
#bottom-panel {
display: flex;
flex-grow: 0;
margin: 0.4rem;
}