From 38f69e15df4a9593fbd7888783da3b970a99d703 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Fri, 18 Nov 2022 22:29:44 +0000
Subject: [PATCH] feat: better transitions and animations
---
.../web/react/components/button/button.css | 6 ++
frontends/web/react/components/help/help.css | 75 ++++++++++---------
frontends/web/react/components/help/help.tsx | 13 +++-
frontends/web/react/components/link/link.css | 10 +++
.../web/react/components/modal/modal.css | 15 +++-
.../web/react/components/modal/modal.tsx | 2 +-
.../react/components/panel-tab/panel-tab.css | 39 +++++++++-
7 files changed, 117 insertions(+), 43 deletions(-)
diff --git a/frontends/web/react/components/button/button.css b/frontends/web/react/components/button/button.css
index d80a27d2..ba4bd616 100644
--- a/frontends/web/react/components/button/button.css
+++ b/frontends/web/react/components/button/button.css
@@ -1,6 +1,12 @@
.button {
cursor: pointer;
display: inline-flex;
+ transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -o-transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -ms-transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -moz-transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -khtml-transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -webkit-transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
vertical-align: middle;
}
diff --git a/frontends/web/react/components/help/help.css b/frontends/web/react/components/help/help.css
index 3d2ce52b..007e9bfd 100644
--- a/frontends/web/react/components/help/help.css
+++ b/frontends/web/react/components/help/help.css
@@ -1,35 +1,40 @@
-.keyboard-help {
- padding-left: 0px;
- font-size: 18px;
- line-height: 22px;
- list-style: none;
- margin: 0px 0px 0px 0px;
-}
-
-.keyboard-help > li {
- margin: 12px 0px 12px 0px;
-}
-
-.keyboard-help .key-container {
- display: inline-block;
- min-width: 86px;
- margin-right: 18px;
- text-align: right;
-}
-
-.keyboard-help .key {
- border: 2px solid #ffffff;
- display: inline-block;
- padding: 1px 8px 1px 8px;
- border-radius: 6px;
- font-size: 16px;
-}
-
-.faqs-help > h3 {
- margin: 0px 0px 6px 0px;
-}
-
-.faqs-help > p {
- margin: 0px 0px 22px 0px;
- line-height: 20px;
-}
\ No newline at end of file
+.keyboard-help {
+ font-size: 18px;
+ line-height: 22px;
+ list-style: none;
+ margin: 0px 0px 0px 0px;
+ padding-left: 0px;
+}
+
+.keyboard-help > li {
+ margin: 12px 0px 12px 0px;
+}
+
+.keyboard-help .key-container {
+ display: inline-block;
+ margin-right: 18px;
+ min-width: 86px;
+ text-align: right;
+}
+
+.keyboard-help .key {
+ border: 2px solid #ffffff;
+ border-radius: 6px 6px 6px 6px;
+ -o-border-radius: 6px 6px 6px 6px;
+ -ms-border-radius: 6px 6px 6px 6px;
+ -moz-border-radius: 6px 6px 6px 6px;
+ -khtml-border-radius: 6px 6px 6px 6px;
+ -webkit-border-radius: 6px 6px 6px 6px;
+ display: inline-block;
+ font-size: 16px;
+ padding: 1px 8px 1px 8px;
+}
+
+.faqs-help > h3 {
+ margin: 0px 0px 6px 0px;
+}
+
+.faqs-help > p {
+ line-height: 20px;
+ margin: 0px 0px 22px 0px;
+}
diff --git a/frontends/web/react/components/help/help.tsx b/frontends/web/react/components/help/help.tsx
index f3a16125..1473c4dd 100644
--- a/frontends/web/react/components/help/help.tsx
+++ b/frontends/web/react/components/help/help.tsx
@@ -80,8 +80,19 @@ const faqsHelp = () => (
Not really, but it plays the coolest ones. Now seriously it should
play around 90% of the Game Boy games.
</p>
- <h3>Why there's not sound?</h3>
+ <h3>Why there's no sound?</h3>
<p>It's under development, I'm hopping to have it before Christmas.</p>
+ <h3>Can I use my Xbox One game pad?</h3>
+ <p>
+ Yes, just plug it in and press a button. BTW: This uses{" "}
+ <Link
+ href="https://developer.mozilla.org/docs/Web/API/Gamepad_API/Using_the_Gamepad_API"
+ target="_blank"
+ >
+ Web Gamepad API
+ </Link>
+ .
+ </p>
<h3>Will it ever play Game Boy Color games?</h3>
<p>Eventually...</p>
<h3>I've found a bug, where can I report it?</h3>
diff --git a/frontends/web/react/components/link/link.css b/frontends/web/react/components/link/link.css
index f04c472e..30a552d4 100644
--- a/frontends/web/react/components/link/link.css
+++ b/frontends/web/react/components/link/link.css
@@ -2,4 +2,14 @@
border-bottom: 2px dotted #ffffff;
color: #ffffff;
text-decoration: none;
+ transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -o-transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -ms-transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -moz-transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -khtml-transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -webkit-transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.link:hover {
+ border-bottom: 2px solid #ffffff;
}
diff --git a/frontends/web/react/components/modal/modal.css b/frontends/web/react/components/modal/modal.css
index 6c65b679..c3f85bda 100644
--- a/frontends/web/react/components/modal/modal.css
+++ b/frontends/web/react/components/modal/modal.css
@@ -56,7 +56,10 @@
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+ display: flex;
+ flex-direction: column;
margin-top: 30px;
+ max-height: 100%;
max-width: 100%;
outline: none;
-o-outline: none;
@@ -64,6 +67,7 @@
-moz-outline: none;
-khtml-outline: none;
-webkit-outline: none;
+ overflow-y: auto;
padding: 24px 24px 24px 24px;
text-align: left;
transform: scale(0.96);
@@ -99,9 +103,9 @@
}
.modal > .modal-window > .modal-top-buttons {
- float: right;
- margin-right: -10px;
- margin-top: -10px;
+ position: absolute;
+ right: 14px;
+ top: 14px;
}
.modal > .modal-window > .modal-title {
@@ -110,9 +114,14 @@
text-align: left;
}
+.modal > .modal-window > .modal-contents {
+ overflow: auto;
+}
+
.modal > .modal-window > .modal-text {
font-size: 20px;
line-height: 22px;
+ overflow: auto;
}
.modal > .modal-window > .modal-buttons {
diff --git a/frontends/web/react/components/modal/modal.tsx b/frontends/web/react/components/modal/modal.tsx
index e9004167..2f2573b9 100644
--- a/frontends/web/react/components/modal/modal.tsx
+++ b/frontends/web/react/components/modal/modal.tsx
@@ -83,7 +83,7 @@ export const Modal: FC<ModalProps> = ({
</div>
<h2 className="modal-title">{title}</h2>
{contents ? (
- contents
+ <div className="modal-contents">{contents}</div>
) : (
<p
className="modal-text"
diff --git a/frontends/web/react/components/panel-tab/panel-tab.css b/frontends/web/react/components/panel-tab/panel-tab.css
index 9303eb81..60c0458b 100644
--- a/frontends/web/react/components/panel-tab/panel-tab.css
+++ b/frontends/web/react/components/panel-tab/panel-tab.css
@@ -4,17 +4,50 @@
}
.panel-tab > .tab-selectors > .tab-selector {
- display: inline-block;
- margin-right: 18px;
- font-size: 22px;
border-bottom: 2px solid transparent;
cursor: pointer;
+ display: inline-block;
+ font-size: 22px;
+ margin-right: 18px;
+ opacity: 0.8;
+ -o-opacity: 0.8;
+ -ms-opacity: 0.8;
+ -moz-opacity: 0.8;
+ -khtml-opacity: 0.8;
+ -webkit-opacity: 0.8;
+ transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -o-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -ms-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -moz-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -khtml-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -webkit-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ user-select: none;
+ -o-user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
}
.panel-tab > .tab-selectors > .tab-selector:last-child {
margin-right: 0px;
}
+.panel-tab > .tab-selectors > .tab-selector:hover {
+ opacity: 1.0;
+ -o-opacity: 1.0;
+ -ms-opacity: 1.0;
+ -moz-opacity: 1.0;
+ -khtml-opacity: 1.0;
+ -webkit-opacity: 1.0;
+}
+
.panel-tab > .tab-selectors > .tab-selector.selected {
border-bottom: 2px solid #ffffff;
+ opacity: 1.0;
+ -o-opacity: 1.0;
+ -ms-opacity: 1.0;
+ -moz-opacity: 1.0;
+ -khtml-opacity: 1.0;
+ -webkit-opacity: 1.0;
}
--
GitLab