WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add smartphone & tablet shapes arround screenshots

Browse Source
This commit is contained in:
Gaël Métais
2015-04-27 18:45:08 +02:00
parent 67615719ae
commit 65b1c34d06
14 changed files with 161 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/css/dashboard.css
+8
View File
@@ -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
+2 -2
View File
@@ -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
+58 -6
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -2
View File
@@ -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
+1 -1
View File
@@ -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
+7 -4
View File
@@ -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
+10
View File
@@ -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
+2 -2
View File
@@ -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
+67 -6
View File
@@ -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;
}
}
front/src/views/dashboard.html
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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>