fix(server): use open triangle for fail

GoogleChrome · Oct 2, 2019 · 48a30ef · 48a30ef
1 parent 6eaf47d
commit 48a30ef
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 13 deletions.
diff --git a/packages/server/src/ui/components/score-icon.jsx b/packages/server/src/ui/components/score-icon.jsx
@@ -6,12 +6,18 @@
 
 import {h} from 'preact';
 
-/** @param {{audit: LH.AuditResult}} props */
+/** @param {{score: number}} props */
 export const ScoreIcon = props => {
-  const score = props.audit.score || 0;
+  const score = props.score;
   if (score >= 0.9) return <i className="lh-score-pass" />;
   if (score >= 0.5) return <i className="lh-score-average" />;
-  return <i className="lh-score-fail" />;
+  return (
+    <i className="lh-score-fail">
+      <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="10,110 60,10 110,110" />
+      </svg>
+    </i>
+  );
 };
 
 /** @param {{audit: LH.AuditResult}} props */

diff --git a/packages/server/src/ui/icons.css b/packages/server/src/ui/icons.css
@@ -5,13 +5,16 @@
  */
 
 i.lh-score-fail {
-  position: relative;
   display: block;
-  width: 0;
-  height: 0;
-  border-left: calc(var(--base-icon-size) / 2) solid transparent;
-  border-right: calc(var(--base-icon-size) / 2) solid transparent;
-  border-bottom: var(--base-icon-size) solid var(--fail-color);
+  width: var(--base-icon-size);
+  height: var(--base-icon-size);
+}
+
+i.lh-score-fail polygon {
+  /* the SVG is on a 120x120 viewBox, so scale up the strokeWidth */
+  stroke: var(--fail-color);
+  stroke-width: 15px;
+  fill: none;
 }
 
 i.lh-score-average {

diff --git a/packages/server/src/ui/routes/build-view/audit-list/audit-group.css b/packages/server/src/ui/routes/build-view/audit-list/audit-group.css
@@ -31,6 +31,10 @@
 .audit-group__audit-title {
   margin-left: var(--base-spacing);
   font-weight: var(--medium-font-weight);
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .audit-group__audit-diff {

diff --git a/packages/server/src/ui/routes/build-view/audit-list/audit-group.jsx b/packages/server/src/ui/routes/build-view/audit-list/audit-group.jsx
@@ -31,7 +31,7 @@ export const AuditGroup = props => {
               onClick={() => props.setSelectedAuditId(audit.id || null)}
             >
               <div className="audit-group__audit-score">
-                <ScoreIcon audit={audit} />
+                <ScoreIcon score={audit.score || 0} />
               </div>
               <div className="audit-group__audit-title">{audit.title}</div>
               <div className="audit-group__audit-diff">

diff --git a/packages/server/src/ui/routes/build-view/build-view-legend.jsx b/packages/server/src/ui/routes/build-view/build-view-legend.jsx
@@ -6,15 +6,16 @@
 
 import {h} from 'preact';
 import './build-view-legend.css';
+import {ScoreIcon} from '../../components/score-icon';
 
 export const BuildViewLegend = () => {
   return (
     <div className="build-view__legend">
-      <i className="lh-score-fail" />
+      <ScoreIcon score={0} />
       <span className="build-view-legend__label">0-49</span>
-      <i className="lh-score-average" />
+      <ScoreIcon score={0.5} />
       <span className="build-view-legend__label">50-89</span>
-      <i className="lh-score-pass" />
+      <ScoreIcon score={1} />
       <span className="build-view-legend__label">90-100</span>
       <i className="build-view-legend__chip build-view-legend__chip--regression" />
       <span className="build-view-legend__label">Regression</span>