Improve UI on rule pages
This commit is contained in:
Gaël Métais
+46
-20
@@ -1,32 +1,33 @@
|
||||
.rule.board {
|
||||
text-align: center;
|
||||
}
|
||||
.rule h2 span {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.rule .scoreDisplay {
|
||||
.rule .ruleTable {
|
||||
display: table;
|
||||
border-spacing: 1em;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
margin: 2em auto;
|
||||
background: #f2f2f2;
|
||||
border: 1px dashed #666;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.rule .scoreDisplay > div {
|
||||
.rule .ruleTable > div {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.rule .scoreDisplay > div.score {
|
||||
.rule .ruleTable .left {
|
||||
width: 33%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.rule .ruleTable .right {
|
||||
width: 67%;
|
||||
}
|
||||
.rule .score {
|
||||
font-size: 2.5em;
|
||||
line-height: 2em;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.rule h3 {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
.rule .icon-warning {
|
||||
font-size: 2em;
|
||||
color: #FF1919;
|
||||
margin: 0 auto 0.5em;
|
||||
}
|
||||
.rule .message {
|
||||
width: 80%;
|
||||
@@ -35,19 +36,44 @@
|
||||
.rule .message p {
|
||||
margin: 0.5em;
|
||||
}
|
||||
.rule ul {
|
||||
.rule .message ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.rule li:before {
|
||||
.rule .message li:before {
|
||||
content: '\25e6';
|
||||
margin-right: 0.3em;
|
||||
font-size: 1.2em;
|
||||
position: relative;
|
||||
top: 0.1em;
|
||||
}
|
||||
.rule .offenders li {
|
||||
font-size: 0.8em;
|
||||
.rule .warning {
|
||||
width: 90%;
|
||||
margin: -1em auto 2em;
|
||||
background: #FEE;
|
||||
border: 1px dashed #e74c3c;
|
||||
color: #e74c3c;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.rule .offendersTable {
|
||||
display: table;
|
||||
border-spacing: 0 0.25em;
|
||||
margin: 0 auto;
|
||||
min-width: 10%;
|
||||
max-width: 90%;
|
||||
}
|
||||
.rule .offendersTable > div {
|
||||
display: table-row;
|
||||
}
|
||||
.rule .offendersTable > div > div {
|
||||
display: table-cell;
|
||||
background: #f2f2f2;
|
||||
padding: 0 1em;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
.rule .offendersTable > div > div:hover {
|
||||
background: #EBD8E2;
|
||||
}
|
||||
.rule .notFound {
|
||||
font-size: 1em;
|
||||
|
||||
+49
-26
@@ -2,37 +2,34 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rule h2 span {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.rule .scoreDisplay {
|
||||
.rule .ruleTable {
|
||||
display: table;
|
||||
border-spacing: 1em;
|
||||
margin: 0 auto;
|
||||
|
||||
width: 90%;
|
||||
margin: 2em auto;
|
||||
background: #f2f2f2;
|
||||
border: 1px dashed #666;
|
||||
border-radius: 0.5em;
|
||||
> div {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.left {
|
||||
width: 33%;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
|
||||
&.score {
|
||||
font-size: 2.5em;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
|
||||
.rule h3 {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
|
||||
.rule .icon-warning {
|
||||
font-size: 2em;
|
||||
color: #FF1919;
|
||||
.rule .score {
|
||||
font-size: 2.5em;
|
||||
line-height: 2em;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
border-radius: 0.5em;
|
||||
margin: 0 auto 0.5em;
|
||||
}
|
||||
|
||||
.rule .message {
|
||||
@@ -43,11 +40,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.rule ul {
|
||||
.rule .message ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.rule li:before {
|
||||
.rule .message li:before {
|
||||
content:'\25e6';
|
||||
margin-right: 0.3em;
|
||||
font-size: 1.2em;
|
||||
@@ -55,8 +52,34 @@
|
||||
top: 0.1em;
|
||||
}
|
||||
|
||||
.rule .offenders li {
|
||||
font-size: 0.8em;
|
||||
.rule .warning {
|
||||
width: 90%;
|
||||
margin: -1em auto 2em;
|
||||
background: #FEE;
|
||||
border: 1px dashed #e74c3c;
|
||||
color: #e74c3c;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.rule .offendersTable {
|
||||
display: table;
|
||||
border-spacing: 0 0.25em;
|
||||
margin: 0 auto;
|
||||
min-width: 10%;
|
||||
max-width: 90%;
|
||||
> div {
|
||||
display: table-row;
|
||||
> div {
|
||||
display: table-cell;
|
||||
background: #f2f2f2;
|
||||
padding: 0 1em;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
&:hover {
|
||||
background: #EBD8E2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rule .notFound {
|
||||
|
||||
+25
-24
@@ -1,33 +1,34 @@
|
||||
<div ng-include="'/front/views/resultSubHeader.html'"></div>
|
||||
<div class="rule board">
|
||||
<div ng-if="rule">
|
||||
<h2>Score for rule:<br><span>{{rule.policy.label}}</span></h2>
|
||||
|
||||
<div class="scoreDisplay">
|
||||
<div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>
|
||||
|
||||
<div ng-if="rule" class="ruleTable">
|
||||
<div class="left">
|
||||
<h2>{{rule.policy.label}}</h2>
|
||||
<grade score="rule.score" class="score"></grade>
|
||||
<div>{{rule.score}}/100</div>
|
||||
</div>
|
||||
<div ng-if="rule.abnormal">
|
||||
<h3>The page has a real problem with this rule</h3>
|
||||
<span class="icon-warning"></span>
|
||||
<span ng-if="rule.abnormalityScore <= -100" class="icon-warning"></span>
|
||||
<span ng-if="rule.abnormalityScore <= -300" class="icon-warning"></span>
|
||||
<p>(Abnormality score: {{rule.abnormalityScore}})</p>
|
||||
<div class="right">
|
||||
<h3>Value: {{rule.value}}</h3>
|
||||
<div ng-bind-html="message" class="message"></div>
|
||||
</div>
|
||||
|
||||
<h3>Value</h3>
|
||||
{{rule.value}}
|
||||
|
||||
<h3>Why this rule?</h3>
|
||||
<div ng-bind-html="message" class="message"></div>
|
||||
|
||||
<div class="offenders" ng-if="rule.offenders.length > 0">
|
||||
<h3>List of offenders</h3>
|
||||
<ul>
|
||||
<li ng-repeat="offender in rule.offenders track by $index">
|
||||
{{offender}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div ng-if="rule.abnormal" class="warning">
|
||||
<h3>Warning</h3>
|
||||
<p>This rule reached the abnormality threshold, which means there is a real problem you should care about.</p>
|
||||
</div>
|
||||
<div class="offenders">
|
||||
<h3>
|
||||
<ng-pluralize count="rule.offenders.length || 0"
|
||||
when="{'0': 'No offenders',
|
||||
'one': '1 offender',
|
||||
'other': '{} offenders'}">
|
||||
</ng-pluralize>
|
||||
</h3>
|
||||
<div class="offendersTable">
|
||||
<div ng-repeat="offender in rule.offenders track by $index">
|
||||
<div>{{offender}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="!rule && rule !== null" class="notFound">
|
||||
|
||||
Reference in New Issue
Block a user