foster/denoland-deno
1
0
Fork 0
mirror of https://github.com/denoland/deno.git synced 2024-12-22 23:34:47 -05:00
Code Issues Packages 1 Wiki Activity

Fix anchor links and add spinner to the benchmarks page (#2205)

Browse source
This commit is contained in:
David Stone 2019-04-25 18:20:10 +01:00 committed by Ryan Dahl
parent e725b26b28
commit 098d6fffab
3 changed files with 52 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
website/app.js
View file

@ -194,7 +194,7 @@ export function drawCharts(dataUrl) {
if (window["location"]["hostname"] != "deno.github.io") {
dataUrl = "https://denoland.github.io/deno/" + dataUrl;
}
drawChartsFromBenchmarkData(dataUrl);
return drawChartsFromBenchmarkData(dataUrl);
}
/**

23
website/benchmarks.html
View file

@ -9,6 +9,9 @@
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
</head>
<body>
<div id="spinner-overlay">
<div class="spinner"></div>`
</div>
<main>
<a href="/"><img src="images/deno_logo_3.svg" width=200></a>
<h1>Deno Continuous Benchmarks</h1>
@ -153,10 +156,26 @@
<script type="module">
import { drawCharts } from "./app.js";
window.chartWidth = 800;
const overlay = document.getElementById("spinner-overlay")
let u = window.location.hash.match("all") ? "./data.json" : "recent.json";
function showSpinner () {
overlay.style.display = "block";
}
drawCharts(u);
function hideSpinner () {
overlay.style.display = "none";
}
function updateCharts () {
const u = window.location.hash.match("all") ? "./data.json" : "recent.json";
showSpinner()
drawCharts(u).finally(hideSpinner)
}
updateCharts()
window.onhashchange = updateCharts
</script>
</body>
</html>

30
website/style.css
View file

@ -101,3 +101,33 @@ code {
.hljs {
background: transparent;
}
#spinner-overlay {
display: none;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: rgba(0, 0, 0, 0.3);
}
@keyframes spinner {
to {transform: rotate(360deg);}
}
.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #000;
animation: spinner .6s linear infinite;
}