monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-03-12 23:20:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

added contact popup

Browse source
This commit is contained in:
Miodec 2021-12-28 00:39:00 +01:00
parent 2e63d0039f
commit 3103df8307
6 changed files with 189 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
gulpfile.js
View file

@ -141,6 +141,7 @@ const refactoredSrc = [
"./src/js/popups/rate-quote-popup.js",
"./src/js/popups/version-popup.js",
"./src/js/popups/support-popup.js",
"./src/js/popups/contact-popup.js",
"./src/js/popups/custom-word-amount-popup.js",
"./src/js/popups/custom-test-duration-popup.js",
"./src/js/popups/word-filter-popup.js",

1
src/js/global-dependencies.js
View file

@ -16,6 +16,7 @@ import * as AccountController from "./account-controller";
import { toggleGlarses } from "./test-logic";
import "./caps-warning";
import "./support-popup";
import "./contact-popup";
import "./version-popup";
import "./input-controller";
import "./ready";

14
src/js/popups/contact-popup.js Normal file
View file

@ -0,0 +1,14 @@
$(document.body).on("click", "#contactPopupButton", () => {
$("#contactPopupWrapper")
.css("opacity", 0)
.removeClass("hidden")
.animate({ opacity: 1 }, 125);
});
$(document.body).on("click", "#contactPopupWrapper", () => {
$("#contactPopupWrapper")
.css("opacity", 1)
.animate({ opacity: 0 }, 125, () => {
$("#contactPopupWrapper").addClass("hidden");
});
});

75
src/sass/popups.scss
View file

@ -9,7 +9,7 @@
display: grid;
justify-content: center;
align-items: center;
padding: 5rem 0;
padding: 2rem 0;
}
#customTextPopupWrapper {
@ -740,6 +740,79 @@
}
}
#contactPopupWrapper {
#contactPopup {
// height: 400px;
overflow-y: scroll;
max-height: 100%;
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
grid-template-rows: auto auto auto;
gap: 2rem;
@extend .ffscroll;
margin: 0 2rem;
max-width: 900px;
.title {
font-size: 2rem;
line-height: 2rem;
color: var(--main-color);
}
.text {
color: var(--text-color);
span {
color: var(--error-color);
}
}
.subtext {
color: var(--sub-color);
font-size: 0.75rem;
grid-area: subtext;
}
.buttons {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr;
.button {
display: block;
width: 100%;
height: 100%;
padding: 1rem 0;
display: grid;
// gap: 0.5rem;
text-decoration: none;
grid-template-areas: "icon textgroup";
grid-template-columns: auto 1fr;
text-align: left;
align-items: center;
.textGroup {
grid-area: textgroup;
}
.text {
font-size: 1.5rem;
line-height: 2rem;
transform: 0.25s;
}
&:hover .text {
color: var(--bg-color);
}
.icon {
grid-area: icon;
font-size: 2rem;
line-height: 2rem;
padding: 0 1rem;
}
}
}
}
}
#presetWrapper {
#presetEdit {
background: var(--bg-color);

14
src/sass/z_media-queries.scss
View file

@ -128,6 +128,10 @@
}
}
#contactPopupWrapper #contactPopup .buttons {
grid-template-columns: 1fr;
}
.pageAbout .section {
.contributors,
.supporters {
@ -335,6 +339,16 @@
}
@media only screen and (max-width: 550px) {
#contactPopupWrapper #contactPopup .buttons .button .text {
font-size: 1rem;
}
#contactPopupWrapper #contactPopup .buttons .button .icon {
font-size: 1.5rem;
line-height: 1.5rem;
}
#contactPopupWrapper #contactPopup {
padding: 1rem;
}
.pageAbout .section .supporters,
.pageAbout .section .contributors {
grid-template-columns: 1fr;

87
static/index.html
View file

@ -691,6 +691,89 @@
</div>
</div>
</div>
<div id="contactPopupWrapper" class="popupWrapper hidden">
<div id="contactPopup">
<div class="title">Contact</div>
<div class="text">
Feel free to send an email to jack@monkeytype.com (the buttons below
will open the default mail client).
<br />
<br />
Please
<span>do not send</span>
requests to delete account, update email, update name or clear
personal bests - you can do that in the settings page.
</div>
<div class="buttons">
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Question] "
>
<div class="icon"><i class="fas fa-question-circle"></i></div>
<div class="textGroup">
<div class="text">Question</div>
<!-- <div class="subtext">Confused about something?</div> -->
</div>
</a>
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Feedback] "
>
<div class="icon"><i class="fas fa-comment-dots"></i></div>
<div class="textGroup">
<div class="text">Feedback</div>
<!-- <div class="subtext">Feel like the website could be improved?</div> -->
</div>
</a>
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Bug] "
>
<div class="icon"><i class="fas fa-bug"></i></div>
<div class="textGroup">
<div class="text">Bug Report</div>
<!-- <div class="subtext">Report any bugs you found. You can also open a new issue on GitHub.</div> -->
</div>
</a>
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Account] "
>
<div class="icon"><i class="fas fa-user-circle"></i></div>
<div class="textGroup">
<div class="text">Account Help</div>
<!-- <div class="subtext">Report any problems with your account like login issues.</div> -->
</div>
</a>
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Business] "
>
<div class="icon"><i class="fas fa-briefcase"></i></div>
<div class="textGroup">
<div class="text">Business Inquiry</div>
<!-- <div class="subtext">Let's work together.</div> -->
</div>
</a>
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Other] "
>
<div class="icon"><i class="fas fa-ellipsis-h"></i></div>
<div class="textGroup">
<div class="text">Other</div>
<!-- <div class="subtext">We will try to help.</div> -->
</div>
</a>
</div>
</div>
</div>
<div id="commandLineWrapper" class="hidden">
<div id="commandLine">
<div
@ -4685,9 +4768,9 @@
</div>
<div class="leftright">
<div class="left">
<a href="mailto:jack@monkeytype.com" target="_blank">
<a id="contactPopupButton">
<i class="fas fa-fw fa-envelope"></i>
<div class="text">Support</div>
<div class="text">Contact</div>
</a>
<a href="https://github.com/Miodec/monkeytype" target="_blank">
<i class="fas fa-fw fa-code"></i>