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

Display screenshot on the fashboard

Browse Source
This commit is contained in:
Gaël Métais
2015-02-05 18:49:59 +01:00
parent b5ac42792e
commit 52e73ca7cd
3 changed files with 110 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/css/dashboard.css
+45 -1
View File
@@ -5,7 +5,14 @@
text-align: center; text-align: center;
} }
.summary .globalScore { .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 { .summary .globalScore .globalGrade {
margin: 0.5 auto; margin: 0.5 auto;
@@ -22,6 +29,43 @@
font-weight: bold; font-weight: bold;
margin: 0.5em 0 1em; 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 { .summary .notations {
display: table; display: table;
width: 80%; width: 80%;
front/src/less/dashboard.less
+52 -1
View File
@@ -7,7 +7,16 @@
} }
.summary .globalScore { .summary .globalScore {
margin-bottom: 3em; display: table;
width: 60%;
margin: 3em auto;
> div {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.globalGrade { .globalGrade {
margin: 0.5 auto; margin: 0.5 auto;
width: 2.5em; width: 2.5em;
@@ -23,6 +32,48 @@
font-weight: bold; font-weight: bold;
margin: 0.5em 0 1em; 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 { .summary .notations {
front/src/views/dashboard.html
+13 -4
View File
@@ -2,10 +2,19 @@
<div class="summary board"> <div class="summary board">
<div class="globalScore" ng-if="globalScore === 0 || globalScore > 0"> <div class="globalScore" ng-if="globalScore === 0 || globalScore > 0">
<h2> Global score</h2> <div>
<div class="globalScoreDisplay"> <h2>Global score</h2>
<grade score="result.scoreProfiles.generic.globalScore" class="globalGrade"></grade> <div class="globalScoreDisplay">
<div class="on100">{{globalScore}}/100</div> <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>
</div> </div>