Add smartphone & tablet shapes arround screenshots

front/src/css/dashboard.css

@@ -46,6 +46,14 @@
   content: "+";
   opacity: 0.85;
 }
+.summary .globalScore .screenshotWrapper.phone:hover:after {
+  top: 1.7em;
+  left: 0.64em;
+}
+.summary .globalScore .screenshotWrapper.tablet:hover:after {
+  top: 1.5em;
+  left: 0.9em;
+}
 .summary .notations {
   display: table;
   width: 80%;

front/src/css/index.css

@@ -26,11 +26,11 @@
   color: #ddd;
 }
 .device {
-  margin-top: 2em;
+  margin-top: 3em;
 }
 .device .item {
   display: inline-block;
-  margin: 0.7em 0.3em;
+  margin: 1em 0.75em;
   width: 5.5em;
   height: 5.5em;
   color: #FFF;

front/src/css/main.css

@@ -186,11 +186,20 @@ a.linkButton {
   color: #fff;
   text-decoration: none;
 }
-.screenshotWrapper.desktop {
+.screenshotWrapper {
   display: inline-block;
   position: relative;
-  border: 0.2em solid #AAA;
   background: #000;
+}
+.screenshotWrapper > div {
+  overflow: scroll;
+  position: relative;
+}
+.screenshotWrapper .screenshotImage {
+  width: 100%;
+}
+.screenshotWrapper.desktop {
+  border: 0.2em solid #AAA;
   padding: 0.5em;
   border-top-left-radius: 0.4em;
   border-top-right-radius: 0.4em;
@@ -218,11 +227,54 @@ a.linkButton {
 .screenshotWrapper.desktop > div {
   width: 12em;
   height: 6.75em;
-  overflow: scroll;
-  position: relative;
 }
-.screenshotWrapper.desktop .screenshotImage {
-  width: 100%;
+.screenshotWrapper.phone {
+  border: 0.07em solid #CCC;
+  padding: 1em 0.3em 1.5em;
+  border-radius: 0.6em;
+}
+.screenshotWrapper.phone:before {
+  position: absolute;
+  width: 0.8em;
+  height: 0.8em;
+  bottom: 0.3em;
+  left: 3.3em;
+  border: 0.07em solid #CCC;
+  border-radius: 0.5em;
+  content: " ";
+}
+.screenshotWrapper.phone:after {
+  position: absolute;
+  width: 1em;
+  height: 0.1em;
+  bottom: 13.9em;
+  left: 3.2em;
+  background: #555;
+  border-radius: 0.05em;
+  content: " ";
+}
+.screenshotWrapper.phone > div {
+  width: 6.75em;
+  height: 12em;
+}
+.screenshotWrapper.tablet {
+  border: 0.07em solid #CCC;
+  padding: 0.8em 0.5em 0.9em;
+  border-radius: 0.6em;
+}
+.screenshotWrapper.tablet:before {
+  position: absolute;
+  width: 0.5em;
+  height: 0.5em;
+  bottom: 0.15em;
+  left: 4.35em;
+  border: 0.07em solid #CCC;
+  border-radius: 0.4em;
+  content: " ";
+}
+.screenshotWrapper.tablet > div {
+  width: 8.25em;
+  height: 11em;
 }
 .star {
   font-weight: bold;

front/src/js/controllers/dashboardCtrl.js

@@ -34,7 +34,7 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$rootScope', '$routeParams
     };
 
     $scope.testAgain = function() {
-        API.launchTest($scope.result.params.url);
+        API.relaunchTest($scope.result);
     };
 
     /// When comming from a social shared link, the user needs to click on "See full report" button to display the full dashboard.

front/src/js/controllers/indexCtrl.js

@@ -8,7 +8,7 @@ indexCtrl.controller('IndexCtrl', ['$scope', 'Settings', 'API', function($scope,
     $scope.launchTest = function() {
         if ($scope.url) {
             Settings.saveSettings($scope.settings);
-            API.launchTest($scope.url);
+            API.launchTest($scope.url, $scope.settings);
         }
     };
 }]);

front/src/js/controllers/ruleCtrl.js

@@ -29,7 +29,7 @@ ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$locat
     };
 
     $scope.testAgain = function() {
-        API.launchTest($scope.result.params.url);
+        API.relaunchTest($scope.result);
     };
 
     loadResults();

front/src/js/controllers/screenshotCtrl.js

@@ -10,7 +10,6 @@ screenshotCtrl.controller('ScreenshotCtrl', ['$scope', '$rootScope', '$routePara
             Results.get({runId: $routeParams.runId}, function(result) {
                 $rootScope.loadedResult = result;
                 $scope.result = result;
-                init();
             }, function(err) {
                 $scope.error = true;
             });
@@ -24,7 +23,7 @@ screenshotCtrl.controller('ScreenshotCtrl', ['$scope', '$rootScope', '$routePara
     };
 
     $scope.testAgain = function() {
-        API.launchTest($scope.result.params.url);
+        API.relaunchTest($scope.result);
     };
 
     loadResults();

front/src/js/controllers/timelineCtrl.js

@@ -141,7 +141,7 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams',
     };
 
     $scope.testAgain = function() {
-        API.launchTest($scope.result.params.url);
+        API.relaunchTest($scope.result);
     };
 
     loadResults();

front/src/js/services/apiService.js

@@ -4,12 +4,13 @@ apiService.factory('API', ['$location', 'Runs', 'Results', function($location, R
 
     return {
 
-        launchTest: function(url) {
+        launchTest: function(url, settings) {
             Runs.save({
                 url: url,
                 waitForResponse: false,
                 screenshot: true,
-                jsTimeline: true
+                jsTimeline: true,
+                device: settings.device
             }, function(data) {
                 $location.path('/queue/' + data.runId);
             }, function(response) {
@@ -19,9 +20,11 @@ apiService.factory('API', ['$location', 'Runs', 'Results', function($location, R
                     alert('An error occured...');
                 }
             });
-        }
-
+        },
 
+        relaunchTest: function(result) {
+            this.launchTest(result.params.url, result.params.options);
+        }
     };
 
 }]);

front/src/less/dashboard.less

@@ -51,6 +51,16 @@
             opacity: 0.85;
         }
     }
+
+    .screenshotWrapper.phone:hover:after {
+        top: 1.7em;
+        left: 0.64em;
+    }
+
+    .screenshotWrapper.tablet:hover:after {
+        top: 1.5em;
+        left: 0.9em;
+    }
 }
 
 .summary .notations {

front/src/less/index.less

@@ -31,10 +31,10 @@
 }
 
 .device {
-    margin-top: 2em;
+    margin-top: 3em;
     .item {
         display: inline-block;
-        margin: 0.7em 0.3em;
+        margin: 1em 0.75em;
         width: 5.5em;
         height: 5.5em;
         color: #FFF;

front/src/less/main.less

@@ -126,11 +126,23 @@ a.linkButton {
 }
 
 
-.screenshotWrapper.desktop {
+.screenshotWrapper {
     display: inline-block;
     position: relative;
-    border: 0.2em solid #AAA;
     background: #000;
+
+    > div {
+        overflow: scroll;
+        position: relative;
+    }
+
+    .screenshotImage {
+        width: 100%;
+    }
+}
+
+.screenshotWrapper.desktop {
+    border: 0.2em solid #AAA;
     padding: 0.5em;
     border-top-left-radius: 0.4em;
     border-top-right-radius: 0.4em;
@@ -160,12 +172,61 @@ a.linkButton {
     > div {
         width: 12em;
         height: 6.75em;
-        overflow: scroll;
-        position: relative;
     }
+}
 
-    .screenshotImage {
-        width: 100%;
+.screenshotWrapper.phone {
+    border: 0.07em solid #CCC;
+    padding: 1em 0.3em 1.5em;
+    border-radius: 0.6em;
+
+    &:before {
+        position: absolute;
+        width: 0.8em;
+        height: 0.8em;
+        bottom: 0.3em;
+        left: 3.3em;
+        border: 0.07em solid #CCC;
+        border-radius: 0.5em;
+        content: " ";
+    }
+
+    &:after {
+        position: absolute;
+        width: 1em;
+        height: 0.1em;
+        bottom: 13.9em;
+        left: 3.2em;
+        background: #555;
+        border-radius: 0.05em;
+        content: " ";
+    }
+
+    > div {
+        width: 6.75em;
+        height: 12em;
+    }
+}
+
+.screenshotWrapper.tablet {
+    border: 0.07em solid #CCC;
+    padding: 0.8em 0.5em 0.9em;
+    border-radius: 0.6em;
+
+    &:before {
+        position: absolute;
+        width: 0.5em;
+        height: 0.5em;
+        bottom: 0.15em;
+        left: 4.35em;
+        border: 0.07em solid #CCC;
+        border-radius: 0.4em;
+        content: " ";
+    }
+
+    > div {
+        width: 8.25em;
+        height: 11em;
     }
 }
 

front/src/views/dashboard.html

@@ -11,7 +11,7 @@
         </div>
         <div>
             <a href="/result/{{result.runId}}/screenshot">
-                <div class="screenshotWrapper desktop">
+                <div class="screenshotWrapper" ng-class="result.params.options.device">
                     <div>
                         <img class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
                     </div>

front/src/views/screenshot.html

@@ -2,7 +2,7 @@
 <div class="screenshot board">
     <h2>Screenshot</h2>
 
-    <div class="screenshotWrapper desktop">
+    <div class="screenshotWrapper" ng-class="result.params.options.device">
         <div>
             <img class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
         </div>