Add a screenshot page
This commit is contained in:
Gaël Métais
@@ -29,43 +29,6 @@
|
||||
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%;
|
||||
|
||||
@@ -113,6 +113,43 @@ h1 span {
|
||||
margin-top: 4em;
|
||||
color: black;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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: " ";
|
||||
}
|
||||
.screenshotWrapper.desktop:after {
|
||||
position: absolute;
|
||||
width: 0.4em;
|
||||
height: 0.2em;
|
||||
bottom: -0.55em;
|
||||
left: 12.5em;
|
||||
background: lime;
|
||||
content: " ";
|
||||
}
|
||||
.screenshotWrapper.desktop > div {
|
||||
width: 12em;
|
||||
height: 6.75em;
|
||||
overflow: scroll;
|
||||
}
|
||||
.screenshotWrapper.desktop .screenshotImage {
|
||||
width: 100%;
|
||||
}
|
||||
.star {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
.screenshot.board {
|
||||
text-align: center;
|
||||
}
|
||||
.screenshot .screenshotWrapper {
|
||||
font-size: 2.08333333333333em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
@@ -6,6 +6,7 @@ var yltApp = angular.module('YellowLabTools', [
|
||||
'dashboardCtrl',
|
||||
'queueCtrl',
|
||||
'ruleCtrl',
|
||||
'screenshotCtrl',
|
||||
'timelineCtrl',
|
||||
'runsFactory',
|
||||
'resultsFactory',
|
||||
@@ -46,6 +47,10 @@ yltApp.config(['$routeProvider', '$locationProvider',
|
||||
templateUrl: 'views/timeline.html',
|
||||
controller: 'TimelineCtrl'
|
||||
}).
|
||||
when('/result/:runId/screenshot', {
|
||||
templateUrl: 'views/screenshot.html',
|
||||
controller: 'ScreenshotCtrl'
|
||||
}).
|
||||
when('/result/:runId/rule/:policy', {
|
||||
templateUrl: 'views/rule.html',
|
||||
controller: 'RuleCtrl'
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
var screenshotCtrl = angular.module('screenshotCtrl', ['resultsFactory', 'menuService']);
|
||||
|
||||
screenshotCtrl.controller('ScreenshotCtrl', ['$scope', '$rootScope', '$routeParams', '$location', 'Results', 'Runs', 'Menu', function($scope, $rootScope, $routeParams, $location, Results, Runs, Menu) {
|
||||
$scope.runId = $routeParams.runId;
|
||||
$scope.Menu = Menu.setCurrentPage(null, $scope.runId);
|
||||
|
||||
function loadResults() {
|
||||
// Load result if needed
|
||||
if (!$rootScope.loadedResult || $rootScope.loadedResult.runId !== $routeParams.runId) {
|
||||
Results.get({runId: $routeParams.runId}, function(result) {
|
||||
$rootScope.loadedResult = result;
|
||||
$scope.result = result;
|
||||
init();
|
||||
}, function(err) {
|
||||
$scope.error = true;
|
||||
});
|
||||
} else {
|
||||
$scope.result = $rootScope.loadedResult;
|
||||
init();
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
|
||||
}
|
||||
|
||||
$scope.testAgain = function() {
|
||||
Runs.save({
|
||||
url: $scope.result.params.url,
|
||||
waitForResponse: false,
|
||||
screenshot: true
|
||||
}, function(data) {
|
||||
$location.path('/queue/' + data.runId);
|
||||
});
|
||||
};
|
||||
|
||||
loadResults();
|
||||
}]);
|
||||
@@ -32,48 +32,6 @@
|
||||
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 {
|
||||
|
||||
@@ -113,6 +113,49 @@ h1 span {
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.screenshotImage {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.star {
|
||||
font-weight: bold;
|
||||
span {
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
.screenshot.board {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.screenshot .screenshotWrapper {
|
||||
font-size: 2.08333333333333em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
@@ -12,6 +12,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="/css/dashboard.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/queue.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/rule.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/screenshot.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/timeline.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/about.css">
|
||||
<!-- endbuild -->
|
||||
@@ -27,6 +28,7 @@
|
||||
<script src="/js/controllers/dashboardCtrl.js"></script>
|
||||
<script src="/js/controllers/queueCtrl.js"></script>
|
||||
<script src="/js/controllers/ruleCtrl.js"></script>
|
||||
<script src="/js/controllers/screenshotCtrl.js"></script>
|
||||
<script src="/js/controllers/timelineCtrl.js"></script>
|
||||
<script src="/js/models/resultsFactory.js"></script>
|
||||
<script src="/js/models/runsFactory.js"></script>
|
||||
|
||||
@@ -10,11 +10,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="screenshotWrapper desktop">
|
||||
<div>
|
||||
<img class="screenshot" ng-src="{{result.screenshotUrl}}"/>
|
||||
<a href="/result/{{result.runId}}/screenshot">
|
||||
<div class="screenshotWrapper desktop">
|
||||
<div>
|
||||
<img class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<div ng-include="'views/resultSubHeader.html'"></div>
|
||||
<div class="screenshot board">
|
||||
<h2>Screenshot</h2>
|
||||
|
||||
<div class="screenshotWrapper desktop">
|
||||
<div>
|
||||
<img class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>(scroll on the screenshot to see under the fold)</p>
|
||||
|
||||
<div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>
|
||||
</div>
|
||||
@@ -96,7 +96,7 @@ var screenshotHandler = function() {
|
||||
this.toBuffer = function(image) {
|
||||
var deferred = Q.defer();
|
||||
|
||||
image.toBuffer('jpg', {quality: 85}, function(err, buffer){
|
||||
image.toBuffer('jpg', {quality: 90}, function(err, buffer){
|
||||
if (err) {
|
||||
debug('Could not save image to buffer');
|
||||
debug(err);
|
||||
|
||||
@@ -7,7 +7,7 @@ var FrontController = function(app) {
|
||||
var cacheDuration = 365 * 24 * 60 * 60 * 1000; // One year
|
||||
var assetsPath = (app.get('env') === 'development') ? '../../../front/src' : '../../../front/build';
|
||||
|
||||
var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/rule/:policy', '/queue/:runId'];
|
||||
var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/screenshot', '/result/:runId/rule/:policy', '/queue/:runId'];
|
||||
routes.forEach(function(route) {
|
||||
app.get(route, function(req, res) {
|
||||
res.setHeader('Cache-Control', 'public, max-age=20');
|
||||
|
||||
Reference in New Issue
Block a user