monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-12-26 18:09:40 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: use main instead of a div

Browse source
This commit is contained in:
Miodec 2023-09-20 00:01:35 +01:00
parent 724403d361
commit 4e507f23bd
23 changed files with 95 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/styles/core.scss
View file

@ -159,7 +159,7 @@ body {
}
}
#middle {
main {
display: grid; //stupid fix for stupid safari
}

2
frontend/src/styles/test.scss
View file

@ -1239,7 +1239,7 @@
}
}
#middle.focus .pageTest {
main.focus .pageTest {
#testModesNotice {
opacity: 0 !important;
}

4
frontend/src/styles/z_media-queries.scss
View file

@ -701,7 +701,7 @@
gap: 5rem;
grid-auto-flow: unset;
}
#middle {
main {
#result {
grid-template-areas:
"stats stats"
@ -928,7 +928,7 @@
gap: 1rem;
padding: 1rem;
}
#middle {
main {
#result {
.stats {
grid-template-areas:

2
frontend/src/ts/pages/404.ts
View file

@ -12,7 +12,7 @@ export const page = new Page(
Skeleton.remove("page404");
},
async () => {
Skeleton.append("page404", "middle");
Skeleton.append("page404", "main");
},
async () => {
//

2
frontend/src/ts/pages/about.ts
View file

@ -196,7 +196,7 @@ export const page = new Page(
Skeleton.remove("pageAbout");
},
async () => {
Skeleton.append("pageAbout", "middle");
Skeleton.append("pageAbout", "main");
fill();
},
async () => {

2
frontend/src/ts/pages/account.ts
View file

@ -1314,7 +1314,7 @@ export const page = new Page(
Skeleton.remove("pageAccount");
},
async () => {
Skeleton.append("pageAccount", "middle");
Skeleton.append("pageAccount", "main");
await ResultFilters.appendButtons();
ResultFilters.updateActive();
await Misc.sleep(0);

2
frontend/src/ts/pages/login.ts
View file

@ -331,7 +331,7 @@ export const page = new Page(
Skeleton.remove("pageLogin");
},
async () => {
Skeleton.append("pageLogin", "middle");
Skeleton.append("pageLogin", "main");
enableInputs();
enableSignUpButton();
},

2
frontend/src/ts/pages/profile-search.ts
View file

@ -12,7 +12,7 @@ export const page = new Page(
Skeleton.remove("pageProfileSearch");
},
async () => {
Skeleton.append("pageProfileSearch", "middle");
Skeleton.append("pageProfileSearch", "main");
$(".page.pageProfileSearch input").val("");
},
async () => {

2
frontend/src/ts/pages/profile.ts
View file

@ -211,7 +211,7 @@ export const page = new Page<undefined | Profile.ProfileData>(
reset();
},
async (options) => {
Skeleton.append("pageProfile", "middle");
Skeleton.append("pageProfile", "main");
const uidOrName = options?.params?.["uidOrName"];
if (uidOrName) {
$(".page.pageProfile .preloader").removeClass("hidden");

2
frontend/src/ts/pages/settings.ts
View file

@ -1255,7 +1255,7 @@ export const page = new Page(
reset();
},
async () => {
Skeleton.append("pageSettings", "middle");
Skeleton.append("pageSettings", "main");
await fillSettingsPage();
await update(false);
},

6
frontend/src/ts/popups/skeleton.ts
View file

@ -16,10 +16,12 @@ export function remove(id: string): void {
}
}
export function append(id: string, parentOverride = ""): void {
type ParentOverride = "main";
export function append(id: string, parentOverride?: ParentOverride): void {
const popup = skeletons.get(id) as HTMLElement;
if (parentOverride) {
(<HTMLElement>document.getElementById(parentOverride)).append(popup);
(<HTMLElement>document.querySelector(parentOverride)).append(popup);
} else {
parent.append(popup);
}

2
frontend/src/ts/popups/support-popup.ts
View file

@ -25,7 +25,7 @@ $("#supportMeButton").on("click", () => {
show();
});
$("#middle").on("click", ".pageAbout #supportMeAboutButton", () => {
$("main").on("click", ".pageAbout #supportMeAboutButton", () => {
show();
});

4
frontend/src/ts/test/focus.ts
View file

@ -14,7 +14,7 @@ export function set(foc: boolean, withCursor = false): void {
$("header").addClass("focus");
$("footer").addClass("focus");
if (!withCursor) $("body").css("cursor", "none");
$("#middle").addClass("focus");
$("main").addClass("focus");
$("#testConfig").addClass("focus");
$("#mobileTestConfig").addClass("focus");
$("#bannerCenter").addClass("focus");
@ -33,7 +33,7 @@ export function set(foc: boolean, withCursor = false): void {
$("header").removeClass("focus");
$("footer").removeClass("focus");
$("body").css("cursor", "default");
$("#middle").removeClass("focus");
$("main").removeClass("focus");
$("#testConfig").removeClass("focus");
$("#mobileTestConfig").removeClass("focus");
$("#bannerCenter").removeClass("focus");

34
frontend/src/ts/test/result.ts
View file

@ -759,8 +759,8 @@ export async function update(
}
if (GlarsesMode.get()) {
$("#middle #result .noStressMessage").remove();
$("#middle #result").prepend(`
$("main #result .noStressMessage").remove();
$("main #result").prepend(`
<div class='noStressMessage' style="
text-align: center;
@ -772,28 +772,28 @@ export async function update(
</div>
`);
$("#middle #result .stats").addClass("hidden");
$("#middle #result .chart").addClass("hidden");
$("#middle #result #resultWordsHistory").addClass("hidden");
$("#middle #result #resultReplay").addClass("hidden");
$("#middle #result .loginTip").addClass("hidden");
$("#middle #result #showWordHistoryButton").addClass("hidden");
$("#middle #result #watchReplayButton").addClass("hidden");
$("#middle #result #saveScreenshotButton").addClass("hidden");
$("main #result .stats").addClass("hidden");
$("main #result .chart").addClass("hidden");
$("main #result #resultWordsHistory").addClass("hidden");
$("main #result #resultReplay").addClass("hidden");
$("main #result .loginTip").addClass("hidden");
$("main #result #showWordHistoryButton").addClass("hidden");
$("main #result #watchReplayButton").addClass("hidden");
$("main #result #saveScreenshotButton").addClass("hidden");
console.log(
`Test Completed: ${result.wpm} wpm ${result.acc}% acc ${result.rawWpm} raw ${result.consistency}% consistency`
);
} else {
$("#middle #result .stats").removeClass("hidden");
$("#middle #result .chart").removeClass("hidden");
// $("#middle #result #resultWordsHistory").removeClass("hidden");
$("main #result .stats").removeClass("hidden");
$("main #result .chart").removeClass("hidden");
// $("main #result #resultWordsHistory").removeClass("hidden");
if (!Auth?.currentUser) {
$("#middle #result .loginTip").removeClass("hidden");
$("main #result .loginTip").removeClass("hidden");
}
$("#middle #result #showWordHistoryButton").removeClass("hidden");
$("#middle #result #watchReplayButton").removeClass("hidden");
$("#middle #result #saveScreenshotButton").removeClass("hidden");
$("main #result #showWordHistoryButton").removeClass("hidden");
$("main #result #watchReplayButton").removeClass("hidden");
$("main #result #saveScreenshotButton").removeClass("hidden");
}
if (window.scrollY > 0) {

116
frontend/static/email-handler.html
View file

@ -48,7 +48,7 @@
font-size: 2.5rem;
}
#middle {
main {
color: var(--text-color);
display: grid;
justify-content: center;
@ -144,7 +144,7 @@
</div>
</div>
</div>
<div id="middle">
<main>
<div class="preloader">
<div class="icon">
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
@ -161,7 +161,7 @@
/>
<div class="button">Change</div>
</div>
</div>
</main>
</div>
</body>
<script src="js/jquery-3.5.1.min.js"></script>
@ -193,19 +193,15 @@
.then((resp) => {
// Email address has been verified.
$("#middle .preloader .icon").html(
`<i class="fas fa-fw fa-check"></i>`
);
$("#middle .preloader .text").text(
$("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
$("main .preloader .text").text(
`Your email address has been verified`
);
$("#middle .preloader .subText").text(`You can now close this tab`);
$("main .preloader .subText").text(`You can now close this tab`);
})
.catch((error) => {
$("#middle .preloader .icon").html(
`<i class="fas fa-fw fa-times"></i>`
);
$("#middle .preloader .text").text(error.message);
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
$("main .preloader .text").text(error.message);
// Code is invalid or expired. Ask the user to verify their email address
// again.
@ -213,14 +209,14 @@
}
function showResetPassword() {
$("#middle .preloader").addClass("hidden");
$("#middle .resetPassword").removeClass("hidden");
$("#middle .resetPassword input").trigger("focus");
$("main .preloader").addClass("hidden");
$("main .resetPassword").removeClass("hidden");
$("main .resetPassword input").trigger("focus");
}
function hideResetPassword() {
$("#middle .preloader").removeClass("hidden");
$("#middle .resetPassword").addClass("hidden");
$("main .preloader").removeClass("hidden");
$("main .resetPassword").addClass("hidden");
}
function handleResetPassword(actionCode, continueUrl) {
@ -232,10 +228,8 @@
.then((email) => {
var accountEmail = email;
var newPassword = $("#middle .resetPassword .pwd").val();
var newPasswordConfirm = $(
"#middle .resetPassword .pwd-confirm"
).val();
var newPassword = $("main .resetPassword .pwd").val();
var newPasswordConfirm = $("main .resetPassword .pwd-confirm").val();
if (newPassword !== newPasswordConfirm) {
alert("Passwords do not match");
@ -257,35 +251,29 @@
.confirmPasswordReset(actionCode, newPassword)
.then((resp) => {
// Password reset has been confirmed and new password updated.
$("#middle .preloader .icon").html(
$("main .preloader .icon").html(
`<i class="fas fa-fw fa-check"></i>`
);
$("#middle .preloader .text").text(
`Your password has been changed`
);
$("#middle .preloader .subText").text(
`You can now close this tab`
);
$("main .preloader .text").text(`Your password has been changed`);
$("main .preloader .subText").text(`You can now close this tab`);
firebase
.auth()
.signInWithEmailAndPassword(accountEmail, newPassword);
})
.catch((error) => {
$("#middle .preloader .icon").html(
$("main .preloader .icon").html(
`<i class="fas fa-fw fa-times"></i>`
);
$("#middle .preloader .text").text(error.message);
$("main .preloader .text").text(error.message);
// Error occurred during confirmation. The code might have expired or the
// password is too weak.
});
})
.catch((error) => {
$("#middle .preloader .icon").html(
`<i class="fas fa-fw fa-times"></i>`
);
$("#middle .preloader .text").text(error.message);
// $("#middle .preloader .subText").text(error);
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
$("main .preloader .text").text(error.message);
// $("main .preloader .subText").text(error);
// Invalid or expired action code. Ask user to try to reset the password
// again.
@ -308,19 +296,15 @@
return auth.applyActionCode(actionCode);
})
.then(() => {
$("#middle .preloader .icon").html(
`<i class="fas fa-fw fa-check"></i>`
);
$("#middle .preloader .text").text(
`Your account email was reverted.`
);
$("#middle .preloader .subText").text(``);
$("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
$("main .preloader .text").text(`Your account email was reverted.`);
$("main .preloader .subText").text(``);
$("#middle .preloader").append(`
$("main .preloader").append(`
<br>
In case you believe your account was compromised, please request a password reset email:
`);
$("#middle .preloader").append(`
$("main .preloader").append(`
<br>
<div class="button" onclick="sendPasswordResetEmail('${restoredEmail}')">Send Password Reset Email</div>
`);
@ -333,10 +317,8 @@
// in case the account was compromised:
})
.catch((error) => {
$("#middle .preloader .icon").html(
`<i class="fas fa-fw fa-times"></i>`
);
$("#middle .preloader .text").text(error.message);
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
$("main .preloader .text").text(error.message);
});
}
@ -344,17 +326,13 @@
auth
.sendPasswordResetEmail(email)
.then(() => {
$("#middle .preloader .icon").html(
`<i class="fas fa-fw fa-check"></i>`
);
$("#middle .preloader .text").text(`Password reset email sent`);
$("#middle .preloader .subText").text(`Please check your inbox`);
$("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
$("main .preloader .text").text(`Password reset email sent`);
$("main .preloader .subText").text(`Please check your inbox`);
})
.catch((error) => {
$("#middle .preloader .icon").html(
`<i class="fas fa-fw fa-times"></i>`
);
$("#middle .preloader .text").text(error.message);
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
$("main .preloader .text").text(error.message);
});
}
@ -390,20 +368,18 @@
// var auth = firebase.auth();
if (!mode) {
$("#middle .preloader .icon").html(
$("main .preloader .icon").html(
`<i class="fas fa-fw fa-times"></i>`
);
$("#middle .preloader .text").text(`Mode parameter not found`);
$("main .preloader .text").text(`Mode parameter not found`);
return;
}
if (!actionCode) {
$("#middle .preloader .icon").html(
$("main .preloader .icon").html(
`<i class="fas fa-fw fa-times"></i>`
);
$("#middle .preloader .text").text(
`Action code parameter not found`
);
$("main .preloader .text").text(`Action code parameter not found`);
return;
}
@ -426,26 +402,24 @@
handleVerifyEmail(actionCode, continueUrl);
break;
default:
$("#middle .preloader .icon").html(
$("main .preloader .icon").html(
`<i class="fas fa-fw fa-times"></i>`
);
$("#middle .preloader .text").text(`Invalid mode`);
$("main .preloader .text").text(`Invalid mode`);
console.error("no mode found");
// Error: invalid mode.
}
$("#middle .resetPassword .button").on("click", () => {
$("main .resetPassword .button").on("click", () => {
handleResetPassword(actionCode, continueUrl);
});
$("#middle .resetPassword input").on("keypress", (e) => {
$("main .resetPassword input").on("keypress", (e) => {
if (e.key === "Enter") handleResetPassword(actionCode, continueUrl);
});
} catch (e) {
$("#middle .preloader .icon").html(
`<i class="fas fa-fw fa-times"></i>`
);
$("#middle .preloader .text").text(
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
$("main .preloader .text").text(
`Fatal error: ${e.message}. If this issue persists, please report it.`
);
}

2
frontend/static/funbox/crt.css
View file

@ -43,7 +43,7 @@ body.crtmode #scanline {
animation: scanline 10s linear infinite;
}
body.crtmode header,
body.crtmode #middle,
body.crtmode main,
body.crtmode footer,
body.crtmode #result,
body.crtmode #popups,

2
frontend/static/funbox/mirror.css
View file

@ -1,3 +1,3 @@
#middle {
main {
transform: scaleX(-1);
}

2
frontend/static/funbox/space_balls.css
View file

@ -16,7 +16,7 @@ body {
background-position: center;
}
#middle {
main {
transform: rotateX(35deg);
}

2
frontend/static/funbox/upside_down.css
View file

@ -1,3 +1,3 @@
#middle {
main {
transform: scaleX(-1) scaleY(-1);
}

4
frontend/static/main.html
View file

@ -31,7 +31,7 @@
</div>
<div id="centerContent" class="hidden">
<%= compilation.assets["html/header.html"].source() %>
<div id="middle" style="height: 100%">
<main style="height: 100%">
<%= compilation.assets["html/pages/loading.html"].source() %> <%=
compilation.assets["html/pages/test.html"].source() %> <%=
compilation.assets["html/pages/about.html"].source() %> <%=
@ -40,7 +40,7 @@
compilation.assets["html/pages/account.html"].source() %> <%=
compilation.assets["html/pages/profile.html"].source() %> <%=
compilation.assets["html/pages/404.html"].source() %>
</div>
</main>
<%= compilation.assets["html/footer.html"].source() %>

6
frontend/static/privacy-policy.html
View file

@ -41,7 +41,7 @@
font-size: 2.5rem;
}
#middle {
main {
color: var(--text-color);
}
@ -108,7 +108,7 @@
</div>
</div>
</header>
<div id="middle">
<main>
<p>
<!-- make sure to update this date every time the policy is changed -->
</p>
@ -458,7 +458,7 @@
>
Miodec#1512
</span>
</div>
</main>
</div>
</body>
<script defer>

6
frontend/static/security-policy.html
View file

@ -41,7 +41,7 @@
font-size: 2.5rem;
}
#middle {
main {
color: var(--text-color);
}
@ -112,7 +112,7 @@
</div>
</div>
</header>
<div id="middle">
<main>
<p>
We take the security and integrity of Monkeytype very seriously. If
you have found a vulnerability, please report it
@ -163,7 +163,7 @@
condition, create significant strains on critical resources, or
negatively impact users of the site outside of test accounts.
</p>
</div>
</main>
</div>
</body>
<script defer>

6
frontend/static/terms-of-service.html
View file

@ -41,7 +41,7 @@
font-size: 2.5rem;
}
#middle {
main {
color: var(--text-color);
}
@ -108,7 +108,7 @@
</div>
</div>
</header>
<div id="middle">
<main>
<!-- make sure to update this date every time the tos is changed -->
<p>These terms of service were last updated on June 19, 2022.</p>
<h1>Agreement</h1>
@ -351,7 +351,7 @@
>
Miodec#1512
</span>
</div>
</main>
<p>
Terms based on
<a