Status update and CSS fixes (#169)

- Use flexbox and use a uniform var(--gap)
- Only make the workload results section scrollable
- Do not change the item order during running, but rather update the results in place and scroll them into view
- Simplify CSS a bit and avoid most media-size based custom results
- Use uniform min-width between results and start button

Author: camillobruni

JetStream.css

@@ -39,16 +39,22 @@
     --benchmark-heading-color: rgb(183, 183, 183);
     --benchmark-error-text-color: #ff8686;
     --benchmark-done-result-color: #4A4A4A;
+    --gap: 3rem;
+    --width: 200px;
 }
 
 html,
 svg text {
     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
     font-size: 62.5%;
     font-synthesis: none;
+    height: 100vh;
 }
 
 body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
     margin: 0;
     font-size: 1.6rem;
     font-weight: 400;
@@ -58,32 +64,48 @@ body {
     background-size: 100vw;
     padding-bottom: 0px;
     background-image: url('clouds.svg');
+    overflow-y: hidden;
+    height: 100%;
+}
+
+.overflow-scroll {
+    overflow-y: auto;
+}
+
+.overflow-visible {
+    overflow: visible;
 }
 
+
 ::selection {
     background-color: var(--color-primary);
     color: var(--text-color-inverse);
 }
 
 main {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    margin: 0 auto;
+    padding: 0 var(--gap);
     max-width: 1180px;
-    margin: auto;
     text-align: center;
+    flex: 1;
+    overflow: hidden;
+}
+
+main p {
+    margin: 0;
 }
 
 img {
-    -webkit-user-select: none;
     -webkit-user-drag: none;
+    user-select: none;
 }
 
 .logo {
     box-sizing: border-box;
     width: 100%;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     perspective: 600;
 }
@@ -127,27 +149,28 @@ img {
     text-align: center;
 }
 
-.summary+.summary {
-    padding-top: 5px;
-    margin-top: 5px;
-}
-
 .summary:empty {
     display: none;
 }
 
 article,
 .summary {
     max-width: 70rem;
-    margin: 0 auto 1rem;
+    margin: 0 auto 0 auto;
     opacity: 0;
     animation: fadein 0.5s ease-in-out forwards;
     animation-delay: 200ms;
 }
 
+article {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+}
 h1 {
     color: var(--text-color-primary);
     text-align: center;
+    margin-bottom: 0;
 }
 
 
@@ -170,7 +193,6 @@ h6 {
 p {
     text-align: left;
     color: var(--text-color-secondary);
-    margin: 0 0 3rem 0;
 }
 
 h5,
@@ -204,10 +226,6 @@ a:active {
     color: var(--link-hover-color);
 }
 
-#status {
-    margin: 2rem 0rem;
-}
-
 #status label,
 a.button {
     display: inline-block;
@@ -219,11 +237,10 @@ a.button {
     color: var(--text-color-inverse);
     border: 1px solid var(--button-color-primary);
     border-radius: 2px;
-    padding: 0.3rem 9rem 0.5rem;
+    padding: 0.3rem 0.3rem 0.5rem;
+    text-align: center;
+    width: var(--width);
     -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }
 
@@ -253,9 +270,6 @@ a.button {
     -webkit-background-clip: text;
     background-repeat: no-repeat;
     -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }
 
@@ -312,20 +326,26 @@ a.button {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
+    gap: var(--gap);
+    margin: 0 calc(var(--gap) * -1) 0 calc(-var(--gap) * -1);
     animation: fadein 500ms ease-out forwards;
     opacity: 0;
+    overflow-y: auto;
+    flex: 1;
+    padding-bottom: var(--gap);
+    box-sizing: border-box;
 }
 
 .benchmark {
     position: relative;
     flex: 1;
     max-width: 20%;
-    min-width: 200px;
+    min-width: var(--width);
     text-align: left;
     color: var(--text-color-very-subtle);
     font-size: 1.6rem;
-    margin: 0 1.6rem 3rem 0;
-
+    scroll-margin-top: 20vh;
+    scroll-margin-bottom: 20vh;
 }
 
 .benchmark h4,
@@ -359,9 +379,6 @@ a.button {
     background-color: transparent;
     background-image: none;
     -webkit-touch-callout: revert;
-    -webkit-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
     user-select: text;
 }
 
@@ -545,15 +562,4 @@ dt:target {
     #jetstreams {
         background-size: 200%;
     }
-
-
-    article,
-    .summary {
-        padding-top: 10rem;
-        margin: 0 1rem;
-    }
-
-    a.button {
-        padding: 0.3rem 6rem 0.5rem;
-    }
-}
+}

JetStreamDriver.js

@@ -362,9 +362,6 @@ class Driver {
         if (!isInBrowser)
             return;
 
-        for (let f = 0; f < 5; f++)
-            text += `<div class="benchmark fill"></div>`;
-
         const timestamp = performance.now();
         document.getElementById('jetstreams').style.backgroundImage = `url('jetstreams.svg?${timestamp}')`;
         const resultsTable = document.getElementById("results");
@@ -1064,10 +1061,9 @@ class Benchmark {
     }
 
     updateUIBeforeRunInBrowser() {
-        const containerUI = document.getElementById("results");
         const resultsBenchmarkUI = document.getElementById(`benchmark-${this.name}`);
-        containerUI.insertBefore(resultsBenchmarkUI, containerUI.firstChild);
         resultsBenchmarkUI.classList.add("benchmark-running");
+        resultsBenchmarkUI.scrollIntoView({ block: "nearest" });
 
         for (const id of this.scoreIdentifiers())
             document.getElementById(id).innerHTML = "...";

in-depth.html

@@ -32,13 +32,13 @@
     <link rel="stylesheet" href="JetStream.css">
 
 </head>
-<body>
+<body class="overflow-scroll">
 <h1 class="logo">
     <div id="jetstreams">
         <a href="index.html" class="logo-image">JetStream 3</a>
     </div>
 </h1>
-<main>
+<main class="overflow-visible">
     <article>
         <h2>In-Depth Analysis</h2>