mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 15:26:15 +08:00
- added version to the bottom of the page
- added version history popup - fixed a bug where livewpm still would be drawn on top
This commit is contained in:
Jack
parent
376dd778a5
commit
75b20db333
|
|
@ -53,6 +53,60 @@ a:hover {
|
|||
top: -5rem;
|
||||
}
|
||||
|
||||
#versionHistoryWrapper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
padding: 5rem 0;
|
||||
#versionHistory{
|
||||
width: 75vw;
|
||||
height: 100%;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--roundness);
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
overflow-y: scroll;
|
||||
.tip{
|
||||
text-align: center;
|
||||
color: var(--sub-color);
|
||||
}
|
||||
.releases{
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
.release{
|
||||
display: grid;
|
||||
grid-template-areas: "title date"
|
||||
"body body";
|
||||
.title{
|
||||
grid-area: title;
|
||||
font-size: 2rem;
|
||||
color: var(--sub-color);
|
||||
}
|
||||
.date{
|
||||
grid-area: date;
|
||||
text-align: right;
|
||||
color: var(--sub-color);
|
||||
align-self: center;
|
||||
}
|
||||
.body{
|
||||
grid-area: body;
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#commandLineWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -201,7 +255,7 @@ a:hover {
|
|||
}
|
||||
|
||||
#liveWpm {
|
||||
position: absolute;
|
||||
position: relative;
|
||||
// font-size: 1.7rem;
|
||||
// line-height: 1.7rem;
|
||||
// color: var(--sub-color);
|
||||
|
|
@ -483,6 +537,14 @@ key {
|
|||
.keyTips{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.version{
|
||||
opacity: 0;
|
||||
transition: .25s;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#top.focus {
|
||||
|
|
@ -497,13 +559,6 @@ key {
|
|||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
#middle {
|
||||
/* display:grid; */
|
||||
/* align-items: center; */
|
||||
/* justify-content: center; */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#result {
|
||||
display: grid;
|
||||
// height: 200px;
|
||||
|
|
@ -622,6 +677,7 @@ key {
|
|||
}
|
||||
|
||||
#restartTestButton {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
border-radius: var(--roundness);
|
||||
padding: 1rem 5rem;
|
||||
|
|
|
|||
|
|
@ -9,11 +9,26 @@
|
|||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="themes/dark.css" id="currentTheme">
|
||||
<link rel="shortcut icon" href="favicon.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="notification">Signed in</div>
|
||||
<div id="versionHistoryWrapper" class="hidden">
|
||||
<div id="versionHistory">
|
||||
<div class="tip">Click anywhere to dismiss</div>
|
||||
<div class="releases">
|
||||
<div class="release">
|
||||
<div class="title">v1</div>
|
||||
<div class="date">010101</div>
|
||||
<div class="body">test</div>
|
||||
</div>
|
||||
<div class="release">
|
||||
<div class="title">v2</div>
|
||||
<div class="date">010101</div>
|
||||
<div class="body">test</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="commandLineWrapper" class="hidden">
|
||||
<div id="commandLine">
|
||||
<input type="text" class="input" placeholder="Command">
|
||||
|
|
@ -307,6 +322,7 @@
|
|||
<div>
|
||||
Contribute to this project on <a href="https://github.com/Miodec/monkey-type">GitHub</a>
|
||||
</div>
|
||||
<div class="version">version</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,24 @@ function test() {
|
|||
});
|
||||
}
|
||||
|
||||
function getReleasesFromGitHub() {
|
||||
$.getJSON("https://api.github.com/repos/Miodec/monkey-type/releases", data => {
|
||||
$('#bottom .version').text(data[0].name).css('opacity', 1);
|
||||
$("#versionHistory .releases").empty();
|
||||
data.forEach(release => {
|
||||
if (!release.draft && !release.prerelease) {
|
||||
$("#versionHistory .releases").append(`
|
||||
<div class="release">
|
||||
<div class="title">${release.name}</div>
|
||||
<div class="date">${moment(release.published_at).format('DD MMM YYYY')}</div>
|
||||
<div class="body">${release.body.replace(/\r\n/g, '<br>')}</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function getLastChar(word) {
|
||||
return word.charAt(word.length - 1);
|
||||
}
|
||||
|
|
@ -828,6 +846,16 @@ $(document.body).on("click", "#restartTestButton", (event) => {
|
|||
restartTest();
|
||||
});
|
||||
|
||||
$(document.body).on("click", ".version", (event) => {
|
||||
$("#versionHistoryWrapper").css('opacity', 0).removeClass('hidden').animate({ opacity: 1 }, 125);
|
||||
});
|
||||
|
||||
$(document.body).on("click", "#versionHistoryWrapper", (event) => {
|
||||
$("#versionHistoryWrapper").css('opacity', 1).animate({ opacity: 0 }, 125, () => {
|
||||
$("#versionHistoryWrapper").addClass('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
$("#wordsInput").keypress((event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
|
@ -992,6 +1020,7 @@ $(document).keydown((event) => {
|
|||
});
|
||||
|
||||
loadConfigFromCookie();
|
||||
getReleasesFromGitHub();
|
||||
|
||||
$(document).ready(() => {
|
||||
$('body').css('transition', '.25s');
|
||||
|
|
|
|||
Loading…
Reference in a new issue