Improve UI on rule pages

front/src/css/rule.css

@@ -1,32 +1,33 @@
 .rule.board {
   text-align: center;
 }
-.rule h2 span {
-  font-size: 1.5em;
-}
-.rule .scoreDisplay {
+.rule .ruleTable {
   display: table;
   border-spacing: 1em;
-  margin: 0 auto;
+  width: 90%;
+  margin: 2em auto;
+  background: #f2f2f2;
+  border: 1px dashed #666;
+  border-radius: 0.5em;
 }
-.rule .scoreDisplay > div {
+.rule .ruleTable > div {
   display: table-cell;
   vertical-align: middle;
+}
+.rule .ruleTable .left {
+  width: 33%;
   font-weight: bold;
-  font-size: 1.5em;
 }
-.rule .scoreDisplay > div.score {
+.rule .ruleTable .right {
+  width: 67%;
+}
+.rule .score {
   font-size: 2.5em;
+  line-height: 2em;
   height: 2em;
   width: 2em;
   border-radius: 0.5em;
-}
-.rule h3 {
-  margin-top: 2.5em;
-}
-.rule .icon-warning {
-  font-size: 2em;
-  color: #FF1919;
+  margin: 0 auto 0.5em;
 }
 .rule .message {
   width: 80%;
@@ -35,19 +36,44 @@
 .rule .message p {
   margin: 0.5em;
 }
-.rule ul {
+.rule .message ul {
   list-style-type: none;
   padding-left: 0;
 }
-.rule li:before {
+.rule .message li:before {
   content: '\25e6';
   margin-right: 0.3em;
   font-size: 1.2em;
   position: relative;
   top: 0.1em;
 }
-.rule .offenders li {
-  font-size: 0.8em;
+.rule .warning {
+  width: 90%;
+  margin: -1em auto 2em;
+  background: #FEE;
+  border: 1px dashed #e74c3c;
+  color: #e74c3c;
+  border-radius: 0.5em;
+}
+.rule .offendersTable {
+  display: table;
+  border-spacing: 0 0.25em;
+  margin: 0 auto;
+  min-width: 10%;
+  max-width: 90%;
+}
+.rule .offendersTable > div {
+  display: table-row;
+}
+.rule .offendersTable > div > div {
+  display: table-cell;
+  background: #f2f2f2;
+  padding: 0 1em;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+.rule .offendersTable > div > div:hover {
+  background: #EBD8E2;
 }
 .rule .notFound {
   font-size: 1em;

front/src/less/rule.less

@@ -2,37 +2,34 @@
     text-align: center;
 }
 
-.rule h2 span {
-    font-size: 1.5em;
-}
-
-.rule .scoreDisplay {
+.rule .ruleTable {
     display: table;
     border-spacing: 1em;
-    margin: 0 auto;
-
+    width: 90%;
+    margin: 2em auto;
+    background: #f2f2f2;
+    border: 1px dashed #666;
+    border-radius: 0.5em;
     > div {
         display: table-cell;
         vertical-align: middle;
+    }
+    .left {
+        width: 33%;
         font-weight: bold;
-        font-size: 1.5em;
-
-        &.score {
-            font-size: 2.5em;
-            height: 2em;
-            width: 2em;
-            border-radius: 0.5em;
-        }
+    }
+    .right {
+        width: 67%;
     }
 }
 
-.rule h3 {
-    margin-top: 2.5em;
-}
-
-.rule .icon-warning {
-    font-size: 2em;
-    color: #FF1919;
+.rule .score {
+    font-size: 2.5em;
+    line-height: 2em;
+    height: 2em;
+    width: 2em;
+    border-radius: 0.5em;
+    margin: 0 auto 0.5em;
 }
 
 .rule .message {
@@ -43,11 +40,11 @@
     }
 }
 
-.rule ul {
+.rule .message ul {
     list-style-type: none;
     padding-left: 0;
 }
-.rule li:before {
+.rule .message li:before {
     content:'\25e6';
     margin-right: 0.3em;
     font-size: 1.2em;
@@ -55,8 +52,34 @@
     top: 0.1em;
 }
 
-.rule .offenders li {
-    font-size: 0.8em;
+.rule .warning {
+    width: 90%;
+    margin: -1em auto 2em;
+    background: #FEE;
+    border: 1px dashed #e74c3c;
+    color: #e74c3c;
+    border-radius: 0.5em;
+}
+
+.rule .offendersTable {
+    display: table;
+    border-spacing: 0 0.25em;
+    margin: 0 auto;
+    min-width: 10%;
+    max-width: 90%;
+    > div {
+        display: table-row;
+        > div {
+            display: table-cell;
+            background: #f2f2f2;
+            padding: 0 1em;
+            word-wrap: break-word;
+            word-break: break-all;
+            &:hover {
+                background: #EBD8E2;
+            }
+        }
+    }
 }
 
 .rule .notFound {

front/src/views/rule.html

@@ -1,33 +1,34 @@
 <div ng-include="'/front/views/resultSubHeader.html'"></div>
 <div class="rule board">
-    <div ng-if="rule">
-        <h2>Score for rule:<br><span>{{rule.policy.label}}</span></h2>
-        
-        <div class="scoreDisplay">
+    <div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>
+
+    <div ng-if="rule" class="ruleTable">
+        <div class="left">
+            <h2>{{rule.policy.label}}</h2>
             <grade score="rule.score" class="score"></grade>
             <div>{{rule.score}}/100</div>
         </div>
-        <div ng-if="rule.abnormal">
-            <h3>The page has a real problem with this rule</h3>
-            <span class="icon-warning"></span>
-            <span ng-if="rule.abnormalityScore <= -100" class="icon-warning"></span>
-            <span ng-if="rule.abnormalityScore <= -300" class="icon-warning"></span>
-            <p>(Abnormality score: {{rule.abnormalityScore}})</p>
+        <div class="right">
+            <h3>Value: {{rule.value}}</h3>
+            <div ng-bind-html="message" class="message"></div>
         </div>
-
-        <h3>Value</h3>
-        {{rule.value}}
-
-        <h3>Why this rule?</h3>
-        <div ng-bind-html="message" class="message"></div>
-
-        <div class="offenders" ng-if="rule.offenders.length > 0">
-            <h3>List of offenders</h3>
-            <ul>
-                <li ng-repeat="offender in rule.offenders track by $index">
-                    {{offender}}
-                </li>
-            </ul>
+    </div>
+    <div ng-if="rule.abnormal" class="warning">
+        <h3>Warning</h3>
+        <p>This rule reached the abnormality threshold, which means there is a real problem you should care about.</p>
+    </div>
+    <div class="offenders">
+        <h3>
+            <ng-pluralize count="rule.offenders.length || 0"
+                 when="{'0': 'No offenders',
+                        'one': '1 offender',
+                        'other': '{} offenders'}">
+            </ng-pluralize>
+        </h3>
+        <div class="offendersTable">
+            <div ng-repeat="offender in rule.offenders track by $index">
+                <div>{{offender}}</div>
+            </div>
         </div>
     </div>
     <div ng-if="!rule && rule !== null" class="notFound">