Display screenshot on the fashboard

front/src/css/dashboard.css

@@ -5,7 +5,14 @@
   text-align: center;
 }
 .summary .globalScore {
-  margin-bottom: 3em;
+  display: table;
+  width: 60%;
+  margin: 3em auto;
+}
+.summary .globalScore > div {
+  display: table-cell;
+  width: 50%;
+  vertical-align: middle;
 }
 .summary .globalScore .globalGrade {
   margin: 0.5 auto;
@@ -22,6 +29,43 @@
   font-weight: bold;
   margin: 0.5em 0 1em;
 }
+.summary .globalScore .screenshotWrapper.desktop {
+  display: inline-block;
+  position: relative;
+  border: 0.2em solid #AAA;
+  background: #000;
+  padding: 0.5em;
+  border-top-left-radius: 0.4em;
+  border-top-right-radius: 0.4em;
+}
+.summary .globalScore .screenshotWrapper.desktop:before {
+  position: absolute;
+  width: 15em;
+  height: 0.6em;
+  bottom: -0.75em;
+  left: -1em;
+  background: #CCC;
+  border-bottom-left-radius: 0.2em;
+  border-bottom-right-radius: 0.2em;
+  content: " ";
+}
+.summary .globalScore .screenshotWrapper.desktop:after {
+  position: absolute;
+  width: 0.4em;
+  height: 0.2em;
+  bottom: -0.55em;
+  left: 12.5em;
+  background: lime;
+  content: " ";
+}
+.summary .globalScore .screenshotWrapper.desktop > div {
+  width: 12em;
+  height: 6.75em;
+  overflow: scroll;
+}
+.summary .globalScore .screenshot {
+  width: 100%;
+}
 .summary .notations {
   display: table;
   width: 80%;

front/src/less/dashboard.less

@@ -7,7 +7,16 @@
 }
 
 .summary .globalScore {
-    margin-bottom: 3em;
+    display: table;
+    width: 60%;
+    margin: 3em auto;
+
+    > div {
+        display: table-cell;
+        width: 50%;
+        vertical-align: middle;
+    }
+
     .globalGrade {
         margin: 0.5 auto;
         width: 2.5em;
@@ -23,6 +32,48 @@
         font-weight: bold;
         margin: 0.5em 0 1em;
     }
+
+    .screenshotWrapper.desktop {
+        display: inline-block;
+        position: relative;
+        border: 0.2em solid #AAA;
+        background: #000;
+        padding: 0.5em;
+        border-top-left-radius: 0.4em;
+        border-top-right-radius: 0.4em;
+
+        &:before {
+            position: absolute;
+            width: 15em;
+            height: 0.6em;
+            bottom: -0.75em;
+            left: -1em;
+            background: #CCC;
+            border-bottom-left-radius: 0.2em;
+            border-bottom-right-radius: 0.2em;
+            content: " ";
+        }
+
+        &:after {
+            position: absolute;
+            width: 0.4em;
+            height: 0.2em;
+            bottom: -0.55em;
+            left: 12.5em;
+            background: lime;
+            content: " ";
+        }
+
+        > div {
+            width: 12em;
+            height: 6.75em;
+            overflow: scroll;
+        }
+    }
+
+    .screenshot {
+        width: 100%;
+    }
 }
 
 .summary .notations {

front/src/views/dashboard.html

@@ -2,10 +2,19 @@
 <div class="summary board">
     
     <div class="globalScore" ng-if="globalScore === 0 || globalScore > 0">
-        <h2> Global score</h2>
-        <div class="globalScoreDisplay">
-            <grade score="result.scoreProfiles.generic.globalScore" class="globalGrade"></grade>
-            <div class="on100">{{globalScore}}/100</div>
+        <div>
+            <h2>Global score</h2>
+            <div class="globalScoreDisplay">
+                <grade score="result.scoreProfiles.generic.globalScore" class="globalGrade"></grade>
+                <div class="on100">{{globalScore}}/100</div>
+            </div>
+        </div>
+        <div>
+            <div class="screenshotWrapper desktop">
+                <div>
+                    <img class="screenshot" ng-src="{{result.screenshotUrl}}"/>
+                </div>
+            </div>
         </div>
     </div>