matthew
/
pteropus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/index.html
View File

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

25
web/pteropus-frame.css
View File

@ -1,5 +1,22 @@
#pteropus-canvas { body {
height: 100%; margin: 0;
width: 100%; }
display: block;
#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;
} }