Implement new vulnerabilities and packages tabs.
Fixes https://github.com/coreos-inc/design/issues/268
This commit is contained in:
Joseph Schorr
parent
c7904db30d
commit
ae9140caae
16 changed files with 1547 additions and 171 deletions
109
static/css/directives/ui/image-feature-view.css
Normal file
109
static/css/directives/ui/image-feature-view.css
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
.image-feature-view-element .donut-icon {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 95px;
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
color: #EAEAEA;
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
||||
.image-feature-view-element .no-vulns {
|
||||
color: #2FC98E;
|
||||
}
|
||||
|
||||
.image-feature-view-element .no-vulns i.fa {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.image-feature-view-element .security-header {
|
||||
margin-top: -4px;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.image-feature-view-element .donut-col {
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-feature-view-element #featureDonutChart {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.image-feature-view-element .summary-col {
|
||||
font-size: 20px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.image-feature-view-element .summary-col .title-item {
|
||||
font-size: 24px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.image-feature-view-element .summary-list {
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.image-feature-view-element .summary-list i.fa {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.image-feature-view-element .summary-list strong {
|
||||
text-align: right;
|
||||
width: 40px;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.image-feature-view-element .co-table .empty {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.image-feature-view-element .co-table .single-col {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.image-feature-view-element .co-table .double-col {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.image-feature-view-element .co-table .impact-col {
|
||||
text-align: center;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.image-feature-view-element .co-table .image-col {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-feature-view-element .co-table .image-col .fa {
|
||||
margin-left: 6px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.image-feature-view-element .co-table .single-col {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.image-feature-view-element .dockerfile-command {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.image-feature-view-element .dockerfile-command .command-title {
|
||||
font-size: 12px;
|
||||
max-width: 297px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.image-feature-view-element .vuln-summary i.fa {
|
||||
margin-right: 6px;
|
||||
}
|
||||
169
static/css/directives/ui/image-vulnerability-view.css
Normal file
169
static/css/directives/ui/image-vulnerability-view.css
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
.image-vulnerability-view-element .donut-icon {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 95px;
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
color: #EAEAEA;
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .security-header {
|
||||
margin-top: -4px;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .donut-col {
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element #vulnDonutChart {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .summary-col {
|
||||
font-size: 20px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .summary-col .title-item {
|
||||
font-size: 24px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .summary-list {
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .summary-list i.fa {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .summary-list strong {
|
||||
text-align: right;
|
||||
width: 40px;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .dockerfile-command {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .dockerfile-command .command-title {
|
||||
font-size: 12px;
|
||||
max-width: 297px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .co-table .empty {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .co-table .single-col {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .co-table .double-col {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .co-table .impact-col {
|
||||
text-align: center;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .co-table .nowrap-col {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .co-table .image-col {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .co-table .image-col .fa {
|
||||
margin-left: 6px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.image-vulnerability-view-element .co-table .single-col {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .fixed-in-version:before {
|
||||
font-family: FontAwesome;
|
||||
content: '\f0a9';
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .fixed-in-version {
|
||||
color: rgb(47, 201, 142);
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .cvss-text {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .vulnerability-priority-view {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .cvss {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-left: 8px;
|
||||
background: #eee;
|
||||
position: relative;;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .cvss span {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .expansion-col {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .subtitle {
|
||||
color: #999;
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
padding-top: 0!important;
|
||||
text-align: left;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
|
||||
.image-vulnerability-view-element .expand-link {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .external-link {
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.image-vulnerability-view-element .description {
|
||||
display: inline-block;
|
||||
max-width: 1000px;
|
||||
}
|
||||
50
static/css/directives/ui/nvd-vectors-display.css
Normal file
50
static/css/directives/ui/nvd-vectors-display.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
.nvd-vectors-display-element dl {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
max-width: 200px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.nvd-vectors-display-element dt {
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nvd-vectors-display-element dd {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nvd-vectors-display-element dd:before {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
font-family: FontAwesome;
|
||||
content: '\f111';
|
||||
}
|
||||
|
||||
.nvd-vectors-display-element dd.not-current-vector {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.nvd-vectors-display-element dd.current-vector.high:before {
|
||||
content: '\f071';
|
||||
}
|
||||
|
||||
.nvd-vectors-display-element dd.current-vector.medium:before {
|
||||
content: '\f06a';
|
||||
}
|
||||
|
||||
.nvd-vectors-display-element dd.current-vector.low:before {
|
||||
content: '\f056';
|
||||
}
|
||||
|
||||
.nvd-vectors-display-element .current-vector.high {
|
||||
color: rgb(214, 68, 86);
|
||||
}
|
||||
|
||||
.nvd-vectors-display-element .current-vector.medium {
|
||||
color: rgb(252, 166, 87);
|
||||
}
|
||||
|
||||
.nvd-vectors-display-element .current-vector.low {
|
||||
color: rgb(47, 201, 142);
|
||||
}
|
||||
Reference in a new issue