Skip to content

Commit 334bdcf

Browse files
rylevrylev
committed
Better input field
1 parent b11874e commit 334bdcf

File tree

1 file changed

+120
-41
lines changed

1 file changed

+120
-41
lines changed

‎site/static/compare.html

Lines changed: 120 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,83 @@
2020
left: -2em;
2121
}
2222

23-
#filters-toggle {
24-
margin: 10px 0px;
25-
background: #add8e6;
26-
width: 70px;
27-
padding: 5px;
28-
border-radius: 15px;
23+
#settings {
24+
border: 2px black;
25+
border-style: solid;
26+
padding: 14px;
27+
border-radius: 10px;
28+
}
29+
30+
#commits {
31+
border: none;
32+
display: flex;
33+
padding: 0px;
34+
}
35+
36+
.commit-input {
37+
width: 270px;
38+
margin: 10px;
39+
display: flex;
40+
flex-direction: column;
41+
}
42+
43+
.commit-input label {
44+
font-size: 18px;
2945
font-weight: bold;
30-
text-align: center;
46+
margin-bottom: 6px;
47+
}
48+
49+
#stats {
50+
border-radius: 5px;
51+
width: 132px;
52+
font-size: 16px;
53+
margin: 10px;
54+
padding: 3px;
55+
}
56+
57+
#filters-toggle {
58+
cursor: pointer;
59+
}
60+
61+
.section-heading {
62+
font-size: 22px;
63+
}
64+
65+
#filters-content .section-heading {
66+
font-size: 18px;
67+
}
68+
69+
#filters-content {
70+
margin-top: 16px;
71+
3172
}
3273

3374
#filters {
3475
padding: 10px;
35-
border: 2px black;
36-
border-style: solid;
76+
border: 1px black;
77+
border-style: dotted;
78+
margin: 16px 0px;
79+
}
80+
81+
#settings input {
82+
border-radius: 5px;
83+
padding: 10px;
84+
font-size: 14px;
85+
}
86+
87+
#filter {
88+
margin: 10px 0;
89+
}
90+
91+
#settings input[type=submit] {
92+
width: 100%;
93+
font-weight: bold;
94+
background: #ADD8E6;
95+
margin: 10px 0;
96+
}
97+
98+
.cache-label {
99+
font-weight: bold;
37100
}
38101
</style>
39102
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
@@ -47,40 +110,56 @@
47110
<br />
48111
<form id="settings" action="">
49112
<fieldset id="commits">
50-
<legend>Commits</legend>
51-
<label for="start-bound">Commit/Date A:</label>
52-
<input width="100em" placeholder="YYYY-MM-DD or SHA" id="start-bound" /><br>
53-
<label for="end-bound">Commit/Date B:</label>
54-
<input width="100em" placeholder="YYYY-MM-DD or SHA" id="end-bound" /><br>
113+
<legend class="section-heading">Commits</legend>
114+
<div style="display: flex; width: 100%; justify-content: space-around;">
115+
<div class="commit-input">
116+
<label for="start-bound">Before</label>
117+
<input width="100em" placeholder="YYYY-MM-DD or Commit SHA" id="start-bound" /><br>
118+
</div>
119+
<div class="commit-input">
120+
<label for="end-bound">After</label>
121+
<input width="100em" placeholder="YYYY-MM-DD or Commit SHA" id="end-bound" /><br>
122+
</div>
123+
</div>
55124
</fieldset>
56-
<label for="stats">Choose a comparison method:</label>
57-
<select id='stats' name="stat">
58-
</select><br>
59-
<input type="submit" value="Submit" onclick="submit_settings(); return false;">
125+
<label class="section-heading" for="stats">Metric</label>
126+
<div id="metric" style="display: flex; justify-content: center;">
127+
<select id='stats' name="stat"></select>
128+
</div>
129+
<input id="submit" type="submit" value="Submit" onclick="submit_settings(); return false;">
60130
</form>
61-
<div id="filters-toggle">Filters <span id="filters-toggle-indicator"></span></div>
62131
<div id="filters">
63-
<div>
64-
<p>Filter benchmark builds: <input id="filter" type="text" /> </p>
65-
</div>
66-
<div>
67-
<h3>Cache states</h3>
68-
<p>Most benchmarks have at least 4 cache states for which we collect data:</p>
69-
<ul style="list-style:none;">
70-
<li><input type="checkbox" id="build-full" checked /> full: a
71-
non-incremental full build starting with empty cache</li>
72-
<li><input type="checkbox" id="build-incremental-full" checked /> incr-full: an incremental build
73-
starting
74-
with empty cache</li>
75-
<li><input type="checkbox" id="build-incremental-unchanged" checked /> incr-unchanged: an incremental
76-
build
77-
starting with complete
78-
cache, and unchanged source directory -- the "perfect" scenario for incremental.</li>
79-
<li><input type="checkbox" id="build-incremental-patched" checked /> incr-patched: an incremental build
80-
starting with complete cache, and an
81-
altered source directory. The typical variant of this is "println" which represents
82-
the addition of a `println!` macro somewhere in the source code.</li>
83-
</ul>
132+
<div id="filters-toggle" class="section-heading">Filters<span id="filters-toggle-indicator"></span></div>
133+
<div id="filters-content">
134+
<div>
135+
<div class="section-heading">Filter by benchmark
136+
</div>
137+
<input id="filter" type="text" /> </p>
138+
</div>
139+
<div>
140+
<div class="section-heading">Cache states</div>
141+
<p>Most benchmarks have at least 4 cache states for which we collect data:</p>
142+
<ul style="list-style:none;">
143+
<li><input type="checkbox" id="build-full" checked /><span class="cache-label">full</span>: a
144+
non-incremental full build starting with empty cache</li>
145+
<li><input type="checkbox" id="build-incremental-full" checked /> <span
146+
class="cache-label">incr-full</span>: an incremental build
147+
starting
148+
with empty cache</li>
149+
<li><input type="checkbox" id="build-incremental-unchanged" checked /> <span
150+
class="cache-label">incr-unchanged</span>: an
151+
incremental
152+
build
153+
starting with complete
154+
cache, and unchanged source directory -- the "perfect" scenario for incremental.</li>
155+
<li><input type="checkbox" id="build-incremental-patched" checked /><span
156+
class="cache-label">incr-patched</span> : an incremental
157+
build
158+
starting with complete cache, and an
159+
altered source directory. The typical variant of this is "println" which represents
160+
the addition of a `println!` macro somewhere in the source code.</li>
161+
</ul>
162+
</div>
84163
</div>
85164
</div>
86165
<div id="content" style="display: none; margin-top: 15px"></div>
@@ -96,7 +175,7 @@ <h3>Cache states</h3>
96175
<script src="shared.js"></script>
97176
<script>
98177
function toggle_filters() {
99-
let styles = document.getElementById("filters").style;
178+
let styles = document.getElementById("filters-content").style;
100179
let indicator = document.getElementById("filters-toggle-indicator");
101180
if (styles.display != "none") {
102181
indicator.innerHTML = "⯈"

0 commit comments

Comments
 (0)