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

Show offenders buttons on the summary page

Browse Source
This commit is contained in:
Gaël Métais
2014-09-20 00:02:19 +02:00
parent 564884ca08
commit 46fb4188f0
13 changed files with 271 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3 -1
View File
@@ -2,4 +2,6 @@ node_modules
bower_components
.vagrant
results/*
coverage
coverage
har.json
app/node_views/results.html
+80 -42
View File
@@ -6,9 +6,10 @@
<link rel="stylesheet" type="text/css" href="/public/styles/main.css">
<link rel="stylesheet" type="text/css" href="/public/styles/results.css">
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/ngModal/dist/ng-modal.min.js"></script>
<script src="/public/scripts/app.js"></script>
<script src="/public/scripts/resultsCtrl.js"></script>
<script src="/public/scripts/filters.js"></script>
<script src="/public/scripts/showOffenders.js"></script>
</head>
<body ng-app="YellowLabTools" ng-controller="ResultsCtrl">
<h1>Yellow Lab <span class="icon-lab"></span> Tools</h1>
@@ -45,16 +46,18 @@
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.DOMelementsCount">
DOM elements count: {{phantomasResults.metrics.DOMelementsCount}}
DOM elements count: <b>{{phantomasResults.metrics.DOMelementsCount}}</b>
</li>
<li ng-if="phantomasResults.metrics.DOMelementMaxDepth">
DOM max depth: {{phantomasResults.metrics.DOMelementMaxDepth}}
DOM max depth: <b>{{phantomasResults.metrics.DOMelementMaxDepth}}</b>
<show-offenders modal-title="DOM max depth" metric-name="DOMelementMaxDepth" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.iframesCount">
Number of iframes: {{phantomasResults.metrics.iframesCount}}
Number of iframes: <b>{{phantomasResults.metrics.iframesCount}}</b>
</li>
<li ng-if="phantomasResults.metrics.DOMidDuplicated">
IDs duplicated: {{phantomasResults.metrics.DOMidDuplicated}}
IDs duplicated: <b>{{phantomasResults.metrics.DOMidDuplicated}}</b>
<show-offenders modal-title="DOM IDs duplicated" metric-name="DOMidDuplicated" phantomas-results="phantomasResults"></show-offenders>
</li>
</ul>
</div>
@@ -64,9 +67,16 @@
<div class="notation">DOM read and write</div>
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.DOMinserts">DOM inserts: {{phantomasResults.metrics.DOMinserts}}</li>
<li ng-if="phantomasResults.metrics.DOMqueries">DOM queries: {{phantomasResults.metrics.DOMqueries}}</li>
<li ng-if="totalJSTime">Time they took: {{totalJSTime}} ms</li>
<li ng-if="phantomasResults.metrics.DOMinserts">
DOM inserts: <b>{{phantomasResults.metrics.DOMinserts}}</b>
<show-offenders modal-title="DOM inserts" metric-name="DOMinserts" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.DOMqueries">
DOM queries: <b>{{phantomasResults.metrics.DOMqueries}}</b>
</li>
<li ng-if="totalJSTime">
Time they took: <b>{{totalJSTime}} ms</b>
</li>
</ul>
</div>
</div>
@@ -76,7 +86,8 @@
<div class="criteria">
<ul>
<li ng-if="duplicatedQueriesCountAll">
Avoidable queries: {{duplicatedQueriesCountAll}}
Avoidable queries: <b>{{duplicatedQueriesCountAll}}</b>
<show-offenders modal-title="Duplicated DOM queries" metric-name="DOMqueriesDuplicated" phantomas-results="phantomasResults"></show-offenders>
</li>
</ul>
</div>
@@ -87,7 +98,8 @@
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.eventsBound">
Events bound: {{phantomasResults.metrics.eventsBound}}
Events bound: <b>{{phantomasResults.metrics.eventsBound}}</b>
<show-offenders modal-title="Events bound" metric-name="eventsBound" phantomas-results="phantomasResults"></show-offenders>
</li>
</ul>
</div>
@@ -98,19 +110,22 @@
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.jsErrors">
Javascript errors: {{phantomasResults.metrics.jsErrors}}
Javascript errors: <b>{{phantomasResults.metrics.jsErrors}}</b>
<show-offenders modal-title="Javascript errors" metric-name="jsErrors" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.evalCalls">
eval calls: {{phantomasResults.metrics.evalCalls}}
eval calls: <b>{{phantomasResults.metrics.evalCalls}}</b>
</li>
<li ng-if="phantomasResults.metrics.documentWriteCalls">
document.write calls: {{phantomasResults.metrics.documentWriteCalls}}
document.write calls: <b>{{phantomasResults.metrics.documentWriteCalls}}</b>
</li>
<li ng-if="phantomasResults.metrics.consoleMessages">
Console messages: {{phantomasResults.metrics.consoleMessages}}
Console messages: <b>{{phantomasResults.metrics.consoleMessages}}</b>
<show-offenders modal-title="Console messages" metric-name="consoleMessages" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.globalVariables">
Global variables: {{phantomasResults.metrics.globalVariables}}
Global variables: <b>{{phantomasResults.metrics.globalVariables}}</b>
<show-offenders modal-title="Global variables" metric-name="globalVariables" phantomas-results="phantomasResults"></show-offenders>
</li>
</ul>
</div>
@@ -121,10 +136,10 @@
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.jQueryDifferentVersions == 1">
jQuery version: {{phantomasResults.metrics.jQueryVersion}}
jQuery version: <b>{{phantomasResults.metrics.jQueryVersion}}</b>
</li>
<li ng-if="phantomasResults.metrics.jQueryDifferentVersions > 1">
{{phantomasResults.metrics.jQueryDifferentVersions}} versions loaded:
<b>{{phantomasResults.metrics.jQueryDifferentVersions}}</b> versions loaded:
<span ng-repeat="version in phantomasResults.offenders.jQueryDifferentVersions">{{version}}<span ng-show="!$last"> & </span></span>
</li>
</ul>
@@ -136,10 +151,11 @@
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.cssRules">
Rules count: {{phantomasResults.metrics.cssRules}}
Rules count: <b>{{phantomasResults.metrics.cssRules}}</b>
</li>
<li ng-if="phantomasResults.metrics.cssComplexSelectors">
Complex selectors: {{phantomasResults.metrics.cssComplexSelectors}}
Complex selectors: <b>{{phantomasResults.metrics.cssComplexSelectors}}</b>
<show-offenders modal-title="Complex selectors" metric-name="cssComplexSelectors" phantomas-results="phantomasResults"></show-offenders>
</li>
</ul>
</div>
@@ -150,28 +166,36 @@
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.cssDuplicatedSelectors">
Duplicated selectors: {{phantomasResults.metrics.cssDuplicatedSelectors}}
Duplicated selectors: <b>{{phantomasResults.metrics.cssDuplicatedSelectors}}</b>
<show-offenders modal-title="Duplicated selectors" metric-name="cssDuplicatedSelectors" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cssEmptyRules">
Empty rules: {{phantomasResults.metrics.cssEmptyRules}}
Empty rules: <b>{{phantomasResults.metrics.cssEmptyRules}}</b>
<show-offenders modal-title="Empty rules" metric-name="cssEmptyRules" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cssExpressions">
CSS expressions: {{phantomasResults.metrics.cssExpressions}}
CSS expressions: <b>{{phantomasResults.metrics.cssExpressions}}</b>
<show-offenders modal-title="CSS expressions" metric-name="cssExpressions" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cssImportants">
Uses of !important: {{phantomasResults.metrics.cssImportants}}
Uses of !important: <b>{{phantomasResults.metrics.cssImportants}}</b>
<show-offenders modal-title="Uses of !important" metric-name="cssImportants" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cssOldIEFixes">
Old IE fixes: {{phantomasResults.metrics.cssOldIEFixes}}
Old IE fixes: <b>{{phantomasResults.metrics.cssOldIEFixes}}</b>
<show-offenders modal-title="Old IE fixes" metric-name="cssOldIEFixes" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cssOldPropertyPrefixes">
Old prefixes: {{phantomasResults.metrics.cssOldPropertyPrefixes}}
Old prefixes: <b>{{phantomasResults.metrics.cssOldPropertyPrefixes}}</b>
<show-offenders modal-title="Old prefixes" metric-name="cssOldPropertyPrefixes" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cssUniversalSelectors">
Universal * selectors: {{phantomasResults.metrics.cssUniversalSelectors}}
Universal selectors: <b>{{phantomasResults.metrics.cssUniversalSelectors}}</b>
<show-offenders modal-title="Universal selectors" metric-name="cssUniversalSelectors" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cssRedundantBodySelectors">
Redundant body selectors: {{phantomasResults.metrics.cssRedundantBodySelectors}}
Redundant body selectors: <b>{{phantomasResults.metrics.cssRedundantBodySelectors}}</b>
<show-offenders modal-title="Redundant body selectors" metric-name="cssRedundantBodySelectors" phantomas-results="phantomasResults"></show-offenders>
</li>
</ul>
</div>
@@ -182,31 +206,39 @@
<div class="criteria">
<ul>
<li>
Total requests: {{phantomasResults.metrics.requests}}
Total requests: <b>{{phantomasResults.metrics.requests}}</b>
</li>
<li ng-if="phantomasResults.metrics.htmlCount">
Documents: {{phantomasResults.metrics.htmlCount}}
Documents: <b>{{phantomasResults.metrics.htmlCount}}</b>
<show-offenders modal-title="HTML count" metric-name="htmlCount" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.jsCount">
Scripts: {{phantomasResults.metrics.jsCount}}
Scripts: <b>{{phantomasResults.metrics.jsCount}}</b>
<show-offenders modal-title="JS count" metric-name="jsCount" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cssCount">
Stylesheets: {{phantomasResults.metrics.cssCount}}
Stylesheets: <b>{{phantomasResults.metrics.cssCount}}</b>
<show-offenders modal-title="CSS count" metric-name="cssCount" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.imageCount">
Images: {{phantomasResults.metrics.imageCount}}
Images: <b>{{phantomasResults.metrics.imageCount}}</b>
<show-offenders modal-title="Image count" metric-name="imageCount" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.webfontCount">
Fonts: {{phantomasResults.metrics.webfontCount}}
Fonts: <b>{{phantomasResults.metrics.webfontCount}}</b>
<show-offenders modal-title="Webfont count" metric-name="webfontCount" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.videoCount">
Videos: {{phantomasResults.metrics.videoCount}}
Videos: <b>{{phantomasResults.metrics.videoCount}}</b>
<show-offenders modal-title="Video count" metric-name="videoCount" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.jsonCount">
JSON: {{phantomasResults.metrics.jsonCount}}
JSON: <b>{{phantomasResults.metrics.jsonCount}}</b>
<show-offenders modal-title="JSON count" metric-name="jsonCount" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.otherCount">
Other: {{phantomasResults.metrics.otherCount}}
Other: <b>{{phantomasResults.metrics.otherCount}}</b>
<show-offenders modal-title="Other count" metric-name="otherCount" phantomas-results="phantomasResults"></show-offenders>
</li>
</ul>
</div>
@@ -217,22 +249,28 @@
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.notFound">
404 not found: {{phantomasResults.metrics.notFound}}
404 not found: <b>{{phantomasResults.metrics.notFound}}</b>
<show-offenders modal-title="404 not found" metric-name="notFound" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.closedConnections">
Connections closed: {{phantomasResults.metrics.closedConnections}}
Connections closed: <b>{{phantomasResults.metrics.closedConnections}}</b>
<show-offenders modal-title="Connections closed" metric-name="closedConnections" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cachingDisabled">
Caching disabled: {{phantomasResults.metrics.cachingDisabled}}
Caching disabled: <b>{{phantomasResults.metrics.cachingDisabled}}</b>
<show-offenders modal-title="Caching disabled" metric-name="cachingDisabled" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cachingNotSpecified">
Caching not specified: {{phantomasResults.metrics.cachingNotSpecified}}
Caching not specified: <b>{{phantomasResults.metrics.cachingNotSpecified}}</b>
<show-offenders modal-title="Caching not specified" metric-name="cachingNotSpecified" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.cachingTooShort">
Caching too short: {{phantomasResults.metrics.cachingTooShort}}
Caching too short: <b>{{phantomasResults.metrics.cachingTooShort}}</b>
<show-offenders modal-title="Caching too short" metric-name="cachingTooShort" phantomas-results="phantomasResults"></show-offenders>
</li>
<li ng-if="phantomasResults.metrics.domains">
Different domains: {{phantomasResults.metrics.domains}}
Different domains: <b>{{phantomasResults.metrics.domains}}</b>
<show-offenders modal-title="Different domains" metric-name="domains" phantomas-results="phantomasResults"></show-offenders>
</li>
</ul>
</div>
app/public/fonts/icons.woff
BIN
View File
Binary file not shown.
app/public/fonts/svg-icons/eye.svg
Executable
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g class="svgGrid" id="svgGrid"><line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"></line><rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"></rect></g><path d="M 256.00,96.00C 144.341,96.00, 47.559,161.021,0.00,256.00c 47.559,94.979, 144.341,160.00, 256.00,160.00c 111.657,0.00, 208.439-65.021, 256.00-160.00 C 464.442,161.021, 367.657,96.00, 256.00,96.00z M 382.225,180.852c 30.081,19.187, 55.571,44.887, 74.717,75.148 c-19.146,30.261-44.637,55.961-74.718,75.149C 344.427,355.257, 300.779,368.00, 256.00,368.00c-44.78,0.00-88.428-12.743-126.225-36.852 C 99.695,311.962, 74.205,286.262, 55.058,256.00c 19.146-30.262, 44.637-55.962, 74.717-75.148c 1.959-1.25, 3.938-2.461, 5.929-3.65 C 130.725,190.866, 128.00,205.613, 128.00,221.00c0.00,70.692, 57.308,128.00, 128.00,128.00s 128.00-57.308, 128.00-128.00c0.00-15.387-2.725-30.134-7.704-43.799 C 378.286,178.39, 380.265,179.602, 382.225,180.852z M 256.00,205.00c0.00,26.51-21.49,48.00-48.00,48.00s-48.00-21.49-48.00-48.00s 21.49-48.00, 48.00-48.00 S 256.00,178.49, 256.00,205.00z" ></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

app/public/scripts/app.js
+3 -1
View File
@@ -1,3 +1,5 @@
angular.module('YellowLabTools', [
'Results'
'Results',
'ngModal',
'ShowOffendersDirective'
]);
app/public/scripts/filters.js
View File
app/public/scripts/showOffenders.js
+17
View File
@@ -0,0 +1,17 @@
var app = angular.module("ShowOffendersDirective", []);
app.directive('showOffenders', function() {
return {
restrict: 'E',
transclude: true,
scope: {
modalTitle: "@",
metricName: "@",
phantomasResults: "="
},
controller: function($scope, $element, $attrs, $location) {
$scope.dialogShown = false;
},
template: '&nbsp;<span ng-click="dialogShown = true" class="icon-eye"></span><modal-dialog show="dialogShown" dialog-title="{{modalTitle}}: {{phantomasResults.metrics[metricName]}}" width="70%"><ul><li ng-repeat="offender in phantomasResults.offenders[metricName] track by $index">{{offender}}</li></ul></modal-dialog>'
};
});
app/public/styles/less/icons.less
+15 -12
View File
@@ -1,24 +1,27 @@
@arrow-left3-font-family: "fontsmith-icons";
@arrow-left3-value: "\e007";
@arrow-left3: '"fontsmith-icons"' '"\\e007"';
@list-font-family: "fontsmith-icons";
@list-value: "\e002";
@list: '"fontsmith-icons"' '"\\e002"';
@arrow-left3-font-family: "fontsmith-icons";
@arrow-left3-value: "\e006";
@arrow-left3: '"fontsmith-icons"' '"\\e006"';
@question-font-family: "fontsmith-icons";
@question-value: "\e001";
@question: '"fontsmith-icons"' '"\\e001"';
@warning-font-family: "fontsmith-icons";
@warning-value: "\e000";
@warning: '"fontsmith-icons"' '"\\e000"';
@bars-font-family: "fontsmith-icons";
@bars-value: "\e005";
@bars: '"fontsmith-icons"' '"\\e005"';
@drawer3-font-family: "fontsmith-icons";
@drawer3-value: "\e004";
@drawer3: '"fontsmith-icons"' '"\\e004"';
@eye-font-family: "fontsmith-icons";
@eye-value: "\e004";
@eye: '"fontsmith-icons"' '"\\e004"';
@question-font-family: "fontsmith-icons";
@question-value: "\e001";
@question: '"fontsmith-icons"' '"\\e001"';
@lab-font-family: "fontsmith-icons";
@lab-value: "\e003";
@lab: '"fontsmith-icons"' '"\\e003"';
@bars-font-family: "fontsmith-icons";
@bars-value: "\e006";
@bars: '"fontsmith-icons"' '"\\e006"';
@drawer3-font-family: "fontsmith-icons";
@drawer3-value: "\e005";
@drawer3: '"fontsmith-icons"' '"\\e005"';
.icon-font-family(@char) {
font-family: ~`@{char}[0]`;
app/public/styles/less/main.less
+3
View File
@@ -67,4 +67,7 @@ h1 span {
}
.icon-metrics {
.icon(@drawer3);
}
.icon-eye {
.icon(@eye);
}
app/public/styles/less/results.less
+68 -1
View File
@@ -128,6 +128,11 @@ h4 {
/* Non applicable */
background: #CCC;
}
.notations .icon-eye {
color: #9c4274;
cursor: pointer;
}
.timeline {
margin: 2em 0 5em;
@@ -404,4 +409,66 @@ input.textFilter {
.table .icon-warning {
color: #e74c3c;
}
}
/**** NgModal popin (have a look inside bower_components) ****/
.ng-modal {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ng-modal-overlay {
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
.ng-modal-dialog {
z-index: 10000;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
background-color: #fff;
padding: 10px;
border: 3px solid #f1c40f;
border-radius: 0.5em;
}
.ng-modal-dialog-content {
overflow-x: hidden;
overflow-y: scroll;
word-wrap: break-word;
/*height: calc(~"100% - 47px");*/
max-height: 20em;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
cursor: pointer;
font-size: 120%;
padding: 5px;
display: inline-block;
}
.ng-modal-close-x {
font-weight: bold;
font-family: Arial, sans-serif;
}
.ng-modal-title {
font-weight: bold;
font-size: 1.5em;
display: block;
margin-bottom: 10px;
padding-bottom: 7px;
border-bottom: solid 1px #999;
}
app/public/styles/main.css
+15 -2
View File
@@ -95,7 +95,7 @@ h1 span {
-webkit-font-smoothing: antialiased;
}
.icon-back:before {
content: "\e006";
content: "\e007";
}
.icon-summary {
font-family: "fontsmith-icons";
@@ -121,7 +121,7 @@ h1 span {
-webkit-font-smoothing: antialiased;
}
.icon-spaghetti:before {
content: "\e005";
content: "\e006";
}
.icon-metrics {
font-family: "fontsmith-icons";
@@ -134,5 +134,18 @@ h1 span {
-webkit-font-smoothing: antialiased;
}
.icon-metrics:before {
content: "\e005";
}
.icon-eye {
font-family: "fontsmith-icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-eye:before {
content: "\e004";
}
app/public/styles/results.css
+64
View File
@@ -118,6 +118,10 @@ h4 {
/* Non applicable */
background: #CCC;
}
.notations .icon-eye {
color: #9c4274;
cursor: pointer;
}
.timeline {
margin: 2em 0 5em;
}
@@ -376,3 +380,63 @@ input.textFilter {
.table .icon-warning {
color: #e74c3c;
}
/**** NgModal popin (have a look inside bower_components) ****/
.ng-modal {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ng-modal-overlay {
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
.ng-modal-dialog {
z-index: 10000;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
background-color: #fff;
padding: 10px;
border: 3px solid #f1c40f;
border-radius: 0.5em;
}
.ng-modal-dialog-content {
overflow-x: hidden;
overflow-y: scroll;
word-wrap: break-word;
/*height: calc(~"100% - 47px");*/
max-height: 20em;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
cursor: pointer;
font-size: 120%;
padding: 5px;
display: inline-block;
}
.ng-modal-close-x {
font-weight: bold;
font-family: Arial, sans-serif;
}
.ng-modal-title {
font-weight: bold;
font-size: 1.5em;
display: block;
margin-bottom: 10px;
padding-bottom: 7px;
border-bottom: solid 1px #999;
}
bower.json
+2 -1
View File
@@ -1,6 +1,7 @@
{
"name": "yellowlabtools",
"dependencies": {
"angular": "^1.3.0"
"angular": "^1.3.0",
"ngModal": "1.2.2"
}
}