From 4230ef4716cc6600921f5a21b245e00bb47fc2c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Tue, 21 Jun 2022 17:11:29 +0100
Subject: [PATCH] feat: better modal
---
examples/web/index.css | 20 +++++++++++++++++++-
examples/web/index.html | 24 ++++++++++++------------
2 files changed, 31 insertions(+), 13 deletions(-)
diff --git a/examples/web/index.css b/examples/web/index.css
index 02ff891..82bf280 100644
--- a/examples/web/index.css
+++ b/examples/web/index.css
@@ -263,6 +263,10 @@ p {
padding: 4px 10px 4px 10px;
}
+.tiny-button.padded-large {
+ padding: 4px 14px 4px 14px;
+}
+
.tiny-button.rounded {
padding: 4px 6px 4px 6px;
}
@@ -346,6 +350,12 @@ p {
height: 100%;
justify-content: center;
left: 0px;
+ opacity: 0;
+ -o-opacity: 0;
+ -ms-opacity: 0;
+ -moz-opacity: 0;
+ -khtml-opacity: 0;
+ -webkit-opacity: 0;
pointer-events: none;
position: fixed;
text-align: center;
@@ -390,7 +400,15 @@ p {
}
.modal-container > .modal .modal-buttons {
- font-size: 18px;
+ font-size: 20px;
margin-top: 24px;
text-align: center;
}
+
+.modal-container > .modal .modal-buttons > .tiny-button {
+ margin-right: 12px;
+}
+
+.modal-container > .modal .modal-buttons > .tiny-button:last-child {
+ margin-right: 0px;
+}
diff --git a/examples/web/index.html b/examples/web/index.html
index a4df831..b22d248 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -32,9 +32,9 @@
<dd><span id="rom-size">-</span> bytes</dd>
<dt>CPU Frequency</dt>
<dd>
- <span id="logic-frequency-minus" class="tiny-button tiny-button-left">-</span>
+ <span id="logic-frequency-minus" class="tiny-button">-</span>
<span id="logic-frequency">-</span> Hz
- <span id="logic-frequency-plus" class="tiny-button tiny-button-right">+</span></dd>
+ <span id="logic-frequency-plus" class="tiny-button">+</span></dd>
<dt>Framerate</dt>
<dd><span id="fps-count">-</span> fps</dd>
</dl>
@@ -42,25 +42,25 @@
<div id="separator-diag" class="separator"></div>
<div class="section">
<div class="button-area">
- <span id="button-pause" class="tiny-button tiny-button-left border padded">
+ <span id="button-pause" class="tiny-button border padded">
<img src="res/pause.svg"/><span>Pause</span>
</span>
- <span id="button-reset" class="tiny-button tiny-button-left border padded">
+ <span id="button-reset" class="tiny-button border padded">
<img src="res/reset.svg"/><span>Reset</span>
</span>
- <span id="button-benchmark" class="tiny-button tiny-button-left border padded">
+ <span id="button-benchmark" class="tiny-button border padded">
<img src="res/bolt.svg"/><span>Benchmark</span>
</span>
- <span id="button-fullscreen" class="tiny-button tiny-button-left border padded">
+ <span id="button-fullscreen" class="tiny-button border padded">
<img src="res/maximise.svg"/><span>Fullscreen</span>
</span>
- <span id="button-information" class="tiny-button tiny-button-left border padded enabled">
+ <span id="button-information" class="tiny-button border padded enabled">
<img src="res/info.svg"/><span>Information</span>
</span>
- <span id="button-debug" class="tiny-button tiny-button-left border padded">
+ <span id="button-debug" class="tiny-button border padded">
<img src="res/bug.svg"/><span>Debug</span>
</span>
- <span id="button-theme" class="tiny-button tiny-button-left border padded">
+ <span id="button-theme" class="tiny-button border padded">
<img src="res/marker.svg"/><span>Theme</span>
</span>
</div>
@@ -78,11 +78,11 @@
<img class="large" src="res/close.svg"/>
</span>
</div>
- <h2 class="modal-title">Title</h2>
+ <h2 class="modal-title">Alert</h2>
<p>Are you sure you want to cancel the operation?</p>
<div class="modal-buttons">
- <span class="tiny-button tiny-button-left border padded">Cancel</span>
- <span class="tiny-button border padded">Confirm</span>
+ <span class="tiny-button border padded-large">Cancel</span>
+ <span class="tiny-button border padded-large">Confirm</span>
</div>
</div>
</div>
--
GitLab