Skip to content

Commit f02ee22

Browse files
vict0rschvict0rsch
committed
improve comparison UI
1 parent 6eb78e4 commit f02ee22

8 files changed

+29
-31
lines changed

‎css/grayscale.css

+2-3
Original file line numberDiff line numberDiff line change
@@ -602,7 +602,6 @@
602602
.compute-section #comparison-row #comparison-card #comparison-columns-row .comparison-column small {
603603
color: rgba(0, 0, 0, 0.35);
604604
font-size: 0.7rem;
605-
vertical-align: text-top;
606605
}
607606

608607
.learn-section {
@@ -1349,14 +1348,14 @@ footer {
13491348
}
13501349

13511350
.arrow-icon {
1352-
height: 2.2em;
1353-
width: 2.8em;
13541351
display: block;
13551352
padding: 0.5em;
13561353
margin: 1em auto;
13571354
position: absolute;
13581355
cursor: pointer;
13591356
border-radius: 4px;
1357+
-webkit-transform: translate(-50%, 45%);
1358+
transform: translate(-50%, 45%);
13601359
}
13611360

13621361
@-moz-document url-prefix() {

‎css/grayscale.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎html/_compute.html

+7-6
Original file line numberDiff line numberDiff line change
@@ -237,14 +237,15 @@ <h3 class="pad"><span id="comparison-result-co2">0</span> kg of CO<sub>2</sub>eq
237237
<div class="col-8">
238238
<h4> Km driven by an average car
239239
<small>
240-
[1]
240+
<sup>[1]</sup>
241241
</small>
242242
</h4>
243243
</div>
244244
</div>
245245
</div>
246-
<span class="separator"></span>
247-
<div class="comparison-column col-xs-6 col-md-4">
246+
<!-- <span class="separator"></span> -->
247+
<div class="comparison-column col-xs-6 col-md-4"
248+
style="border-left: 1px solid rgb(245, 82, 73); border-right: 1px solid rgb(245, 82, 73);">
248249
<div class="row"
249250
style="width: 100%; display: flex; justify-content: center; align-items: center;">
250251
<div class="col-4">
@@ -253,13 +254,13 @@ <h4> Km driven by an average car
253254
<div class="col-8">
254255
<h4> Kgs of coal burned
255256
<small>
256-
[2]
257+
<sup>[2]</sup>
257258
</small>
258259
</h4>
259260
</div>
260261
</div>
261262
</div>
262-
<span class="separator"></span>
263+
<!-- <span class="separator"></span> -->
263264
<div class="comparison-column col-xs-6 col-md-4">
264265
<div class="row"
265266
style="width: 100%; display: flex; justify-content: center; align-items: center;">
@@ -269,7 +270,7 @@ <h4> Kgs of coal burned
269270
<div class="col-8">
270271
<h4> Tree seedlings sequesting carbon for 10 years
271272
<small>
272-
[3]
273+
<sup>[3]</sup>
273274
</small>
274275
</h4>
275276
</div>

‎index.html

+7-6
Original file line numberDiff line numberDiff line change
@@ -352,14 +352,15 @@ <h3 class="pad"><span id="comparison-result-co2">0</span> kg of CO<sub>2</sub>eq
352352
<div class="col-8">
353353
<h4> Km driven by an average car
354354
<small>
355-
[1]
355+
<sup>[1]</sup>
356356
</small>
357357
</h4>
358358
</div>
359359
</div>
360360
</div>
361-
<span class="separator"></span>
362-
<div class="comparison-column col-xs-6 col-md-4">
361+
<!-- <span class="separator"></span> -->
362+
<div class="comparison-column col-xs-6 col-md-4"
363+
style="border-left: 1px solid rgb(245, 82, 73); border-right: 1px solid rgb(245, 82, 73);">
363364
<div class="row"
364365
style="width: 100%; display: flex; justify-content: center; align-items: center;">
365366
<div class="col-4">
@@ -368,13 +369,13 @@ <h4> Km driven by an average car
368369
<div class="col-8">
369370
<h4> Kgs of coal burned
370371
<small>
371-
[2]
372+
<sup>[2]</sup>
372373
</small>
373374
</h4>
374375
</div>
375376
</div>
376377
</div>
377-
<span class="separator"></span>
378+
<!-- <span class="separator"></span> -->
378379
<div class="comparison-column col-xs-6 col-md-4">
379380
<div class="row"
380381
style="width: 100%; display: flex; justify-content: center; align-items: center;">
@@ -384,7 +385,7 @@ <h4> Kgs of coal burned
384385
<div class="col-8">
385386
<h4> Tree seedlings sequesting carbon for 10 years
386387
<small>
387-
[3]
388+
<sup>[3]</sup>
388389
</small>
389390
</h4>
390391
</div>

‎js/grayscale.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ const scientificNotation = (n, d) => {
249249
} else if (power === "-2") {
250250
n_d = toDigits(n_d * 0.01, d);
251251
} else {
252-
n_d += "e" + power
252+
n_d += ` <small>x</small>10<sup>${power.replace("+", "")}</sup>`
253253
}
254254
return n_d
255255
}
@@ -272,9 +272,9 @@ const fillComparisonTable = co2 => {
272272
const kgC02SequestratedBySeedling = 0.060 * 1e3
273273
const eqForest = scientificNotation(co2 / kgC02SequestratedBySeedling, DIGITS);
274274

275-
$("#comparison-result-driven").text(eqDriven);
276-
$("#comparison-result-coal").text(eqCoal);
277-
$("#comparison-result-forest").text(eqForest);
275+
$("#comparison-result-driven").html(eqDriven);
276+
$("#comparison-result-coal").html(eqCoal);
277+
$("#comparison-result-forest").html(eqForest);
278278
}
279279

280280
const isBottomVisible = _bottomOffset => {
@@ -284,6 +284,7 @@ const isBottomVisible = _bottomOffset => {
284284

285285
const submitCompute = (_values) => {
286286
$("#result-card").hide();
287+
$("#comparison-row").hide();
287288
$("#details-content").height(0);
288289
$("#details-banner .arrow-icon").removeClass("open")
289290
$(".spinner-border").show()
@@ -307,7 +308,7 @@ const submitCompute = (_values) => {
307308
if ($(window).width() < 769 || !isBottomVisible()) {
308309
scrollToBottomResultCard()
309310
}
310-
}, getRandomInt(500, 1200)
311+
}, getRandomInt(500, 1500)
311312
)
312313
}
313314

‎js/grayscale.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scss/_compute.scss

+3-5
Original file line numberDiff line numberDiff line change
@@ -182,18 +182,18 @@
182182

183183
}
184184

