From b635d6aab4ace8c9bcac55262f8357267a7e04a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Fri, 11 Nov 2022 10:11:16 +0000
Subject: [PATCH] feat: improved mobile gamepad for gb
---
.../web/react/components/display/display.css | 2 +-
.../components/keyboard-gb/keyboard-gb.css | 58 ++++++++++++++++---
2 files changed, 50 insertions(+), 10 deletions(-)
diff --git a/examples/web/react/components/display/display.css b/examples/web/react/components/display/display.css
index 47e4345e..4c8bef99 100644
--- a/examples/web/react/components/display/display.css
+++ b/examples/web/react/components/display/display.css
@@ -59,8 +59,8 @@
@media only screen and (max-width: 1120px) {
.display > .display-minimize {
- top: 22px;
bottom: initial;
+ top: 22px;
}
}
diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.css b/examples/web/react/components/keyboard-gb/keyboard-gb.css
index 9f75aceb..d26aaf96 100644
--- a/examples/web/react/components/keyboard-gb/keyboard-gb.css
+++ b/examples/web/react/components/keyboard-gb/keyboard-gb.css
@@ -1,10 +1,10 @@
.keyboard-container.fullscreen {
+ bottom: 30px;
+ left: 0px;
+ pointer-events: none;
position: fixed;
width: 100%;
- left: 0px;
- bottom: 30px;
z-index: 10;
- pointer-events: none;
}
@media only screen and (max-width: 1120px) {
@@ -31,17 +31,39 @@
}
.keyboard-gb.fullscreen {
- max-width: 600px;
- pointer-events: initial;
- margin: 0px auto 0px auto;
background: rgba(0, 0, 0, 0.3);
- padding: 18px 0px 18px 0px;
border-radius: 24px 24px 24px 24px;
+ -o-border-radius: 24px 24px 24px 24px;
+ -ms-border-radius: 24px 24px 24px 24px;
+ -moz-border-radius: 24px 24px 24px 24px;
+ -khtml-border-radius: 24px 24px 24px 24px;
+ -webkit-border-radius: 24px 24px 24px 24px;
+ margin: 0px auto 0px auto;
+ max-width: 600px;
+ padding: 18px 0px 18px 0px;
+ pointer-events: initial;
+}
+
+@media only screen and (max-width: 600px) {
+ .keyboard-gb.fullscreen {
+ border-radius: 0px 0px 0px 0px;
+ -o-border-radius: 0px 0px 0px 0px;
+ -ms-border-radius: 0px 0px 0px 0px;
+ -moz-border-radius: 0px 0px 0px 0px;
+ -khtml-border-radius: 0px 0px 0px 0px;
+ -webkit-border-radius: 0px 0px 0px 0px;
+ padding: 12px 0px 12px 0px;
+ }
}
.keyboard-gb > .keyboard-line {
- margin-bottom: 12px;
border-radius: 24px 24px 24px 24px;
+ -o-border-radius: 24px 24px 24px 24px;
+ -ms-border-radius: 24px 24px 24px 24px;
+ -moz-border-radius: 24px 24px 24px 24px;
+ -khtml-border-radius: 24px 24px 24px 24px;
+ -webkit-border-radius: 24px 24px 24px 24px;
+ margin-bottom: 12px;
}
.keyboard-gb > .keyboard-line:last-child {
@@ -78,7 +100,13 @@
.keyboard-gb > .dpad {
float: left;
text-align: center;
- width: 180px;
+ width: 172px;
+}
+
+@media only screen and (max-width: 600px) {
+ .keyboard-gb > .dpad {
+ width: 162px;
+ }
}
.keyboard-gb > .dpad > .dpad-top {
@@ -170,6 +198,12 @@
margin-right: 18px;
}
+@media only screen and (max-width: 600px) {
+ .keyboard-gb > .action {
+ margin-right: 8px;
+ }
+}
+
.keyboard-gb > .action > .key {
border-radius: 32px 32px 32px 32px;
-o-border-radius: 32px 32px 32px 32px;
@@ -201,6 +235,12 @@
margin-top: 32px;
}
+@media only screen and (max-width: 600px) {
+ .keyboard-gb > .options {
+ margin-top: 22px;
+ }
+}
+
.keyboard-gb > .options > .key {
font-size: 14px;
font-weight: 900;
--
GitLab