AdminCluster: Use proper card headers for title instead
and round cards Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I632ca5a3053247ce4d12c4e028e0322ee1545124
This commit is contained in:
parent
efe874f89c
commit
555a07db70
2 changed files with 17 additions and 7 deletions
|
@ -6,6 +6,13 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.is-rounded {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.is-top-rounded {
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
/* Set to scroll otherwise tablets can spill over into other cards*/
|
||||
.card {
|
||||
overflow: auto;
|
||||
|
|
|
@ -66,21 +66,24 @@ var AdminClusterOverview = AdminSocketBase.extend({
|
|||
|
||||
createCard: function (server) {
|
||||
var card = document.createElement('div');
|
||||
card.className = 'tile is-child card';
|
||||
card.className = 'tile is-child card is-rounded';
|
||||
card.id = 'card-' + server.serverId;
|
||||
|
||||
var cardContent = document.createElement('div');
|
||||
cardContent.className = 'card-content';
|
||||
|
||||
var cardHeader = document.createElement('header');
|
||||
cardHeader.className = 'card-header is-top-rounded';
|
||||
var cardTitle = document.createElement('p');
|
||||
cardTitle.className = 'title has-text-centered';
|
||||
cardTitle.className = 'card-header-title';
|
||||
if (server.podname) {
|
||||
cardTitle.textContent = server.podname;
|
||||
} else {
|
||||
console.warn('podname doesnot exist, using serverId instead of podname on card title');
|
||||
cardTitle.textContent = server.serverId;
|
||||
}
|
||||
cardContent.appendChild(cardTitle);
|
||||
cardHeader.appendChild(cardTitle);
|
||||
card.appendChild(cardHeader);
|
||||
|
||||
var cardContent = document.createElement('div');
|
||||
cardContent.className = 'card-content';
|
||||
|
||||
var mainTile = document.createElement('div');
|
||||
mainTile.className = 'tile is-fullwidth is-vertical';
|
||||
|
@ -528,4 +531,4 @@ var AdminClusterOverview = AdminSocketBase.extend({
|
|||
|
||||
Admin.ClusterOverview = function (host) {
|
||||
return new AdminClusterOverview(host);
|
||||
};
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue