Skip to content

Commit 2fb2fe4

Browse files
author
DanielRyanSmith
committed
add color to interop totals in mobile sections
1 parent 03b8367 commit 2fb2fe4

File tree

3 files changed

+89
-73
lines changed

3 files changed

+89
-73
lines changed

‎webapp/components/interop-dashboard.js

Lines changed: 78 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -286,12 +286,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
286286
display: none;
287287
}
288288
289-
@media only screen and (max-width: 800px) {
289+
@media only screen and (max-width: 768px) {
290290
.grid-container {
291291
margin: 0 1em;
292292
}
293-
294-
/* --- RESPONSIVE TABLE STYLES --- */
295293
.table-title-mobile {
296294
display: block;
297295
}
@@ -327,7 +325,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
327325
border-radius: 5px;
328326
margin-bottom: 1em;
329327
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
330-
overflow: hidden; /* To contain the floated pseudo-elements */
328+
overflow: hidden;
331329
}
332330
.score-table .subtotal-row,
333331
.score-table tfoot tr {
@@ -342,7 +340,6 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
342340
line-height: 1.5;
343341
}
344342
.score-table td[data-label="Interop"] {
345-
/* Hide the separate Interop row in our new layout */
346343
display: none;
347344
}
348345
.score-table td:last-child {
@@ -353,7 +350,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
353350
font-weight: bold;
354351
background-color: hsl(0 0% 0% / 5%);
355352
border-bottom: 1px solid #ddd;
356-
padding: 0; /* Padding is now on the inner element */
353+
padding: 0;
357354
}
358355
.score-table td:first-child .card-header-mobile {
359356
padding: 0.75em;
@@ -375,7 +372,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
375372
content: "Progress";
376373
}
377374
}
378-
@media only screen and (min-width: 801px) {
375+
@media only screen and (min-width: 769px) {
379376
.score-table tbody > tr:nth-child(odd) {
380377
background: hsl(0 0% 0% / 5%);
381378
}
@@ -545,7 +542,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
545542
<td>
546543
<div class="card-header-mobile">
547544
<a href$="[[getTestsURL(rowName, stable)]]">[[getRowInfo(rowName, 'description')]]</a>
548-
<span class="interop-score-mobile">[[getInteropScoreForFeature(rowName, stable)]]</span>
545+
<span
546+
class="interop-score-mobile"
547+
style$="[[getScoreStyle(rowName, stable)]]"
548+
>[[getInteropScoreForFeature(rowName, stable)]]</span>
549549
</div>
550550
</td>
551551
<template is="dom-repeat" items="{{getYearProp('browserInfo')}}" as="browserInfo">
@@ -563,7 +563,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
563563
<td>
564564
<div class="card-header-mobile">
565565
<strong>TOTAL</strong>
566-
<span class="interop-score-mobile">[[getInteropSubtotalScore(section, stable)]]</span>
566+
<span
567+
class="interop-score-mobile"
568+
style$="[[getSubtotalScoreStyle(section, stable)]]"
569+
>[[getInteropSubtotalScore(section, stable)]]</span>
567570
</div>
568571
</td>
569572
<template is="dom-repeat" items="{{getYearProp('browserInfo')}}" as="browserInfo">
@@ -659,10 +662,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
659662
return {
660663
year: String,
661664
embedded: Boolean,
662-
stable: {
663-
type: Boolean,
664-
observer: '_stableChanged',
665-
},
665+
stable: Boolean,
666666
feature: String,
667667
features: {
668668
type: Array,
@@ -768,33 +768,51 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
768768
afterNextRender(this, this.addSortEvents);
769769
}
770770

771-
_stableChanged() {
772-
this.updateSummaryScores();
773-
}
771+
calculateColor(score) {
772+
const gradient = [
773+
// Red.
774+
{ scale: 0, color: [250, 0, 0] },
775+
// Orange.
776+
{ scale: 33.33, color: [250, 125, 0] },
777+
// Yellow.
778+
{ scale: 66.67, color: [220, 220, 0] },
779+
// Green.
780+
{ scale: 100, color: [0, 160, 0] },
781+
];
774782

775-
async updateSummaryScores() {
776-
const scoreElements = this.shadowRoot.querySelectorAll('.interop-score-mobile');
777-
const scores = this.stable ? this.scores.stable : this.scores.experimental;
778-
const summaryFeatureName = this.dataManager.getYearProp('summaryFeatureName');
779-
console.log(this.scores);
780-
// If the elements have not rendered yet, don't update the scores.
781-
if ((!this.isMobileScoresView && scoreElements.length !== scores.length) ||
782-
(this.isMobileScoresView && scoreElements.length !== scores.length + 1)) {
783-
return;
783+
let color1, color2;
784+
for (let i = 1; i < gradient.length; i++) {
785+
if (score <= gradient[i].scale) {
786+
color1 = gradient[i - 1];
787+
color2 = gradient[i];
788+
break;
789+
}
784790
}
785-
// // Update interop summary number first.
786-
// this.updateSummaryScore(scoreElements[0], scores[scores.length - 1][summaryFeatureName]);
787-
// // Update the rest of the browser scores.
788-
// for (let i = 1; i < scores.length; i++) {
789-
// this.updateSummaryScore(scoreElements[i], scores[i - 1][summaryFeatureName]);
790-
// }
791-
792-
// // Update investigation summary separately.
793-
// if (this.shouldDisplayInvestigationNumber()) {
794-
// const investigationNumber = this.shadowRoot.querySelector('#investigationNumber');
795-
// this.updateSummaryScore(
796-
// investigationNumber, this.dataManager.getYearProp('investigationTotalScore'));
797-
// }
791+
const colorWeight = ((score - color1.scale) / (color2.scale - color1.scale));
792+
const color = [
793+
Math.round(color1.color[0] * (1 - colorWeight) + color2.color[0] * colorWeight),
794+
Math.round(color1.color[1] * (1 - colorWeight) + color2.color[1] * colorWeight),
795+
Math.round(color1.color[2] * (1 - colorWeight) + color2.color[2] * colorWeight),
796+
];
797+
798+
return [
799+
`rgb(${color[0]}, ${color[1]}, ${color[2]})`,
800+
`rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.15)`,
801+
];
802+
}
803+
804+
getSubtotalScoreStyle(section, stable) {
805+
const interopIndex = this.dataManager.getYearProp('numBrowsers');
806+
const score = this.getNumericalSubtotalScore(interopIndex, section, stable);
807+
const colors = this.calculateColor(score);
808+
return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
809+
}
810+
811+
getScoreStyle(feature, stable) {
812+
const interopIndex = this.dataManager.getYearProp('numBrowsers');
813+
const score = this.getNumericalBrowserScoreByFeature(interopIndex, feature, stable);
814+
const colors = this.calculateColor(score);
815+
return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
798816
}
799817

800818
// Add the on-click handlers for sorting by a specific table header.
@@ -897,23 +915,27 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
897915
return `${(total / 10).toFixed(1)}%`;
898916
}
899917

900-
getSubtotalScore(browserIndex, section, stable) {
918+
getNumericalSubtotalScore(browserIndex, section, stable) {
901919
const scores = stable ? this.scores.stable : this.scores.experimental;
902920
const totalScore = section.rows.reduce((sum, rowName) => {
903921
return sum + scores[browserIndex][rowName];
904922
}, 0);
905923
const avg = Math.floor(totalScore / section.rows.length) / 10;
924+
return avg;
925+
}
926+
927+
getSubtotalScore(browserIndex, section, stable) {
928+
const score = this.getNumericalSubtotalScore(browserIndex, section, stable);
906929
// Don't display decimal places for a 100% score.
907-
if (avg >= 100) {
930+
if (score >= 100) {
908931
return '100%';
909932
}
910-
return `${avg.toFixed(1)}%`;
933+
return `${score.toFixed(1)}%`;
911934
}
912935

913936
getInteropSubtotalScore(section, isStable) {
914937
const numBrowsers = this.getYearProp('numBrowsers');
915-
const score = this.getSubtotalScore(numBrowsers, section, isStable);
916-
return score;
938+
return this.getSubtotalScore(numBrowsers, section, isStable);
917939
}
918940

919941
getSummaryOptionText() {
@@ -932,8 +954,8 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
932954
return !scoreAsGroup && !this.showBrowserIcons(index);
933955
}
934956

935-
getBrowserScoreForFeature(browserIndex, feature) {
936-
const scores = this.stable ? this.scores.stable : this.scores.experimental;
957+
getBrowserScoreForFeature(browserIndex, feature, stable) {
958+
const scores = stable ? this.scores.stable : this.scores.experimental;
937959
const score = scores[browserIndex][feature];
938960
// Don't display decimal places for a 100% score.
939961
if (score / 10 >= 100) {
@@ -942,15 +964,15 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
942964
return `${(score / 10).toFixed(1)}%`;
943965
}
944966

945-
getInteropScoreForFeature(feature, isStable) {
967+
getInteropScoreForFeature(feature, stable) {
946968
const numBrowsers = this.getYearProp('numBrowsers');
947-
return this.getBrowserScoreForFeature(numBrowsers, feature, isStable);
969+
return this.getBrowserScoreForFeature(numBrowsers, feature, stable);
948970
}
949971

950972
// getNumericalBrowserScoreByFeature returns the same score as
951973
// getBrowserScoreForFeature but as a number instead of a string
952-
getNumericalBrowserScoreByFeature(browserIndex, feature) {
953-
const scores = this.stable ? this.scores.stable : this.scores.experimental;
974+
getNumericalBrowserScoreByFeature(browserIndex, feature, stable) {
975+
const scores = stable ? this.scores.stable : this.scores.experimental;
954976
const score = scores[browserIndex][feature];
955977
const roundedScore = Math.round(score * 100) / 100;
956978
return roundedScore / 10;
@@ -974,9 +996,9 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
974996
}
975997

976998
const summaryFeatureName = this.getYearProp('summaryFeatureName');
977-
this.totalChromium = this.getBrowserScoreForFeature(0, summaryFeatureName);
978-
this.totalFirefox = this.getBrowserScoreForFeature(1, summaryFeatureName);
979-
this.totalSafari = this.getBrowserScoreForFeature(2, summaryFeatureName);
999+
this.totalChromium = this.getBrowserScoreForFeature(0, summaryFeatureName, this.stable);
1000+
this.totalFirefox = this.getBrowserScoreForFeature(1, summaryFeatureName, this.stable);
1001+
this.totalSafari = this.getBrowserScoreForFeature(2, summaryFeatureName, this.stable);
9801002
}
9811003

9821004
updateUrlParams(embedded, stable, feature, isMobileScoresView) {
@@ -1141,7 +1163,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
11411163
const individualScores = [];
11421164
for (let i = 0; i < rows.length; i++) {
11431165
const feature = rows[i];
1144-
individualScores[i] = [feature, this.getNumericalBrowserScoreByFeature(browserIndex, feature)];
1166+
individualScores[i] = [
1167+
feature,
1168+
this.getNumericalBrowserScoreByFeature(browserIndex, feature, this.stable)
1169+
];
11451170
}
11461171
individualScores.sort((a, b) => a[1] - b[1]);
11471172
for (let i = 0; i < individualScores.length; i++) {

‎webapp/components/interop-summary.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,30 +93,25 @@ class InteropSummary extends PolymerElement {
9393
display: none;
9494
}
9595
96-
/* Media Query for Mobile Devices */
9796
@media (max-width: 768px) {
9897
.summary-container {
9998
min-height: 340px;
10099
}
101-
102100
.summary-number {
103101
font-size: 2em;
104102
width: 2.5ch;
105103
height: 2.5ch;
106104
padding: 5px;
107105
}
108-
109106
#totalSummaryRow > .summary-flex-item > .summary-number {
110107
font-size: 4em;
111108
width: 2.5ch;
112109
height: 2.5ch;
113110
padding: 4px;
114111
}
115-
116112
.browser-score {
117113
font-size: 2em;
118114
}
119-
120115
.summary-browser-name > figure > figcaption {
121116
line-height: 1.1;
122117
margin: 0 -10px;
@@ -239,7 +234,7 @@ class InteropSummary extends PolymerElement {
239234
}
240235

241236
const summaryDiv = this.shadowRoot.querySelector('.summary-container');
242-
if (window.innerWidth > 768) {
237+
if (window.innerWidth > 800) {
243238
summaryDiv.style.minHeight = SUMMARY_CONTAINER_MIN_HEIGHTS[this.year] || '470px';
244239
}
245240
// Don't display the interop score for Interop 2021.

‎webapp/components/wpt-header.js

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ class WPTHeader extends WPTFlags(PolymerElement) {
5555
justify-content: space-between;
5656
}
5757
.mobile-title {
58-
display: none; /* Shown on desktop via media query */
58+
display: none;
5959
}
6060
.logo-area > a {
6161
align-items: center;
@@ -67,11 +67,11 @@ class WPTHeader extends WPTFlags(PolymerElement) {
6767
vertical-align: middle;
6868
}
6969
.login-area {
70-
display: none; /* Shown on desktop via media query */
70+
display: none;
7171
}
7272
7373
.menu-button {
74-
display: none; /* Hidden on desktop */
74+
display: none;
7575
flex-direction: column;
7676
justify-content: space-around;
7777
width: 30px;
@@ -80,7 +80,7 @@ class WPTHeader extends WPTFlags(PolymerElement) {
8080
border: none;
8181
cursor: pointer;
8282
padding: 0;
83-
z-index: 1001; /* Above the nav panel */
83+
z-index: 3;
8484
}
8585
.menu-button span {
8686
display: block;
@@ -100,11 +100,10 @@ class WPTHeader extends WPTFlags(PolymerElement) {
100100
.menu-button.open span:nth-of-type(3) {
101101
transform: rotate(-45deg) translate(7px, -7px);
102102
}
103+
103104
header nav a {
104105
margin-right: 1em;
105106
}
106-
107-
/* Navigation Links */
108107
.nav-links {
109108
display: flex;
110109
align-items: center;
@@ -118,7 +117,6 @@ class WPTHeader extends WPTFlags(PolymerElement) {
118117
margin-right: 0;
119118
}
120119
121-
/* Mobile Styles */
122120
@media (max-width: 768px) {
123121
header h1 {
124122
margin-bottom: 0;
@@ -136,7 +134,7 @@ class WPTHeader extends WPTFlags(PolymerElement) {
136134
display: flex;
137135
}
138136
.menu-button {
139-
display: flex; /* Show button on mobile */
137+
display: flex;
140138
}
141139
.nav-links {
142140
display: flex;
@@ -153,8 +151,6 @@ class WPTHeader extends WPTFlags(PolymerElement) {
153151
max-width: 300px;
154152
padding-top: 6em;
155153
box-shadow: -2px 0 8px rgba(0,0,0,0.1);
156-
157-
/* Hidden by default, slides in */
158154
transform: translateX(100%);
159155
transition: transform 0.3s ease-in-out;
160156
}
@@ -168,16 +164,14 @@ class WPTHeader extends WPTFlags(PolymerElement) {
168164
padding: 0.5em 0;
169165
margin: 0;
170166
}
171-
/* Hide the main nav container, but not the links inside the panel */
172167
nav {
173168
display: none;
174169
}
175170
}
176171
177-
/* Desktop Styles */
178172
@media (min-width: 769px) {
179173
.login-area {
180-
display: block; /* Show login on desktop */
174+
display: block;
181175
}
182176
183177
#mobile-navigation {
@@ -195,7 +189,9 @@ class WPTHeader extends WPTFlags(PolymerElement) {
195189
<h1>
196190
</div>
197191
<template is="dom-if" if="[[githubLogin]]">
198-
<github-login user="[[user]]" is-triage-mode="[[isTriageMode]]"></github-login>
192+
<div id="desktop-login">
193+
<github-login user="[[user]]" is-triage-mode="[[isTriageMode]]"></github-login>
194+
</div>
199195
</template>
200196
<button
201197
class$="[[_computeMenuButtonClass(_isMenuOpen)]]"

0 commit comments

Comments
 (0)