Add onclick property on the rules on dashboard

front/src/css/dashboard.css

@@ -51,7 +51,7 @@ h4 {
 }
 .notations {
   display: table;
-  width: 90%;
+  width: 80%;
   margin: 0 10%;
   border-spacing: 1em;
 }
@@ -63,21 +63,25 @@ h4 {
   height: 2.5em;
   vertical-align: middle;
 }
-.notations .notation {
+.notations .category {
   font-weight: bold;
   text-align: center;
+  width: 20%;
 }
 .notations .criteria {
   font-weight: normal;
+  width: 75%;
 }
-.notations .A,
-.notations .B,
-.notations .C,
-.notations .D,
-.notations .E,
-.notations .F,
-.notations .NA {
+.notations .A.categoryScore,
+.notations .B.categoryScore,
+.notations .C.categoryScore,
+.notations .D.categoryScore,
+.notations .E.categoryScore,
+.notations .F.categoryScore,
+.notations .NA.categoryScore {
   width: 2.5em;
+  max-width: 2.5em;
+  min-width: 2.5em;
   font-size: 2em;
   text-align: center;
   border-radius: 0.5em;
@@ -95,6 +99,7 @@ h4 {
   font-size: 1em;
   color: transparent;
   margin: 0 auto;
+  border-radius: 0.5em;
 }
 .notations .A {
   /* green */
@@ -124,12 +129,18 @@ h4 {
   /* Non applicable */
   background: #CCC;
 }
-.notations .icon-eye {
-  color: #9c4274;
+.notations .criteria .table {
+  width: 100%;
+}
+.notations .criteria .table > div:hover > div {
+  background: #F1C40F;
   cursor: pointer;
 }
-.notations .criteria .table {
-  width: 75%;
+.notations .criteria .table > div:hover > div.info {
+  background: #FFF;
+}
+.notations .criteria .table > div:hover > div.info .icon-question {
+  color: #F1C40F;
 }
 .notations .criteria .grade {
   width: 10%;
@@ -141,23 +152,27 @@ h4 {
   width: 70%;
 }
 .notations .criteria .result {
-  width: 20%;
+  width: 18%;
   font-weight: bold;
   white-space: nowrap;
   text-align: center;
   vertical-align: middle;
 }
 .notations .warning .label,
-.notations .warning .result {
+.notations .warning .result,
+.notations .icon-warning {
   color: #FF1919;
 }
 .notations .criteria .info {
-  width: 10%;
+  width: 2%;
   text-align: center;
+  vertical-align: middle;
+  background: #FFF;
+  padding-left: 0.1em;
+  padding-right: 0.1em;
 }
 .notations .criteria .icon-question {
-  color: #f1c40f;
-  cursor: pointer;
+  color: transparent;
 }
 .timeline {
   margin: 2em 0 5em;
@@ -363,8 +378,9 @@ input.textFilter {
   color: #f1c40f;
   cursor: pointer;
 }
-.table .details .icon-warning {
-  cursor: pointer;
+.table .icon-warning {
+  display: inline-block;
+  width: 0.8em;
 }
 .detailsOverlay {
   position: absolute;
@@ -417,9 +433,6 @@ input.textFilter {
 .table > div > .startTime.domCreation {
   background: #ffe0cc;
 }
-.table .icon-warning {
-  color: #e74c3c;
-}
 /**** NgModal popin (have a look inside bower_components) ****/
 .ng-modal {
   position: fixed;