Merge pull request #208 from janetkuo/update-demo-page

Styling the update-demo static page
pull/216/head
johndmulhausen 2016-03-21 15:05:39 -07:00
commit 5bc866f76d
2 changed files with 41 additions and 10 deletions

View File

@ -23,14 +23,26 @@ limitations under the License.
<body ng-controller="ButtonsCtrl"> <body ng-controller="ButtonsCtrl">
<div ng-repeat="server in servers" class="pod"> <div ng-repeat="server in servers" class="pod">
<img src="/api/v1/proxy/namespaces/default/pods/{{server.podName}}/{{server.image}}" height="100px" width="100px" /> <img src="/api/v1/proxy/namespaces/default/pods/{{server.podName}}/{{server.image}}" height="100px" width="100px" />
<b>ID:</b> {{server.podName}}<br> <div class="k8s-example-update-demo-card-section">
<b>Host:</b> <a href="/api/v1/proxy/namespaces/default/pods/{{server.podName}}/data.json">{{server.host}}</a><br> <span class="k8s-title">ID</span> <span>{{server.podName}}</span>
<b>Status:</b> {{server.status}}<br> </div>
<b>Image:</b> {{server.dockerImage}}<br> <div class="k8s-example-update-demo-card-section">
<b>Labels:</b> <span class="k8s-title">Host</span> <span><a href="/api/v1/proxy/namespaces/default/pods/{{server.podName}}/data.json">{{server.host}}</a></span>
</div>
<div class="k8s-example-update-demo-card-section">
<span class="k8s-title">Status</span> <span>{{server.status}}</span>
</div>
<div class="k8s-example-update-demo-card-section">
<span class="k8s-title">Image</span> <span>{{server.dockerImage}}</span>
</div>
<div class="k8s-example-update-demo-card-section">
<span class="k8s-title">Labels</span>
<span>
<ul> <ul>
<li ng-repeat="(key,value) in server.labels">{{key}}={{value}}</li> <li ng-repeat="(key,value) in server.labels">{{key}}={{value}}</li>
</ul> </ul>
</span>
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -19,9 +19,9 @@ img {
width: 100px; width: 100px;
float: right; float: right;
background-size: 100px 100px; background-size: 100px 100px;
background-color: black;
margin-left: 10px; margin-left: 10px;
border: none; border: none;
border-radius: 50%;
} }
ul { ul {
@ -33,8 +33,27 @@ ul {
font-family: Roboto, Open Sans, arial; font-family: Roboto, Open Sans, arial;
border: 1px solid black; border: 1px solid black;
border-radius: 5px; border-radius: 5px;
border: 1px groove #DCDDDE;
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
display: inline-block; display: inline-block;
background-color: #D1D1D1; box-shadow: 3px 3px 3px 1px #CFCFCF;
background-color: #FFFFFF;
}
body {
background-color: #E8E8E8;
}
.k8s-example-update-demo-card-section {
color: black;
font-size: 13px;
}
.k8s-example-update-demo-card-section .k8s-title {
color: #7D7D7D;
}
.k8s-example-update-demo-card-section .k8s-card-id {
font-size: bigger;
} }