mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 15:26:15 +08:00
style: use new content-grid system on the result page
fixes result ad causing overflow on some widths
This commit is contained in:
Miodec
parent
05a9b555d9
commit
607da30faa
|
|
@ -173,259 +173,260 @@
|
|||
<div id="premidTestMode" class="hidden"></div>
|
||||
<div id="premidSecondsLeft" class="hidden"></div>
|
||||
</div>
|
||||
<div id="result" class="hidden" tabindex="-1">
|
||||
<div class="stats">
|
||||
<!-- <div class="info">words 10<br>punctuation</div> -->
|
||||
<div id="result" class="content-grid full-width hidden" tabindex="-1">
|
||||
<div class="wrapper">
|
||||
<div class="stats">
|
||||
<!-- <div class="info">words 10<br>punctuation</div> -->
|
||||
|
||||
<div class="group wpm">
|
||||
<div class="top">
|
||||
<div class="text">wpm</div>
|
||||
<div class="crown hidden" aria-label="" data-balloon-pos="up">
|
||||
<i class="fas fa-crown"></i>
|
||||
<div class="group wpm">
|
||||
<div class="top">
|
||||
<div class="text">wpm</div>
|
||||
<div class="crown hidden" aria-label="" data-balloon-pos="up">
|
||||
<i class="fas fa-crown"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" aria-label="" data-balloon-pos="up">-</div>
|
||||
</div>
|
||||
<div class="group acc">
|
||||
<div class="top">acc</div>
|
||||
<div class="bottom" aria-label="" data-balloon-pos="up">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats morestats">
|
||||
<div class="group testType">
|
||||
<div class="top">test type</div>
|
||||
<div class="bottom">-</div>
|
||||
<div class="tags hidden" style="margin-top: 0.5rem">
|
||||
<div class="top">
|
||||
<span>tags</span>
|
||||
<div
|
||||
class="textButton editTagsButton"
|
||||
result-id=""
|
||||
active-tag-ids=""
|
||||
aria-label="Edit tags"
|
||||
role="button"
|
||||
data-balloon-pos="right"
|
||||
>
|
||||
<i class="fas fa-pen fa-fw"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" aria-label="" data-balloon-pos="up">-</div>
|
||||
</div>
|
||||
<div class="group acc">
|
||||
<div class="top">acc</div>
|
||||
<div class="bottom" aria-label="" data-balloon-pos="up">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats morestats">
|
||||
<div class="group testType">
|
||||
<div class="top">test type</div>
|
||||
<div class="bottom">-</div>
|
||||
<div class="tags hidden" style="margin-top: 0.5rem">
|
||||
<!-- <div class="group infoAndTags"> -->
|
||||
<div class="group info">
|
||||
<div class="top">other</div>
|
||||
<div class="bottom">-</div>
|
||||
</div>
|
||||
|
||||
<!-- </div> -->
|
||||
<!-- <div class="subgroup"> -->
|
||||
<div class="group raw">
|
||||
<div class="top">raw</div>
|
||||
<div class="bottom" aria-label="" data-balloon-pos="up">-</div>
|
||||
</div>
|
||||
<div class="group key">
|
||||
<div class="top">characters</div>
|
||||
<div
|
||||
class="bottom"
|
||||
aria-label="correct, incorrect, extra, and missed"
|
||||
data-balloon-break=""
|
||||
data-balloon-pos="up"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <div class="subgroup"> -->
|
||||
<div class="group flat consistency">
|
||||
<div class="top">consistency</div>
|
||||
<div class="bottom" aria-label="" data-balloon-pos="up">2 -</div>
|
||||
</div>
|
||||
<div class="group time">
|
||||
<div class="top">time</div>
|
||||
<div class="bottom" aria-label="" data-balloon-pos="up">
|
||||
<div class="text">-</div>
|
||||
<div class="afk"></div>
|
||||
<div class="timeToday"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
||||
<div class="group dailyLeaderboard hidden">
|
||||
<div class="top">daily leaderboard</div>
|
||||
<div class="bottom">-</div>
|
||||
</div>
|
||||
|
||||
<div class="group source hidden">
|
||||
<div class="top">
|
||||
<span>tags</span>
|
||||
<div
|
||||
class="textButton editTagsButton"
|
||||
result-id=""
|
||||
active-tag-ids=""
|
||||
aria-label="Edit tags"
|
||||
role="button"
|
||||
data-balloon-pos="right"
|
||||
<span style="margin-right: 0.5em">source</span>
|
||||
<span
|
||||
id="reportQuoteButton"
|
||||
class="textButton hidden"
|
||||
aria-label="Report quote"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<i class="fas fa-pen fa-fw"></i>
|
||||
</div>
|
||||
<i class="icon fas fa-fw fa-flag"></i>
|
||||
</span>
|
||||
<span
|
||||
id="favoriteQuoteButton"
|
||||
class="textButton hidden"
|
||||
aria-label="Favorite quote"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<i class="icon far fa-fw fa-heart"></i>
|
||||
</span>
|
||||
<span
|
||||
id="rateQuoteButton"
|
||||
class="textButton hidden"
|
||||
aria-label="Rate quote"
|
||||
data-balloon-pos="up"
|
||||
>
|
||||
<i class="icon far fa-fw fa-star"></i>
|
||||
<span class="rating"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bottom">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="group infoAndTags"> -->
|
||||
<div class="group info">
|
||||
<div class="top">other</div>
|
||||
<div class="bottom">-</div>
|
||||
<div class="chart">
|
||||
<!-- <div class="title">wpm over time</div> -->
|
||||
<canvas id="wpmChart"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- </div> -->
|
||||
<!-- <div class="subgroup"> -->
|
||||
<div class="group raw">
|
||||
<div class="top">raw</div>
|
||||
<div class="bottom" aria-label="" data-balloon-pos="up">-</div>
|
||||
</div>
|
||||
<div class="group key">
|
||||
<div class="top">characters</div>
|
||||
<div
|
||||
class="bottom"
|
||||
aria-label="correct, incorrect, extra, and missed"
|
||||
data-balloon-break=""
|
||||
data-balloon-pos="up"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <div class="subgroup"> -->
|
||||
<div class="group flat consistency">
|
||||
<div class="top">consistency</div>
|
||||
<div class="bottom" aria-label="" data-balloon-pos="up">2 -</div>
|
||||
</div>
|
||||
<div class="group time">
|
||||
<div class="top">time</div>
|
||||
<div class="bottom" aria-label="" data-balloon-pos="up">
|
||||
<div class="text">-</div>
|
||||
<div class="afk"></div>
|
||||
<div class="timeToday"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
||||
<div class="group dailyLeaderboard hidden">
|
||||
<div class="top">daily leaderboard</div>
|
||||
<div class="bottom">-</div>
|
||||
</div>
|
||||
|
||||
<div class="group source hidden">
|
||||
<div class="top">
|
||||
<span style="margin-right: 0.5em">source</span>
|
||||
<span
|
||||
id="reportQuoteButton"
|
||||
class="textButton hidden"
|
||||
aria-label="Report quote"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<i class="icon fas fa-fw fa-flag"></i>
|
||||
</span>
|
||||
<span
|
||||
id="favoriteQuoteButton"
|
||||
class="textButton hidden"
|
||||
aria-label="Favorite quote"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<i class="icon far fa-fw fa-heart"></i>
|
||||
</span>
|
||||
<span
|
||||
id="rateQuoteButton"
|
||||
class="textButton hidden"
|
||||
aria-label="Rate quote"
|
||||
data-balloon-pos="up"
|
||||
>
|
||||
<i class="icon far fa-fw fa-star"></i>
|
||||
<span class="rating"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bottom">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<!-- <div class="title">wpm over time</div> -->
|
||||
<canvas id="wpmChart"></canvas>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div id="resultWordsHistory" class="hidden">
|
||||
<div class="title">
|
||||
<span>input history</span>
|
||||
<span
|
||||
id="copyWordsListButton"
|
||||
class="textButton"
|
||||
aria-label="Copy words list"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<i class="fas fa-fw fa-align-left"></i>
|
||||
</span>
|
||||
<span
|
||||
id="copyMissedWordsListButton"
|
||||
class="textButton"
|
||||
aria-label="Copy missed words list"
|
||||
data-balloon-pos="up"
|
||||
>
|
||||
<i class="fas fa-fw fa-times"></i>
|
||||
</span>
|
||||
<span
|
||||
id="toggleBurstHeatmap"
|
||||
class="textButton"
|
||||
aria-label="Toggle burst heatmap"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<i class="fas fa-fw fa-fire-alt"></i>
|
||||
</span>
|
||||
<div class="heatmapLegend hidden">
|
||||
<div class="boxes">
|
||||
<div class="box box0"></div>
|
||||
<div class="box box1"></div>
|
||||
<div class="box box2"></div>
|
||||
<div class="box box3"></div>
|
||||
<div class="box box4"></div>
|
||||
<div class="bottom">
|
||||
<div id="resultWordsHistory" class="hidden">
|
||||
<div class="title">
|
||||
<span>input history</span>
|
||||
<span
|
||||
id="copyWordsListButton"
|
||||
class="textButton"
|
||||
aria-label="Copy words list"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<i class="fas fa-fw fa-align-left"></i>
|
||||
</span>
|
||||
<span
|
||||
id="copyMissedWordsListButton"
|
||||
class="textButton"
|
||||
aria-label="Copy missed words list"
|
||||
data-balloon-pos="up"
|
||||
>
|
||||
<i class="fas fa-fw fa-times"></i>
|
||||
</span>
|
||||
<span
|
||||
id="toggleBurstHeatmap"
|
||||
class="textButton"
|
||||
aria-label="Toggle burst heatmap"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<i class="fas fa-fw fa-fire-alt"></i>
|
||||
</span>
|
||||
<div class="heatmapLegend hidden">
|
||||
<div class="boxes">
|
||||
<div class="box box0"></div>
|
||||
<div class="box box1"></div>
|
||||
<div class="box box2"></div>
|
||||
<div class="box box3"></div>
|
||||
<div class="box box4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="words"></div>
|
||||
</div>
|
||||
<div class="words"></div>
|
||||
</div>
|
||||
<div id="resultReplay" class="hidden">
|
||||
<div class="title">
|
||||
watch replay
|
||||
<span
|
||||
id="playpauseReplayButton"
|
||||
class="textButton"
|
||||
aria-label="Start replay"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block"
|
||||
<div id="resultReplay" class="hidden">
|
||||
<div class="title">
|
||||
watch replay
|
||||
<span
|
||||
id="playpauseReplayButton"
|
||||
class="textButton"
|
||||
aria-label="Start replay"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<i class="fas fa-play"></i>
|
||||
</span>
|
||||
<p id="replayStats">0s</p>
|
||||
</div>
|
||||
<div id="wordsWrapper">
|
||||
<div id="replayWords" class="words"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
id="retrySavingResultButton"
|
||||
class="danger hidden"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-redo"></i>
|
||||
Retry saving result
|
||||
</button>
|
||||
<div class="buttons">
|
||||
<button
|
||||
class="text"
|
||||
id="nextTestButton"
|
||||
aria-label="Next test"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-play"></i>
|
||||
</span>
|
||||
<p id="replayStats">0s</p>
|
||||
</div>
|
||||
<div id="wordsWrapper">
|
||||
<div id="replayWords" class="words"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
id="retrySavingResultButton"
|
||||
class="danger hidden"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-redo"></i>
|
||||
Retry saving result
|
||||
</button>
|
||||
<div class="buttons">
|
||||
<button
|
||||
class="text"
|
||||
id="nextTestButton"
|
||||
aria-label="Next test"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-chevron-right"></i>
|
||||
</button>
|
||||
<button
|
||||
class="text"
|
||||
id="restartTestButtonWithSameWordset"
|
||||
aria-label="Repeat test"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-sync-alt"></i>
|
||||
</button>
|
||||
<button
|
||||
class="text"
|
||||
id="practiseWordsButton"
|
||||
aria-label="Practice words"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-exclamation-triangle"></i>
|
||||
</button>
|
||||
<button
|
||||
class="text"
|
||||
id="showWordHistoryButton"
|
||||
aria-label="Toggle words history"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-align-left"></i>
|
||||
</button>
|
||||
<button
|
||||
class="text"
|
||||
id="watchReplayButton"
|
||||
aria-label="Watch replay"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-backward"></i>
|
||||
</button>
|
||||
<button
|
||||
class="text"
|
||||
id="saveScreenshotButton"
|
||||
aria-label="Copy screenshot to clipboard"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="far fa-fw fa-image"></i>
|
||||
</button>
|
||||
<!-- <button
|
||||
<i class="fas fa-fw fa-chevron-right"></i>
|
||||
</button>
|
||||
<button
|
||||
class="text"
|
||||
id="restartTestButtonWithSameWordset"
|
||||
aria-label="Repeat test"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-sync-alt"></i>
|
||||
</button>
|
||||
<button
|
||||
class="text"
|
||||
id="practiseWordsButton"
|
||||
aria-label="Practice words"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-exclamation-triangle"></i>
|
||||
</button>
|
||||
<button
|
||||
class="text"
|
||||
id="showWordHistoryButton"
|
||||
aria-label="Toggle words history"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-align-left"></i>
|
||||
</button>
|
||||
<button
|
||||
class="text"
|
||||
id="watchReplayButton"
|
||||
aria-label="Watch replay"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-backward"></i>
|
||||
</button>
|
||||
<button
|
||||
class="text"
|
||||
id="saveScreenshotButton"
|
||||
aria-label="Copy screenshot to clipboard"
|
||||
role="button"
|
||||
data-balloon-pos="down"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="far fa-fw fa-image"></i>
|
||||
</button>
|
||||
<!-- <button
|
||||
class="text"
|
||||
id="watchVideoAdButton"
|
||||
aria-label="Watch video ad"
|
||||
|
|
@ -435,13 +436,15 @@
|
|||
>
|
||||
<i class="fas fa-fw fa-ad"></i>
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="loginTip">
|
||||
<a href="/login" router-link>Sign in</a>
|
||||
to save your result
|
||||
</div>
|
||||
<div class="ssWatermark hidden">monkeytype.com</div>
|
||||
</div>
|
||||
<div class="loginTip">
|
||||
<a href="/login" router-link>Sign in</a>
|
||||
to save your result
|
||||
</div>
|
||||
<div style="grid-column: 1/-1">
|
||||
<div class="full-width" style="margin-top: 1rem">
|
||||
<div id="ad-result-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="iconAndText">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
|
|
@ -454,7 +457,5 @@
|
|||
<div id="ad-result-small"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ssWatermark hidden">monkeytype.com</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
}
|
||||
.pageTest {
|
||||
#result {
|
||||
#result .wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"stats" "chart"
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
}
|
||||
.pageTest {
|
||||
#result {
|
||||
#result .wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"stats" "chart"
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
}
|
||||
.pageTest {
|
||||
#result .stats.morestats {
|
||||
#result .wrapper .stats.morestats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
}
|
||||
.pageTest {
|
||||
#result {
|
||||
#result .wrapper {
|
||||
.stats {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "wpm" "acc";
|
||||
|
|
|
|||
|
|
@ -516,7 +516,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
#result {
|
||||
#result .wrapper {
|
||||
display: grid;
|
||||
// height: 200px;
|
||||
gap: 1rem;
|
||||
|
|
|
|||
|
|
@ -834,7 +834,7 @@ export async function update(
|
|||
$("#result"),
|
||||
250,
|
||||
async () => {
|
||||
$("#result").trigger("focus");
|
||||
$("#result .wrapper").trigger("focus");
|
||||
void AdController.renderResult();
|
||||
TestUI.setResultCalculating(false);
|
||||
$("#words").empty();
|
||||
|
|
|
|||
|
|
@ -620,7 +620,7 @@ export async function screenshot(): Promise<void> {
|
|||
window.scrollTo({
|
||||
top: 0,
|
||||
});
|
||||
const src = $("#result");
|
||||
const src = $("#result .wrapper");
|
||||
const sourceX = src.offset()?.left ?? 0; /*X position from div#target*/
|
||||
const sourceY = src.offset()?.top ?? 0; /*Y position from div#target*/
|
||||
const sourceWidth = src.outerWidth(
|
||||
|
|
|
|||
Loading…
Reference in a new issue