diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 93a09f6fa..27f778750 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -448,7 +448,7 @@ #guest-content-container .wok-guest-gallery { list-style: none; - padding: 0; + padding: 0 0 0 5px; } #guest-content-container .wok-guest-gallery > li.wok-guest-list-header { @@ -461,13 +461,14 @@ } #guest-content-container .wok-guest-gallery .wok-guest-list-item { - padding: 0 0px 0 0px; + padding: 0; width: 240px; - height: 453px; + height: 435px; display: inline-block; border: 0; background: #fff; margin-right: 20px; + margin-bottom: 20px; position: relative; vertical-align: top; } @@ -503,8 +504,10 @@ } #guest-content-container .wok-guest-gallery .wok-guest-list-item .progress { - display: inline-block; + display: block; + float: right; width: 125px; + height: 18px; position: relative; vertical-align: top; margin-top: 0; @@ -535,10 +538,13 @@ } #guest-content-container .wok-guest-gallery .wok-guest-list-item .item-hidden { + clear: both; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + position: relative; + top: -10px; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .column-action.pull-right { @@ -571,23 +577,33 @@ display: block; width: 220px; white-space: nowrap; + cursor: default; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .column-processors, #guest-content-container .wok-guest-gallery .wok-guest-list-item .column-memory, #guest-content-container .wok-guest-gallery .wok-guest-list-item .column-storage, #guest-content-container .wok-guest-gallery .wok-guest-list-item .column-network { - margin-top: 21px; + margin-top: 14px; display: block; height: 38px; padding-left: 20px; - padding-right: 20px; + padding-right: 18px; +} + +#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-processors { + margin-top: 18px !important; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .percentage-label, #guest-content-container .wok-guest-gallery .wok-guest-list-item .measure-label { - display: inline-block; + float: left; + display: block; width: 68px; + font-size: 21px; + font-weight: 600; + top: -7px; + position: relative; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .font-bold { @@ -618,7 +634,7 @@ text-align: left; padding-left: 21px; border-radius: 0; - background: rgba(0, 0, 0, 0.8) !important; + background: rgba(0, 0, 0, 0.6) !important; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state .fa { @@ -816,7 +832,7 @@ @media (min-width: 1540px) { #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-name, #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-name { - width: 14.15%; + width: 12%; } } @@ -863,7 +879,7 @@ @media (min-width: 1330px) { #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-vnc, #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-vnc { - width: 10.84%; + width: 10%; display: inline-block; } } @@ -876,7 +892,7 @@ #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-memory, #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-storage, #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-network { - width: 12.5%; + width: 13%; } #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-action, @@ -1829,6 +1845,7 @@ body.wok-gallery { border: 0; background: #fff; margin-right: 20px; + margin-bottom: 20px; } #templates-root-container .wok-vm-gallery .wok-vm-body > span { @@ -1854,6 +1871,8 @@ body.wok-gallery { text-overflow: ellipsis !important; overflow: hidden !important; padding-right: 35px !important; + white-space: nowrap; + cursor: default; } #templates-root-container .wok-vm-gallery .item-hidden.column-type, #templates-root-container .wok-vm-gallery .item-hidden.column-version, #templates-root-container .wok-vm-gallery .item-hidden.column-processors { @@ -1878,7 +1897,7 @@ body.wok-gallery { } #templates-root-container .wok-vm-gallery .menu-flat { - width: 239px; + width: 240px; margin-left: -20px; } diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss index 9cf87a218..6f5dbf0e3 100644 --- a/ui/css/src/modules/_guests.scss +++ b/ui/css/src/modules/_guests.scss @@ -202,7 +202,7 @@ } .wok-guest-gallery { list-style: none; - padding: 0; + padding: 0 0 0 5px; > li.wok-guest-list-header { display: none; } @@ -211,13 +211,14 @@ padding: 0; } .wok-guest-list-item { - padding: 0 0px 0 0px; + padding: 0; width: 240px; - height: 453px; + height: 435px; display: inline-block; border: 0; background: $body-bg; margin-right: 20px; + margin-bottom: 20px; position: relative; vertical-align: top; &.inactive { @@ -248,8 +249,10 @@ font-weight: 400; } .progress { - display: inline-block; + display: block; + float: right; width: 125px; + height: 18px; position: relative; vertical-align: top; margin-top: 0; @@ -275,10 +278,13 @@ } } .item-hidden { + clear: both; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + position: relative; + top: -10px; } .column-action.pull-right { position: absolute; @@ -307,21 +313,30 @@ display: block; width: 220px; white-space: nowrap; + cursor: default; } .column-processors, .column-memory, .column-storage, .column-network { - margin-top: 21px; + margin-top: 14px; display: block; height: 38px; padding-left: 20px; - padding-right: 20px; + padding-right: 18px; + } + .column-processors { + margin-top: 18px !important; } .percentage-label, .measure-label { - display: inline-block; + float: left; + display: block; width: 68px; + font-size: 21px; + font-weight: 600; + top: -7px; + position: relative; } .font-bold { font-weight: bold !important; @@ -346,7 +361,7 @@ text-align: left; padding-left: 21px; border-radius: 0; - background: rgba(0, 0, 0, .8) !important; + background: rgba(0, 0, 0, .6) !important; > span.guest-state { .fa { @@ -508,7 +523,7 @@ width: 9.7%; } @media (min-width: $screen-xlg) { - width: 14.15%; + width: 12%; } } > span.column-type { @@ -537,7 +552,7 @@ color: $vnc-blue !important; } @media (min-width: $screen-lg + 130) { - width: 10.84%; + width: 10%; display: inline-block; } } @@ -545,7 +560,7 @@ > span.column-memory, > span.column-storage, > span.column-network { - width: 12.5%; + width: 13%; } > span.column-action { width: 165px; diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index 371d5cef5..86b9305fe 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -399,6 +399,7 @@ border: 0; background: $body-bg; margin-right: 20px; + margin-bottom: 20px; > span { display: inline-block; width: 100%; @@ -421,6 +422,8 @@ text-overflow: ellipsis !important; overflow: hidden !important; padding-right: 35px !important; + white-space: nowrap; + cursor: default; } .item-hidden { &.column-type, @@ -445,7 +448,7 @@ width: 100%; } .menu-flat { - width: 239px; + width: 240px; margin-left: -20px; } .btn { diff --git a/ui/js/src/kimchi.guest_main.js b/ui/js/src/kimchi.guest_main.js index eb05033f1..2542a6393 100644 --- a/ui/js/src/kimchi.guest_main.js +++ b/ui/js/src/kimchi.guest_main.js @@ -439,11 +439,16 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { result.data(vmObject); //Add the Name - var guestTitle = result.find('.title').attr('val', vmObject.name); + var guestTitle = result.find('.title').attr({'val': vmObject.name, 'title': vmObject.name}); guestTitle.html(vmObject.name); - var scrensh = result.find('.screenshot').css('background-image', 'url('+vmObject.screenshot+')'); - scrensh.attr('title', vmObject.name); + if(vmObject.screenshot !== null){ + var scrensh = result.find('.screenshot').css('background-image', 'url('+vmObject.screenshot+')'); + scrensh.attr('title', vmObject.name); + } else { + var scrensh = result.find('.screenshot').css('background-image', 'none'); + scrensh.attr('title', vmObject.name); + } //Add the OS Type and Icon var osType = result.find('.column-type.distro-icon'); @@ -471,6 +476,10 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { osType.addClass('icon-debian'); osType.attr('val', 'Debian'); osType.html('Debian'); + } else if (vmObject.icon !== null) { + osType.css('background-image',vmObject.icon); + osType.attr('val', 'Unknown'); + osType.html('Unknown'); } else { //Unknown osType.addClass('icon-unknown'); @@ -491,6 +500,8 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { osName.addClass('icon-gentoo'); } else if (vmObject.icon == 'plugins/kimchi/images/icon-debian.png') { osName.addClass('icon-debian'); + } else if (vmObject.icon !== null) { + osName.css('background-image',vmObject.icon); } else { osName.addClass('icon-unknown'); } @@ -777,7 +788,15 @@ kimchi.guestSetRequestHeader = function(xhr) { xhr.setRequestHeader('Accept', 'text/html'); }; +kimchi.toggleGuestsGallery = function() { + $(".wok-guest-list, .wok-guest-gallery").toggleClass("wok-guest-list wok-guest-gallery"); + $(".wok-list, .wok-gallery").toggleClass("wok-list wok-gallery"); + var text = $('#guest-gallery-table-button span.text').text(); + $('#guest-gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']); +}; + kimchi.guest_main = function() { + $('body').addClass('wok-list'); if (wok.tabMode['guests'] === 'admin') { $('.tools').attr('style', 'display'); @@ -791,13 +810,8 @@ kimchi.guest_main = function() { kimchi.vmTimeout && clearTimeout(kimchi.vmTimeout); }); - $('body').removeClass("wok-gallery").addClass("wok-list"); - $('#guest-gallery-table-button').on('click', function(event) { - $(".wok-guest-list, .wok-guest-gallery").toggleClass("wok-guest-list wok-guest-gallery"); - $(".wok-list, .wok-gallery").toggleClass("wok-list wok-gallery"); - var text = $('#guest-gallery-table-button span.text').text(); - $('#guest-gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']); + kimchi.toggleGuestsGallery(); }); kimchi.resetGuestFilter(); diff --git a/ui/js/src/kimchi.main.js b/ui/js/src/kimchi.main.js index 5ea56a281..b6de2cf33 100644 --- a/ui/js/src/kimchi.main.js +++ b/ui/js/src/kimchi.main.js @@ -32,3 +32,7 @@ kimchi.getCapabilities(function(result) { }, function() { kimchi.capabilities = {}; }); + +$(function(){ + $('body').removeClass('wok-list wok-gallery'); +}); diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 02a37cd02..5d6e52e75 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -22,6 +22,7 @@ kimchi.NETWORK_TYPE_VEPA = "vepa"; kimchi.initNetwork = function() { + $('body').removeClass('wok-list wok-gallery'); if(wok.tabMode['network'] === 'admin') { $('.tools').attr('style','display'); $('#networkGrid .wok-nw-grid-header span:last-child').attr('style','display'); diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js index 17a43a779..9eaaa51d1 100644 --- a/ui/js/src/kimchi.storage_main.js +++ b/ui/js/src/kimchi.storage_main.js @@ -420,6 +420,7 @@ kimchi.doListVolumes = function(poolObj) { }; kimchi.storage_main = function() { + $('body').removeClass('wok-list wok-gallery'); if(wok.tabMode['storage'] === 'admin') { $('.tools').attr('style','display'); $('#storage-pool-add').on('click', function() { diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js index 93c38374c..5787d7733 100644 --- a/ui/js/src/kimchi.template_main.js +++ b/ui/js/src/kimchi.template_main.js @@ -52,6 +52,13 @@ kimchi.doListTemplates = function() { }); }; +kimchi.toggleTemplatesGallery = function() { + $(".wok-vm-list, .wok-vm-gallery").toggleClass("wok-vm-list wok-vm-gallery"); + $(".wok-list, .wok-gallery").toggleClass("wok-list wok-gallery"); + var text = $('#gallery-table-button span.text').text(); + $('#gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']); +}; + kimchi.templateBindClick = function() { $('.template-edit a').on('click', function(event) { event.preventDefault(); @@ -90,10 +97,7 @@ kimchi.templateBindClick = function() { }); $('#gallery-table-button').on('click', function(event) { - $(".wok-vm-list, .wok-vm-gallery").toggleClass("wok-vm-list wok-vm-gallery"); - $(".wok-list, .wok-gallery").toggleClass("wok-list wok-gallery"); - var text = $('#gallery-table-button span.text').text(); - $('#gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']); + kimchi.toggleTemplatesGallery(); }); $('.sort').on('click', function(event) { @@ -107,7 +111,7 @@ kimchi.hideTitle = function() { }; kimchi.template_main = function() { - $('body').removeClass("wok-gallery").addClass("wok-list"); + $('body').addClass('wok-list'); if (wok.tabMode['templates'] === 'admin') { $('.tools').attr('style', 'display'); $("#template-add").on("click", function(event) { diff --git a/ui/pages/tabs/guests.html.tmpl b/ui/pages/tabs/guests.html.tmpl index 60a87aac0..4d72ea6d4 100644 --- a/ui/pages/tabs/guests.html.tmpl +++ b/ui/pages/tabs/guests.html.tmpl @@ -59,7 +59,7 @@
-
+