skyler
/
egui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve `multiple_apps.html` example/demo/test

This commit is contained in:
Emil Ernerfeldt 2024-06-28 08:44:17 +02:00
parent e62bd7037a
commit a6937f79f3
1 changed files with 7 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web_demo/multiple_apps.html
View File

@ -1,4 +1,3 @@
<!-- TODO(emilk): make this example nicer. The layout is HORRIBLE -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@ -21,11 +20,6 @@
display: flex; display: flex;
} }
.canvas_wrap {
/* height: 200px; */
width: 400px;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
/* Dark mode background color for what is not covered by the egui canvas, /* Dark mode background color for what is not covered by the egui canvas,
@ -37,24 +31,14 @@
/* Allow canvas to fill entire web page: */ /* Allow canvas to fill entire web page: */
html, html,
body { body {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
height: 100%; height: 100%;
width: 100%;
} }
/* Position canvas in center-top: */
canvas { canvas {
/* margin-right: auto; margin: 8px;
margin-left: auto; */ padding: 8px;
/* display: block;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%); */
width: 45%; width: 45%;
height: 90%; height: 98%;
} }
.centered { .centered {
@ -106,19 +90,14 @@
<body> <body>
<!-- The WASM code will resize the canvas dynamically --> <!-- The WASM code will resize the canvas dynamically -->
<div>controls</div>
<button class="stop_one"> <button class="stop_one">
stop Stop one app
</button> </button>
<div class="canvas_wrap one">
<canvas id="canvas_id_one"></canvas>
</div>
<div class="canvas_wrap two"> <canvas id="canvas_id_one"></canvas>
<canvas id="canvas_id_two"></canvas>
</div> <canvas id="canvas_id_two"></canvas>
<div class="centered" id="center_text"> <div class="centered" id="center_text">
<p style="font-size:16px"> <p style="font-size:16px">