Skip to content

Commit 23f1881

Browse files
rylevrylev
committed
Collapse search by default
1 parent 3e81eb6 commit 23f1881

File tree

1 file changed

+57
-22
lines changed

1 file changed

+57
-22
lines changed

‎site/static/compare.html

Lines changed: 57 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@
6262
font-size: 22px;
6363
}
6464

65+
#search-content {
66+
margin-top: 16px;
67+
}
68+
6569
#filters-content .section-heading {
6670
font-size: 18px;
6771
}
@@ -75,6 +79,7 @@
7579
border: 1px black;
7680
border-style: dotted;
7781
margin: 16px 0px;
82+
border-radius: 10px;
7883
}
7984

8085
#settings input {
@@ -132,7 +137,6 @@
132137
opacity: 1;
133138
}
134139
</style>
135-
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
136140
</head>
137141

138142
<body class="container" style="max-width:800px">
@@ -141,27 +145,33 @@
141145
<a href="status.html">status</a>, <a href="help.html">help</a>.
142146
</div>
143147
<br />
148+
<h1>Comparing <span id="stat-header">instructions:u</span> between <span id="before">???</span> and <span
149+
id="after">???</span></h1>
144150
<form id="settings" action="">
145-
<fieldset id="commits">
146-
<legend class="section-heading">Commits</legend>
147-
<div style="display: flex; width: 100%; justify-content: space-around;">
148-
<div class="commit-input">
149-
<label for="start-bound">Before</label>
150-
<input width="100em" placeholder="YYYY-MM-DD or Commit SHA" id="start-bound" /><br>
151+
<div id="search-toggle" class="section-heading">Compare Other Commits<span id="search-toggle-indicator"></span>
152+
</div>
153+
<div id="search-content">
154+
<fieldset id="commits">
155+
<legend class="section-heading">Commits</legend>
156+
<div style="display: flex; width: 100%; justify-content: space-around;">
157+
<div class="commit-input">
158+
<label for="start-bound">Before</label>
159+
<input width="100em" placeholder="YYYY-MM-DD or Commit SHA" id="start-bound" /><br>
160+
</div>
161+
<div class="commit-input">
162+
<label for="end-bound">After</label>
163+
<input width="100em" placeholder="YYYY-MM-DD or Commit SHA" id="end-bound" /><br>
164+
</div>
151165
</div>
152-
<div class="commit-input">
153-
<label for="end-bound">After</label>
154-
<input width="100em" placeholder="YYYY-MM-DD or Commit SHA" id="end-bound" /><br>
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;">
170+
<select id='stats' name="stat"></select>
155171
</div>
156172
</div>
157-
</fieldset>
158-
<div id="metric" style="position: relative;height: 60px;">
159-
<label class="section-heading" for="stats">Metric</label>
160-
<div style="width: 100%; position: absolute; top:0; display: flex; justify-content: center;">
161-
<select id='stats' name="stat"></select>
162-
</div>
173+
<input id="submit" type="submit" value="Submit" onclick="submit_settings(); return false;">
163174
</div>
164-
<input id="submit" type="submit" value="Submit" onclick="submit_settings(); return false;">
165175
</form>
166176
<div id="filters">
167177
<div id="filters-toggle" class="section-heading">Filters<span id="filters-toggle-indicator"></span></div>
@@ -219,9 +229,9 @@
219229
<script src="https://cdnjs.cloudflare.com/ajax/libs/msgpack-lite/0.1.26/msgpack.min.js"></script>
220230
<script src="shared.js"></script>
221231
<script>
222-
function toggle_filters() {
223-
let styles = document.getElementById("filters-content").style;
224-
let indicator = document.getElementById("filters-toggle-indicator");
232+
function toggle_filters(id, toggle) {
233+
let styles = document.getElementById(id).style;
234+
let indicator = document.getElementById(toggle);
225235
if (styles.display != "none") {
226236
indicator.innerHTML = "⯈"
227237
styles.display = "none";
@@ -230,10 +240,14 @@
230240
styles.display = "block";
231241
}
232242
}
233-
toggle_filters();
243+
toggle_filters("filters-content", "filters-toggle-indicator");
244+
toggle_filters("search-content", "search-toggle-indicator");
234245

235246
document.getElementById("filters-toggle").onclick = (e) => {
236-
toggle_filters();
247+
toggle_filters("filters-content", "filters-toggle-indicator");
248+
};
249+
document.getElementById("search-toggle").onclick = (e) => {
250+
toggle_filters("search-content", "search-toggle-indicator");
237251
};
238252

239253

@@ -641,10 +655,31 @@
641655
}, state);
642656
make_request("/get", values).then(function (data) {
643657
DATA = data;
658+
update_header(data.a.commit, data.b.commit);
644659
populate_data(data);
645660
});
646661
}
647662

663+
function update_header(a, b, stat) {
664+
let shorten = (text) => {
665+
return text.substring(0, 7);
666+
}
667+
a && (document.getElementById("before").innerHTML = shorten(a));
668+
b && (document.getElementById("after").innerHTML = shorten(b));
669+
stat && (document.getElementById("stat-header").innerHTML = stat);
670+
}
671+
function findQueryParam(name) {
672+
let urlParams = window.location.search.substring(1).split("&").map(x => x.split("="));
673+
let pair = urlParams.find(x => x[0] === name)
674+
if (pair) {
675+
return unescape(pair[1]);
676+
}
677+
}
678+
let start = findQueryParam("start");
679+
let end = findQueryParam("end");
680+
let stat = findQueryParam("stat")
681+
update_header(start, end, stat);
682+
648683
function submit_settings() {
649684
let start = document.getElementById("start-bound").value;
650685
let end = document.getElementById("end-bound").value;

0 commit comments

Comments
 (0)