Prepare layout for more complex details view (#62)
- Use buttons for "about" links - Make sure about text is readable on all view sizes (adding optional scrollbar) - Add button-row to allow for more complex buttons in the upcoming details view (see PR "Use Metrics classes from GrandPrix" #42 ) - Add `--foreground-color` and `--text-width` CSS variables - Hide screen-size warning on startup to avoid flickering - Fix main view centering by using more detailed calc(...)
This commit is contained in:
Camillo Bruni
GitHub
parent
0b592ff361
commit
7722c8ab06
2 changed files with 90 additions and 38 deletions
23
index.html
23
index.html
|
|
@ -19,9 +19,12 @@
|
|||
</strong>
|
||||
</p>
|
||||
<div class="buttons">
|
||||
<button class="start-tests-button">Start Test</button>
|
||||
<br />
|
||||
<button class="show-about">About Speedometer</button>
|
||||
<div class="button-row">
|
||||
<button class="start-tests-button">Start Test</button>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button class="show-about">About Speedometer</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -43,8 +46,10 @@
|
|||
<div id="result-number"></div>
|
||||
<div id="confidence-number"></div>
|
||||
<div class="buttons">
|
||||
<button class="start-tests-button">Test Again</button>
|
||||
<button id="show-details">Details</button>
|
||||
<div class="button-row">
|
||||
<button class="start-tests-button">Test Again</button>
|
||||
<button id="show-details">Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -54,10 +59,10 @@
|
|||
<table class="results-table"></table>
|
||||
<div class="arithmetic-mean"><label>Arithmetic Mean:</label><span id="results-with-statistics"></span></div>
|
||||
<div class="buttons">
|
||||
<button class="start-tests-button">Test Again</button>
|
||||
<button id="show-summary">Summary</button>
|
||||
<br />
|
||||
<button class="show-about">About Speedometer</button>
|
||||
<div class="button-row">
|
||||
<button class="start-tests-button">Test Again</button>
|
||||
<button id="show-summary">Summary</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,28 @@
|
|||
::root {
|
||||
:root {
|
||||
--viewport-width: 800px;
|
||||
--viewport-height: 600px;
|
||||
--foreground: rgb(235, 235, 235);
|
||||
--text-width: 650px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(46, 51, 55);
|
||||
color: rgb(235, 235, 235);
|
||||
color: var(--foreground);
|
||||
font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: rgb(46, 51, 55);
|
||||
background-color: rgb(235, 235, 235);
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
|
||||
h1,
|
||||
button {
|
||||
button, .button {
|
||||
font-family: "Futura-Medium", Futura, "Helvetica Neue", Helvetica, Verdana, sans-serif;
|
||||
}
|
||||
.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Menlo, Monaco, monospace;
|
||||
|
|
@ -25,7 +30,7 @@ code {
|
|||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid rgb(235, 235, 235);
|
||||
border: 1px solid var(--foreground);
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
}
|
||||
|
|
@ -37,16 +42,18 @@ img {
|
|||
}
|
||||
|
||||
main {
|
||||
--padding-width: 15px;
|
||||
--border-width: 6px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: var(--viewport-width);
|
||||
height: var(--viewport-height);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: calc(var(--viewport-height) / -2);
|
||||
margin-left: calc(var(--viewport-width) / -2);
|
||||
padding: 15px;
|
||||
border: 6px solid rgb(235, 235, 235);
|
||||
margin-top: calc(var(--viewport-height) / -2 - var(--padding-width) - var(--border-width));
|
||||
margin-left: calc(var(--viewport-width) / -2 - var(--padding-width) - var(--border-width));
|
||||
padding: var(--padding-width);
|
||||
border: var(--border-width) solid var(--foreground);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -63,10 +70,21 @@ h1 {
|
|||
margin-top: 30px;
|
||||
font-size: 40px;
|
||||
font-weight: normal;
|
||||
color: rgb(235, 235, 235);
|
||||
color: var(--foreground);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0px;
|
||||
font-weight: normal;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 5px 0 5px 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
|
|
@ -78,36 +96,48 @@ a {
|
|||
|
||||
.buttons {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button {
|
||||
section#home > .buttons {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buttons button {
|
||||
.buttons button, .buttons .button {
|
||||
appearance: none;
|
||||
border: 3px solid rgb(235, 235, 235);
|
||||
border: 3px solid var(--foreground);
|
||||
border-radius: 10px;
|
||||
min-width: 200px;
|
||||
padding: 5px 20px;
|
||||
margin: 0 40px;
|
||||
font-size: 25px;
|
||||
color: rgb(235, 235, 235);
|
||||
color: var(--foreground);
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.buttons button:active {
|
||||
background-color: rgb(235, 235, 235);
|
||||
background-color: var(--foreground);
|
||||
color: rgb(46, 51, 55);
|
||||
border-color: rgb(235, 235, 235) !important;
|
||||
border-color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.buttons button:focus {
|
||||
|
|
@ -117,6 +147,8 @@ button {
|
|||
|
||||
section {
|
||||
display: none;
|
||||
width: var(--viewport-width);
|
||||
height: var(--viewport-height);
|
||||
}
|
||||
|
||||
section > p {
|
||||
|
|
@ -131,8 +163,8 @@ section.selected {
|
|||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
width: var(--viewport-width);
|
||||
height: var(--viewport-height);
|
||||
}
|
||||
|
||||
section#home > p {
|
||||
|
|
@ -152,8 +184,8 @@ button.show-about {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
section#home > .buttons {
|
||||
margin-top: 80px;
|
||||
#screen-size-warning {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#progress {
|
||||
|
|
@ -173,7 +205,7 @@ section#home > .buttons {
|
|||
left: 0;
|
||||
height: 6px;
|
||||
width: 0;
|
||||
background-color: rgb(235, 235, 235);
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -197,6 +229,10 @@ section#home > .buttons {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
section#detailed-results > .results-table {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
section#summarized-results > #result-number,
|
||||
section#summarized-results > #confidence-number {
|
||||
|
|
@ -216,12 +252,11 @@ section#summarized-results > #confidence-number {
|
|||
color: rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
section#detailed-results > table {
|
||||
float: left;
|
||||
width: 50%;
|
||||
section#detailed-results button, section#detailed-results .button {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
section#detailed-results > .arithmetic-mean {
|
||||
section#detailed-results >.arithmetic-mean {
|
||||
clear: both;
|
||||
padding-top: 32px;
|
||||
text-align: center;
|
||||
|
|
@ -230,12 +265,23 @@ section#detailed-results > .arithmetic-mean {
|
|||
section#detailed-results > .arithmetic-mean > label {
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
color: rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
section#detailed-results > .show-about {
|
||||
section#detailed-results button.show-about {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section#detailed-results h1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
section#about {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
section#about p {
|
||||
width: var(--text-width);
|
||||
padding-left: calc((var(--viewport-width) - var(--text-width)) / 2);
|
||||
}
|
||||
|
||||
section#about h1 {
|
||||
|
|
@ -248,6 +294,7 @@ section#about .note {
|
|||
color: rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
|
|
|||
Loading…
Reference in a new issue