185-
.result-box {}
185+
// .result-box {}
186186

187187
#result-emitted {
188-
#emitted-unit {}
188+
// #emitted-unit {}
189189

190190
#emitted-value {
191191
color: orange;
192192
}
193193
}
194194

195195
#result-offset {
196-
#offset-unit {}
196+
// #offset-unit {}
197197

198198
#offset-value {
199199
color: green
@@ -273,8 +273,6 @@
273273
small {
274274
color: rgba(0, 0, 0, .35);
275275
font-size: 0.7rem;
276-
vertical-align: text-top;
277-
278276
}
279277
}
280278
}

‎scss/grayscale.scss

+2-4
Original file line numberDiff line numberDiff line change
@@ -81,15 +81,13 @@ footer {
8181
}
8282

8383
.arrow-icon {
84-
height: 2.2em;
85-
width: 2.8em;
8684
display: block;
8785
padding: 0.5em;
8886
margin: 1em auto;
8987
position: absolute;
9088
cursor: pointer;
9189
border-radius: 4px;
92-
90+
transform: translate(-50%, 45%);
9391
}
9492

9593
@-moz-document url-prefix() {
@@ -169,4 +167,4 @@ footer {
169167
@media(max-width: 768px) {
170168
font-size: 3.5rem;
171169
}
172-
}
170+
}

0 commit comments

Comments
 (0)