From 65b1c34d06076588b6f1341051824284d5969e7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= <gael.metais@gmail.com>
Date: Mon, 27 Apr 2015 18:45:08 +0200
Subject: [PATCH] Add smartphone & tablet shapes arround screenshots

---
 front/src/css/dashboard.css                |  8 +++
 front/src/css/index.css                    |  4 +-
 front/src/css/main.css                     | 64 +++++++++++++++++--
 front/src/js/controllers/dashboardCtrl.js  |  2 +-
 front/src/js/controllers/indexCtrl.js      |  2 +-
 front/src/js/controllers/ruleCtrl.js       |  2 +-
 front/src/js/controllers/screenshotCtrl.js |  3 +-
 front/src/js/controllers/timelineCtrl.js   |  2 +-
 front/src/js/services/apiService.js        | 11 ++--
 front/src/less/dashboard.less              | 10 +++
 front/src/less/index.less                  |  4 +-
 front/src/less/main.less                   | 73 ++++++++++++++++++++--
 front/src/views/dashboard.html             |  2 +-
 front/src/views/screenshot.html            |  2 +-
 14 files changed, 161 insertions(+), 28 deletions(-)

diff --git a/front/src/css/dashboard.css b/front/src/css/dashboard.css
index 41e9467..ca1c26f 100644
--- a/front/src/css/dashboard.css
+++ b/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%;
diff --git a/front/src/css/index.css b/front/src/css/index.css
index 88651ee..3548240 100644
--- a/front/src/css/index.css
+++ b/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;
diff --git a/front/src/css/main.css b/front/src/css/main.css
index 46ef10a..1414359 100644
--- a/front/src/css/main.css
+++ b/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;
diff --git a/front/src/js/controllers/dashboardCtrl.js b/front/src/js/controllers/dashboardCtrl.js
index e688634..a07d1e6 100644
--- a/front/src/js/controllers/dashboardCtrl.js
+++ b/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.
diff --git a/front/src/js/controllers/indexCtrl.js b/front/src/js/controllers/indexCtrl.js
index 24b48bc..230bac7 100644
--- a/front/src/js/controllers/indexCtrl.js
+++ b/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);
         }
     };
 }]);
\ No newline at end of file
diff --git a/front/src/js/controllers/ruleCtrl.js b/front/src/js/controllers/ruleCtrl.js
index d5aec07..12d97bc 100644
--- a/front/src/js/controllers/ruleCtrl.js
+++ b/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();
diff --git a/front/src/js/controllers/screenshotCtrl.js b/front/src/js/controllers/screenshotCtrl.js
index 1120d9c..0d2b60d 100644
--- a/front/src/js/controllers/screenshotCtrl.js
+++ b/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();
diff --git a/front/src/js/controllers/timelineCtrl.js b/front/src/js/controllers/timelineCtrl.js
index 8f0e83d..799da5a 100644
--- a/front/src/js/controllers/timelineCtrl.js
+++ b/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();
diff --git a/front/src/js/services/apiService.js b/front/src/js/services/apiService.js
index 28b4db1..4aa145f 100644
--- a/front/src/js/services/apiService.js
+++ b/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);
         }
-
-
     };
 
 }]);
\ No newline at end of file
diff --git a/front/src/less/dashboard.less b/front/src/less/dashboard.less
index 379babd..1eeaaa5 100644
--- a/front/src/less/dashboard.less
+++ b/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 {
diff --git a/front/src/less/index.less b/front/src/less/index.less
index 40b944a..553b4e5 100644
--- a/front/src/less/index.less
+++ b/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;
diff --git a/front/src/less/main.less b/front/src/less/main.less
index 78773fa..135a7b0 100644
--- a/front/src/less/main.less
+++ b/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;
+    }
+}
+
+.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: " ";
     }
 
-    .screenshotImage {
-        width: 100%;
+    &: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;
     }
 }
 
diff --git a/front/src/views/dashboard.html b/front/src/views/dashboard.html
index bfa7d8d..cdd8a7f 100644
--- a/front/src/views/dashboard.html
+++ b/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>
diff --git a/front/src/views/screenshot.html b/front/src/views/screenshot.html
index 558846b..31a4b67 100644
--- a/front/src/views/screenshot.html
+++ b/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>