overflow_scanner/app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
sunny 2018-09-12 11:31:46 +09:00
parent 936d3155ab
commit a021b47b0e
9 changed files with 121 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/pages/home/home-page.component.html
View File

@ -58,7 +58,7 @@
</svg> </svg>
</div> </div>
<p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="bottom"> <p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right">
<div *ngIf="selectedNode"> <div *ngIf="selectedNode">
<app-node-detail [node]="selectedNode"></app-node-detail> <app-node-detail [node]="selectedNode"></app-node-detail>
</div> </div>

5
src/commons/component/host-detail.component.html
View File

@ -1,7 +1,6 @@
<div class="ui-g-12"> <div class="ui-g-12 detail-view-box">
<span>{{host.name}}</span> <h3>{{host.name}} <span>{{host.address}}</span></h3>
<span>{{host.address}}</span>
<p-tabView> <p-tabView>
<p-tabPanel header="General"> <p-tabPanel header="General">

28
src/commons/component/host-detail.component.scss
View File

@ -1,20 +1,36 @@
.detail-view-box {
width: 70%;
h3{
padding: 20px 0 20px 5px;
// padding: 5px;
// height: 60px;
// span{
// font-size: 0.7em;
// color: #757575;
// }
}
.key-value { .key-value {
list-style-type: none; list-style-type: none;
margin: 28px 0 0 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
width: 500px; width: 100%;
li { li {
padding: 8px 14px; padding: 8px 14px;
border-bottom: 1px solid #d8dae2; border-bottom: 1px solid #d8dae2;
position: relative; position: relative;
font-weight: bold; font-weight: bold;
width: 180px; width: 100%;
.meta-value { .meta-value {
font-weight: 100; font-weight: 100;
position: absolute; position: relative;
width: 300px; width: 70%;
right: 40px; left: 10px;
} }
} }
} }
}
.tab-border-bottom .ui-widget-header {
border: 0 !important;
}

8
src/commons/component/node-detail.component.html
View File

@ -1,8 +1,10 @@
<div class="ui-g"> <div class="ui-g">
<div class="detail-img"> <div class="detail-img">
<svg width="200" height="200" viewBox="20 40 140 100"> <!-- <svg width="200" height="200" viewBox="20 40 140 100">
<image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" <image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
/> </svg> -->
<svg width="140" height="140" viewBox="15 35 140 100">
<image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
</svg> </svg>
</div> </div>
<div class="detail-content"> <div class="detail-content">

13
src/commons/component/node-detail.component.scss
View File

@ -1,8 +1,17 @@
.detail-img { .detail-img {
display: inline; position: absolute;
top: 0px;
left: 0px;
width: 140px; width: 140px;
padding: 10px; padding: 10px;
} }
.detail-content { .detail-content {
display: inline; position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0 0 0 150px
// display: inline;
//width: 100%;
//margin-left: 150px;
} }

6
src/commons/component/service-detail.component.html
View File

@ -1,8 +1,8 @@
<div class="ui-g-12"> <div class="ui-g-12 detail-view-box">
<span> <h3>
{{service.name}} {{service.port.host.address}} {{service.name}} {{service.port.host.address}}
</span> </h3>
<p-tabView> <p-tabView>
<p-tabPanel header="General"> <p-tabPanel header="General">

44
src/commons/component/service-detail.component.scss
View File

@ -1,20 +1,52 @@
.detail-view-box {
width: 70%;
h3{
padding: 20px 0 20px 5px;
// padding: 5px;
// height: 60px;
}
.key-value { .key-value {
list-style-type: none; list-style-type: none;
margin: 28px 0 0 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
width: 500px; width: 100%;
li { li {
padding: 8px 14px; padding: 8px 14px;
border-bottom: 1px solid #d8dae2; border-bottom: 1px solid #d8dae2;
position: relative; position: relative;
font-weight: bold; font-weight: bold;
width: 180px; width: 100%;
.meta-value { .meta-value {
font-weight: 100; font-weight: 100;
position: absolute; position: relative;
width: 300px; width: 70%;
right: 40px; left: 10px;
} }
} }
} }
}
.tab-border-bottom .ui-widget-header {
border: 0 !important;
}
// .key-value {
// list-style-type: none;
// margin: 28px 0 0 0;
// padding: 0;
// box-sizing: border-box;
// width: 500px;
// li {
// padding: 8px 14px;
// border-bottom: 1px solid #d8dae2;
// position: relative;
// font-weight: bold;
// width: 180px;
// .meta-value {
// font-weight: 100;
// position: absolute;
// width: 300px;
// right: 40px;
// }
// }
// }

8
src/commons/component/zone-detail.component.html
View File

@ -1,9 +1,9 @@
<div class="ui-g-12"> <div class="ui-g-12 detail-view-box">
<span> <h3>
{{zone.network}} {{zone.network}}
</span> </h3>
<p-tabView> <p-tabView class="tab-border-bottom">
<p-tabPanel header="General"> <p-tabPanel header="General">
<ul class="key-value"> <ul class="key-value">

32
src/commons/component/zone-detail.component.scss
View File

@ -0,0 +1,32 @@
.detail-view-box {
width: 70%;
h3{
padding: 20px 0 20px 5px;
// padding: 5px;
// height: 60px;
}
.key-value {
list-style-type: none;
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
li {
padding: 8px 14px;
border-bottom: 1px solid #d8dae2;
position: relative;
font-weight: bold;
width: 100%;
.meta-value {
font-weight: 100;
position: relative;
width: 70%;
left: 10px;
}
}
}
}
.tab-border-bottom .ui-widget-header {
border: 0 !important;
}