Skip to content

Commit c383cfa

Browse files
rylevrylev
committed
Make things more compact
1 parent 23f1881 commit c383cfa

File tree

1 file changed

+76
-57
lines changed

1 file changed

+76
-57
lines changed

‎site/static/compare.html

Lines changed: 76 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,18 @@
1010
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
1111
<style>
1212
ul li {
13-
position: relative;
14-
padding-top: 0.5em;
13+
margin: 0;
1514
}
1615

17-
input[type="checkbox"] {
18-
position: absolute;
19-
top: 0.25em;
20-
left: -2em;
16+
ul li input {
17+
vertical-align: middle;
18+
margin: 0 2px;
19+
2120
}
2221

23-
#settings {
24-
border: 2px black;
25-
border-style: solid;
26-
padding: 14px;
27-
border-radius: 10px;
22+
.section {
23+
display: flex;
24+
margin: 4px 0;
2825
}
2926

3027
#commits {
@@ -35,61 +32,66 @@
3532

3633
.commit-input {
3734
width: 270px;
38-
margin: 10px;
3935
display: flex;
4036
flex-direction: column;
4137
}
4238

4339
.commit-input label {
44-
font-size: 18px;
40+
font-size: 12px;
4541
font-weight: bold;
4642
margin-bottom: 6px;
4743
}
4844

45+
#metric {
46+
position: relative;
47+
height: 40px;
48+
}
49+
4950
#stats {
5051
border-radius: 5px;
51-
width: 132px;
52-
font-size: 16px;
53-
margin: 10px;
54-
padding: 3px;
52+
width: 200px;
53+
font-size: 14px;
54+
margin-left: 52px;
5555
}
5656

5757
#filters-toggle {
5858
cursor: pointer;
5959
}
6060

6161
.section-heading {
62-
font-size: 22px;
62+
font-size: 16px;
6363
}
6464

65-
#search-content {
66-
margin-top: 16px;
65+
.section .section-heading {
66+
display: flex;
67+
flex-direction: column;
68+
justify-content: center;
6769
}
6870

6971
#filters-content .section-heading {
70-
font-size: 18px;
71-
}
72-
73-
#filters-content {
74-
margin-top: 16px;
72+
font-size: 16px;
7573
}
7674

7775
#filters {
78-
padding: 10px;
7976
border: 1px black;
8077
border-style: dotted;
8178
margin: 16px 0px;
8279
border-radius: 10px;
8380
}
8481

85-
#settings input {
82+
#filter {
83+
margin-left: 52px;
84+
}
85+
86+
input {
8687
border-radius: 5px;
87-
padding: 10px;
88-
font-size: 14px;
88+
padding: 4px;
89+
font-size: 12px;
90+
height: 100%;
8991
}
9092

91-
#filter {
92-
margin: 10px 0;
93+
input[type="checkbox"] {
94+
height: auto;
9395
}
9496

9597
#settings input[type=submit] {
@@ -103,9 +105,20 @@
103105
font-weight: bold;
104106
}
105107

108+
#states-list {
109+
display: flex;
110+
justify-content: space-around;
111+
align-items: center;
112+
width: 80%;
113+
list-style: none;
114+
margin: 0;
115+
}
116+
106117
.tooltip {
107118
position: relative;
108119
border-radius: 50%;
120+
font-size: 12px;
121+
margin: 0 -6px;
109122
border: 1px solid #7d6969;
110123
width: 16px;
111124
text-align: center;
@@ -147,44 +160,50 @@
147160
<br />
148161
<h1>Comparing <span id="stat-header">instructions:u</span> between <span id="before">???</span> and <span
149162
id="after">???</span></h1>
150-
<form id="settings" action="">
151-
<div id="search-toggle" class="section-heading">Compare Other Commits<span id="search-toggle-indicator"></span>
152-
</div>
163+
<fieldset id="settings">
164+
<legend id="search-toggle" class="section-heading">Compare other commits<span
165+
id="search-toggle-indicator"></span></legend>
153166
<div id="search-content">
154-
<fieldset id="commits">
155-
<legend class="section-heading">Commits</legend>
167+
<div id="commits" class="section">
168+
<div class="section-heading">Commits</div>
156169
<div style="display: flex; width: 100%; justify-content: space-around;">
157170
<div class="commit-input">
158171
<label for="start-bound">Before</label>
159-
<input width="100em" placeholder="YYYY-MM-DD or Commit SHA" id="start-bound" /><br>
172+
<input width="100em" placeholder="YYYY-MM-DD or Commit SHA" id="start-bound" />
160173
</div>
161174
<div class="commit-input">
162175
<label for="end-bound">After</label>
163-
<input width="100em" placeholder="YYYY-MM-DD or Commit SHA" id="end-bound" /><br>
176+
<input width="100em" placeholder="YYYY-MM-DD or Commit SHA" id="end-bound" />
164177
</div>
165178
</div>
166-
</fieldset>
167-
<div id="metric" style="position: relative;height: 60px;">
168-
<label class="section-heading" for="stats">Metric</label>
169-
<div style="width: 100%; position: absolute; top:0; display: flex; justify-content: center;">
179+
</div>
180+
<div id="metric" class="section">
181+
<div class="section-heading" for="stats">Metric</div>
182+
<div style="display: flex; flex-direction: column; justify-content: center;">
170183
<select id='stats' name="stat"></select>
171184
</div>
172185
</div>
173186
<input id="submit" type="submit" value="Submit" onclick="submit_settings(); return false;">
174-
</div>
175-
</form>
176-
<div id="filters">
177-
<div id="filters-toggle" class="section-heading">Filters<span id="filters-toggle-indicator"></span></div>
187+
</fieldset>
188+
</div>
189+
<fieldset id="filters">
190+
<legend id="filters-toggle" class="section-heading">Filters<span id="filters-toggle-indicator"></span></legend>
178191
<div id="filters-content" style="display: none;">
179-
<div>
192+
<div class="section">
180193
<div class="section-heading">Filter by benchmark
181194
</div>
182195
<input id="filter" type="text" /> </p>
183196
</div>
184-
<div>
185-
<div class="section-heading">Cache states</div>
186-
<p>Most benchmarks have at least 4 cache states for which we collect data:</p>
187-
<ul style="display: flex; justify-content: space-around; list-style:none;">
197+
<div class="section">
198+
<div class="section-heading">
199+
<div>
200+
<span>Cache states</span>
201+
<div class="tooltip">?<span class="tooltiptext">
202+
Most benchmarks have at least 4 cache states for which we collect data
203+
</div>
204+
</div>
205+
</div>
206+
<ul id="states-list">
188207
<li><input type="checkbox" id="build-full" checked /><span class="cache-label">full</span>
189208
<div class="tooltip">?<span class="tooltiptext">A
190209
non-incremental full build starting with empty cache</span></div>
@@ -216,7 +235,7 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
216235
</ul>
217236
</div>
218237
</div>
219-
</div>
238+
</fieldset>
220239
<div id="content" style="display: none; margin-top: 15px"></div>
221240
<br>
222241
<div id="as-of"></div>
@@ -229,7 +248,7 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
229248
<script src="https://cdnjs.cloudflare.com/ajax/libs/msgpack-lite/0.1.26/msgpack.min.js"></script>
230249
<script src="shared.js"></script>
231250
<script>
232-
function toggle_filters(id, toggle) {
251+
function toggleFilters(id, toggle) {
233252
let styles = document.getElementById(id).style;
234253
let indicator = document.getElementById(toggle);
235254
if (styles.display != "none") {
@@ -240,14 +259,14 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
240259
styles.display = "block";
241260
}
242261
}
243-
toggle_filters("filters-content", "filters-toggle-indicator");
244-
toggle_filters("search-content", "search-toggle-indicator");
262+
toggleFilters("filters-content", "filters-toggle-indicator");
263+
toggleFilters("search-content", "search-toggle-indicator");
245264

246265
document.getElementById("filters-toggle").onclick = (e) => {
247-
toggle_filters("filters-content", "filters-toggle-indicator");
266+
toggleFilters("filters-content", "filters-toggle-indicator");
248267
};
249268
document.getElementById("search-toggle").onclick = (e) => {
250-
toggle_filters("search-content", "search-toggle-indicator");
269+
toggleFilters("search-content", "search-toggle-indicator");
251270
};
252271

253272

0 commit comments

Comments
 (0)