[Kimchi-devel] [PATCH] [Kimchi] Fix for Multi-culture UI issues for kimchi plugin.

Rajat Gupta rajgupta at linux.vnet.ibm.com
Wed Dec 14 11:01:18 UTC 2016


Hello Aline,

I will be sending new patch with all modification and segregated commits 
for each modules in one patch .

Hence you can ignore this patch.


Thanks,

Rajat

On 12/7/2016 5:27 PM, Aline Manera wrote:
>
>
> On 12/02/2016 06:40 AM, rajgupta at linux.vnet.ibm.com wrote:
>> From: Rajat Gupta <rajat.triumph at gmail.com>
>>
>>      1. Fixed strings overlaps
>>      2. Fixed button misalignments
>>      3. Globalization text corrections
>
> Could you explain better the problems you are trying to solve with 
> this patch?
> How do I validate that? What is the problem and how does this patch 
> fix it?
>
>> Signed-off-by: Rajat Gupta <rajat.triumph at gmail.com>
>> ---
>>   ui/css/kimchi.css                      | 156 
>> +++++++++++++++++++++++----------
>>   ui/css/src/modules/_edit-guests.scss   |  32 +++++--
>>   ui/css/src/modules/_guests.scss        |   6 +-
>>   ui/css/src/modules/_network.scss       |   4 +
>>   ui/css/src/modules/_storage.scss       |  61 +++++++++----
>>   ui/css/src/modules/_templates.scss     |  19 ++--
>>   ui/js/src/kimchi.guest_edit_main.js    |  28 +++---
>>   ui/js/src/kimchi.template_edit_main.js |   6 +-
>>   ui/pages/guest-edit.html.tmpl          |  30 +++----
>>   ui/pages/guest-storage-add.html.tmpl   |   2 +-
>>   ui/pages/i18n.json.tmpl                |  10 +++
>>   ui/pages/tabs/guests.html.tmpl         |  14 +--
>>   ui/pages/tabs/storage.html.tmpl        |  34 +++----
>>   ui/pages/tabs/templates.html.tmpl      |  24 ++---
>>   ui/pages/template-edit.html.tmpl       |  28 +++---
>>   15 files changed, 298 insertions(+), 156 deletions(-)
>>
>> diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
>> index 1b2c1dd..64bae4f 100644
>> --- a/ui/css/kimchi.css
>> +++ b/ui/css/kimchi.css
>> @@ -506,7 +506,7 @@
>>
>>   #guest-content-container .wok-guest-gallery .wok-guest-list-item {
>>     padding: 0;
>> -  width: 240px;
>> +  width: 290px;
>>     height: 435px;
>>     display: inline-block;
>>     border: 0;
>> @@ -620,7 +620,7 @@
>>     padding-left: 20px;
>>     margin-right: 20px;
>>     display: block;
>> -  width: 220px;
>> +  width: 290px;
>>     white-space: nowrap;
>>     cursor: default;
>>   }
>> @@ -671,7 +671,7 @@
>>   }
>>
>>   #guest-content-container .wok-guest-gallery .wok-guest-list-item 
>> .menu-flat {
>> -  width: 240px;
>> +  width: 290px;
>>   }
>>
>>   #guest-content-container .wok-guest-gallery .wok-guest-list-item 
>> .btn {
>> @@ -1147,31 +1147,50 @@ body.wok-gallery {
>>     margin: 15px 0 0;
>>   }
>>
>> -#guest-edit-window form .header .column-actions,
>> +#guest-edit-window form .header .cell.column-network {
>> +  display: inline-block;
>> +  overflow-x: hidden;
>> +  overflow-y: hidden;
>> +  text-overflow: ellipsis;
>> +  white-space: nowrap;
>
>> +  /*width: 184px;*/
>
> Please, remove the commented line
>
>> +}
>> +
>> +#guest-edit-window form .header,
>> +#guest-edit-window form .header .cell.column-mac {
>> +  display: inline-block;
>> +  overflow-x: hidden;
>> +  overflow-y: hidden;
>> +  text-overflow: ellipsis;
>> +  white-space: nowrap;
>
>> +  /*width: 174px;*/
>
> Same here.
>
> Seems the above 2 blocks are the same. Why do not join them into one?
>
>> +}
>> +
>> +#guest-edit-window form .column-actions,
>>   #guest-edit-window form .task .column-actions,
>>   #guest-edit-window form .body .column-actions {
>>     text-align: right;
>>   }
>>
>> -#guest-edit-window form .header .column-device,
>> +#guest-edit-window form .column-device,
>>   #guest-edit-window form .task .column-device,
>>   #guest-edit-window form .body .column-device {
>>     width: 12.7%;
>>   }
>>
>> -#guest-edit-window form .header .column-path,
>> +#guest-edit-window form .column-path,
>>   #guest-edit-window form .task .column-path,
>>   #guest-edit-window form .body .column-path {
>>     width: 60.25%;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-network,
>> +#guest-edit-window form .cell.column-network,
>>   #guest-edit-window form .task .cell.column-network,
>>   #guest-edit-window form .body .cell.column-network {
>> -  width: 18%;
>> +  width: 184px;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-network > span,
>> +#guest-edit-window form .cell.column-network > span,
>>   #guest-edit-window form .task .cell.column-network > span,
>>   #guest-edit-window form .body .cell.column-network > span {
>>     width: 100%;
>> @@ -1180,74 +1199,77 @@ body.wok-gallery {
>>     overflow: hidden;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-type,
>> +#guest-edit-window form .cell.column-type,
>>   #guest-edit-window form .task .cell.column-type,
>>   #guest-edit-window form .body .cell.column-type {
>> -  width: 18%;
>> +  width: 184px;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-mode,
>> +#guest-edit-window form .cell.column-mode,
>>   #guest-edit-window form .task .cell.column-mode,
>>   #guest-edit-window form .body .cell.column-mode {
>> -  width: 16%;
>> +  width: 164px;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-mac,
>> +#guest-edit-window form .cell.column-mac,
>>   #guest-edit-window form .task .cell.column-mac,
>>   #guest-edit-window form .body .cell.column-mac {
>> -  width: 14%;
>> +  width: 174px;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-ip,
>> +#guest-edit-window form .cell.column-ip,
>>   #guest-edit-window form .task .cell.column-ip,
>>   #guest-edit-window form .body .cell.column-ip {
>> -  width: 12%;
>> +  width: 150px;
>> +  display: inline-block;
>> +  text-overflow: ellipsis;
>> +  white-space: nowrap;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-sel,
>> +#guest-edit-window form .cell.column-sel,
>>   #guest-edit-window form .task .cell.column-sel,
>>   #guest-edit-window form .body .cell.column-sel {
>>     width: 1.77%;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-snapshot-name,
>> +#guest-edit-window form .cell.column-snapshot-name,
>>   #guest-edit-window form .task .cell.column-snapshot-name,
>>   #guest-edit-window form .body .cell.column-snapshot-name {
>>     width: 58%;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-snapshot-created,
>> +#guest-edit-window form .cell.column-snapshot-created,
>>   #guest-edit-window form .task .cell.column-snapshot-created,
>>   #guest-edit-window form .body .cell.column-snapshot-created {
>>     width: 16.5%;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-pci-status,
>> +#guest-edit-window form .cell.column-pci-status,
>>   #guest-edit-window form .task .cell.column-pci-status,
>>   #guest-edit-window form .body .cell.column-pci-status {
>>     width: 3.7%;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-pci-status .fa,
>> +#guest-edit-window form .cell.column-pci-status .fa,
>>   #guest-edit-window form .task .cell.column-pci-status .fa,
>>   #guest-edit-window form .body .cell.column-pci-status .fa {
>>     color: #8cc63f;
>>     font-size: 24px;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-pci-name,
>> +#guest-edit-window form .cell.column-pci-name,
>>   #guest-edit-window form .task .cell.column-pci-name,
>>   #guest-edit-window form .body .cell.column-pci-name {
>>     width: 21%;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-product,
>> +#guest-edit-window form .cell.column-product,
>>   #guest-edit-window form .task .cell.column-product,
>>   #guest-edit-window form .body .cell.column-product {
>>     width: 45%;
>>   }
>>
>> -#guest-edit-window form .header .cell.column-vendor,
>> +#guest-edit-window form .cell.column-vendor,
>>   #guest-edit-window form .task .cell.column-vendor,
>>   #guest-edit-window form .body .cell.column-vendor {
>>     width: 24.1%;
>> @@ -1612,7 +1634,7 @@ body.wok-gallery {
>>
>>   #template-edit-window .template-edit-wrapper-controls {
>>     vertical-align: top;
>> -  width: 400px;
>> +  width: 480px;
>>     height: 35px;
>>     line-height: 35px;
>>     margin: 7px 0 8px;
>> @@ -1722,15 +1744,15 @@ body.wok-gallery {
>>   }
>>
>>   #template-edit-window .template-storage-cell.type {
>> -  width: 100px;
>> +  width: 110px;
>>   }
>>
>>   #template-edit-window .template-storage-cell.disk {
>> -  width: 100px;
>> +  width: 133px;
>>   }
>>
>>   #template-edit-window .template-storage-cell.format {
>> -  width: 250px;
>> +  width: 162px;
>>   }
>>
>>   #template-edit-window .template-interface-cell.network {
>> @@ -1899,6 +1921,10 @@ body.wok-gallery {
>>   }
>>
>>   /* VM List View classes*/
>> +#templatestatusselect {
>> +  width: 240px !important;
>> +}
>> +
>>   #templates-root-container .grid-control input[type="text"] {
>>     height: 38px;
>>     display: inline-block;
>> @@ -1985,6 +2011,10 @@ body.wok-gallery {
>>     border-bottom: none;
>>     border-top: 0;
>>     background-color: #fff;
>> +  width: 200px;
>> +  overflow: hidden;
>> +  text-overflow: ellipsis;
>> +  white-space: nowrap;
>>   }
>>
>>   #templates-root-container .wok-vm-list .wok-vm-body {
>> @@ -2004,6 +2034,7 @@ body.wok-gallery {
>>     font-size: 12.5pt;
>>     line-height: 2.42857;
>>     font-weight: 400;
>> +  width: 200px;
>>   }
>>
>>   #templates-root-container .wok-vm-list .wok-vm-body .column-type {
>> @@ -2058,7 +2089,7 @@ body.wok-gallery {
>>   }
>>
>>   #templates-root-container .wok-vm-list .column-action {
>> -  width: 33.8000%;
>> +  width: 232px;
>>   }
>>
>>   #templates-root-container .wok-vm-list .item-hidden {
>> @@ -2281,6 +2312,10 @@ body.wok-gallery {
>>     display: block;
>>   }
>>
>> +#networkConfig .alert-dismissable .close, .alert-dismissible .close {
>> +  right: 7px !important;
>> +}
>> +
>>   #network-root-container .wok-nw-loading-icon {
>>     background: transparent 
>> url("../../../images/theme-default/spin5.svg") no-repeat 50% 50%;
>>     -webkit-animation: spin 3s infinite linear;
>> @@ -2595,7 +2630,7 @@ body.wok-gallery {
>>   #storage-root-container .volumes .wok-gallery .volume-box-inner {
>>     padding: 0 16px;
>>     width: 409px;
>> -  height: 110px;
>> +  height: 150px;
>>     display: flex;
>>     flex-flow: row wrap;
>>     justify-content: space-around;
>> @@ -2657,13 +2692,17 @@ body.wok-gallery {
>>   #storage-root-container .volumes .wok-gallery span.column-format,
>>   #storage-root-container .volumes .wok-gallery span.column-type {
>>     order: 3;
>> -  width: 72px;
>> +  width: 142px;
>>     margin-top: -5px;
>>   }
>>
>>   #storage-root-container .volumes .wok-gallery span.gallery-header {
>>     font-weight: 600;
>>     display: block;
>> +  overflow: hidden;
>> +  text-overflow: ellipsis;
>> +  white-space: nowrap;
>> +  width: 90px;
>>   }
>>
>>   #storage-root-container .volumes .wok-gallery span.column-progress {
>> @@ -2754,7 +2793,7 @@ body.wok-gallery {
>>   @media (min-width: 992px) {
>>     #storage-root-container .volumes .wok-list.wok-datagrid > 
>> .wok-datagrid-header > span.column-format,
>>     #storage-root-container .volumes .wok-list.wok-datagrid > 
>> .wok-datagrid-body > .wok-datagrid-row > div > div > div > 
>> span.column-format {
>> -    width: 95px;
>> +    width: 127px;
>>     }
>>   }
>>
>> @@ -2790,7 +2829,7 @@ body.wok-gallery {
>>     #storage-root-container .volumes .wok-list.wok-datagrid > 
>> .wok-datagrid-body > .wok-datagrid-row > div > div > div > 
>> span.column-capacity,
>>     #storage-root-container .volumes .wok-list.wok-datagrid > 
>> .wok-datagrid-body > .wok-datagrid-row > div > div > div > 
>> span.column-allocated,
>>     #storage-root-container .volumes .wok-list.wok-datagrid > 
>> .wok-datagrid-body > .wok-datagrid-row > div > div > div > 
>> span.column-progress {
>> -    width: 95px;
>> +    width: 142px;
>>     }
>>   }
>>
>> @@ -2845,14 +2884,14 @@ body.wok-gallery {
>>   @media (min-width: 992px) {
>>     #storage-root-container .volumes .wok-list.wok-datagrid > 
>> .wok-datagrid-header > span.column-name,
>>     #storage-root-container .volumes .wok-list.wok-datagrid > 
>> .wok-datagrid-body > .wok-datagrid-row > div > div > div > 
>> span.column-name {
>> -    width: 333px;
>> +    width: 250px;
>>     }
>>   }
>>
>>   @media (min-width: 1200px) {
>>     #storage-root-container .volumes .wok-list.wok-datagrid > 
>> .wok-datagrid-header > span.column-name,
>>     #storage-root-container .volumes .wok-list.wok-datagrid > 
>> .wok-datagrid-body > .wok-datagrid-row > div > div > div > 
>> span.column-name {
>> -    width: 444px;
>> +    width: 300px;
>>     }
>>   }
>>
>> @@ -2882,29 +2921,44 @@ body.wok-gallery {
>>
>>   #storage-root-container .wok-datagrid > .wok-datagrid-header > 
>> span.column-state,
>>   #storage-root-container .wok-datagrid > .wok-datagrid-body > 
>> .wok-datagrid-row > span.column-state {
>> -  width: 3.0519%;
>> +  width: 2.0519%;
>>     text-align: center;
>>   }
>>
>>   #storage-root-container .wok-datagrid > .wok-datagrid-header > 
>> span.column-name,
>>   #storage-root-container .wok-datagrid > .wok-datagrid-body > 
>> .wok-datagrid-row > span.column-name {
>> -  width: 12.7272%;
>> +  width: 126px;
>>     text-overflow: ellipsis;
>> +  display: inline-block;
>> +  white-space: nowrap;
>> +  overflow: hidden !important;
>>   }
>>
>>   #storage-root-container .wok-datagrid > .wok-datagrid-header > 
>> span.column-type,
>>   #storage-root-container .wok-datagrid > .wok-datagrid-body > 
>> .wok-datagrid-row > span.column-type {
>> -  width: 11.6883%;
>> +  width: 101px;
>> +  text-overflow: ellipsis;
>> +  display: inline-block;
>> +  white-space: nowrap;
>> +  overflow: hidden !important;
>>   }
>>
>>   #storage-root-container .wok-datagrid > .wok-datagrid-header > 
>> span.column-location,
>>   #storage-root-container .wok-datagrid > .wok-datagrid-body > 
>> .wok-datagrid-row > span.column-location {
>> -  width: 21.4285%;
>> +  width: 171px;
>> +  text-overflow: ellipsis;
>> +  display: inline-block;
>> +  white-space: nowrap;
>> +  overflow: hidden !important;
>>   }
>>
>>   #storage-root-container .wok-datagrid > .wok-datagrid-header > 
>> span.column-usage,
>>   #storage-root-container .wok-datagrid > .wok-datagrid-body > 
>> .wok-datagrid-row > span.column-usage {
>> -  width: 9.41558%;
>> +  width: 152px;
>> +  text-overflow: ellipsis;
>> +  display: inline-block;
>> +  white-space: nowrap;
>> +  overflow: hidden !important;
>>   }
>>
>>   #storage-root-container .wok-datagrid > .wok-datagrid-header > 
>> span.column-usage .usage-icon,
>> @@ -2933,23 +2987,35 @@ body.wok-gallery {
>>
>>   #storage-root-container .wok-datagrid > .wok-datagrid-header > 
>> span.column-capacity,
>>   #storage-root-container .wok-datagrid > .wok-datagrid-body > 
>> .wok-datagrid-row > span.column-capacity {
>> -  width: 8.701298%;
>> +  width: 129px;
>> +  text-overflow: ellipsis;
>> +  display: inline-block;
>> +  white-space: nowrap;
>> +  overflow: hidden !important;
>>   }
>>
>>   #storage-root-container .wok-datagrid > .wok-datagrid-header > 
>> span.column-allocated,
>>   #storage-root-container .wok-datagrid > .wok-datagrid-body > 
>> .wok-datagrid-row > span.column-allocated {
>> -  width: 9.35064%;
>> +  width: 134px;
>> +  text-overflow: ellipsis;
>> +  display: inline-block;
>> +  white-space: nowrap;
>> +  overflow: hidden !important;
>>   }
>>
>>   #storage-root-container .wok-datagrid > .wok-datagrid-header > 
>> span.column-disks,
>>   #storage-root-container .wok-datagrid > .wok-datagrid-body > 
>> .wok-datagrid-row > span.column-disks {
>>     text-align: center;
>> -  width: 2.9870%;
>> +  width: 105px;
>> +  text-overflow: ellipsis;
>> +  display: inline-block;
>> +  white-space: nowrap;
>> +  overflow: hidden !important;
>>   }
>>
>>   #storage-root-container .wok-datagrid > .wok-datagrid-header > 
>> span.column-action,
>>   #storage-root-container .wok-datagrid > .wok-datagrid-body > 
>> .wok-datagrid-row > span.column-action {
>> -  width: 20.64%;
>> +  width: 254px;
>>     text-align: right;
>>   }
>>
>> diff --git a/ui/css/src/modules/_edit-guests.scss 
>> b/ui/css/src/modules/_edit-guests.scss
>> index 6caa720..e3148bd 100644
>> --- a/ui/css/src/modules/_edit-guests.scss
>> +++ b/ui/css/src/modules/_edit-guests.scss
>> @@ -94,7 +94,24 @@
>>       }
>>       form {
>>           margin: 15px 0 0;
>> -        .header,
>
>> +        .header{
>> +          .cell.column-network{
>> +            display: inline-block;
>> +            overflow-x: hidden;
>> +            overflow-y: hidden;
>> +            text-overflow: ellipsis;
>> +            white-space: nowrap;
>> +            /*width: 184px;*/
>> +          },
>> +          .cell.column-mac{
>> +          display: inline-block;
>> +          overflow-x: hidden;
>> +          overflow-y: hidden;
>> +          text-overflow: ellipsis;
>> +          white-space: nowrap;
>> +          /*width: 174px;*/
>
> What I have commented before about join the config into one and remove 
> the commented line.
>
>> +        }
>> +        },
>>           .task,
>>           .body {
>>               .column-actions {
>> @@ -107,7 +124,7 @@
>>                   width: 60.25%;
>>               }
>>               .cell.column-network {
>> -                width: 18%;
>> +              width: 184px;
>>                   > span {
>>                       width: 100%;
>>                       display: inline-block;
>> @@ -116,16 +133,19 @@
>>                   }
>>               }
>>               .cell.column-type {
>> -                width: 18%;
>> +              width: 184px;
>>               }
>>               .cell.column-mode {
>> -                width: 16%;
>> +              width: 164px;
>>               }
>>               .cell.column-mac {
>> -                width: 14%;
>> +              width: 174px;
>>               }
>>               .cell.column-ip {
>> -                width: 12%;
>> +              width: 150px;
>> +              display: inline-block;
>> +              text-overflow: ellipsis;
>> +              white-space: nowrap;
>>               }
>>               .cell.column-sel {
>>                   width: 1.77%;
>> diff --git a/ui/css/src/modules/_guests.scss 
>> b/ui/css/src/modules/_guests.scss
>> index 7893cb3..37654dd 100644
>> --- a/ui/css/src/modules/_guests.scss
>> +++ b/ui/css/src/modules/_guests.scss
>> @@ -223,7 +223,7 @@
>>           }
>>           .wok-guest-list-item {
>>               padding: 0;
>> -            width: 240px;
>> +            width: 290px;
>>               height: 435px;
>>               display: inline-block;
>>               border: 0;
>> @@ -323,7 +323,7 @@
>>                   padding-left: 20px;
>>                   margin-right: 20px;
>>                   display: block;
>> -                width: 220px;
>> +                width: 290px;
>>                   white-space: nowrap;
>>                   cursor: default;
>>               }
>> @@ -366,7 +366,7 @@
>>                   background-repeat: no-repeat;
>>               }
>>               .menu-flat {
>> -                width: 240px;
>> +                width: 290px;
>>               }
>>               .btn {
>>                   width: 100%;
>> diff --git a/ui/css/src/modules/_network.scss 
>> b/ui/css/src/modules/_network.scss
>> index b030ee4..12684ce 100644
>> --- a/ui/css/src/modules/_network.scss
>> +++ b/ui/css/src/modules/_network.scss
>> @@ -38,6 +38,10 @@
>>
>>   }
>>
>> +#networkConfig .alert-dismissable .close, .alert-dismissible .close{
>> +  right: 7px !important;
>> +}
>> +
>>   #network-root-container {
>>
>>       .wok-nw-loading-icon {
>> diff --git a/ui/css/src/modules/_storage.scss 
>> b/ui/css/src/modules/_storage.scss
>> index 0ccc816..70cb3fa 100644
>> --- a/ui/css/src/modules/_storage.scss
>> +++ b/ui/css/src/modules/_storage.scss
>> @@ -236,7 +236,7 @@
>>           .volume-box-inner {
>>               padding: 0 16px;
>>               width: 409px;
>> -            height: 110px;
>> +            height: 150px;
>>               display: flex;
>>               flex-flow: row wrap;
>>               justify-content: space-around;
>> @@ -299,13 +299,17 @@
>>           span.column-format,
>>           span.column-type {
>>               order: 3;
>> -            width: 72px;
>> +            width: 142px;
>>               margin-top: -5px;
>>           }
>>
>>           span.gallery-header {
>>               font-weight: 600;
>>               display: block;
>> +            overflow: hidden;
>> +            text-overflow: ellipsis;
>> +            white-space: nowrap;
>> +            width: 90px;
>>           }
>>
>>           span.column-progress {
>> @@ -406,7 +410,7 @@
>>               > span.column-format {
>>                   width: 57px;
>>                   @media (min-width: $screen-md) {
>> -                    width: 95px;
>> +                    width: 127px;
>>                   }
>>                   @media (min-width: $screen-lg) {
>>                       left: 173px;
>> @@ -421,7 +425,7 @@
>>                   width: 79px;
>>                   text-transform: capitalize;
>>                   @media (min-width: $screen-md) {
>> -                    width: 95px;
>> +                    width: 142px;
>>                   }
>>                   @media (min-width: $screen-lg) {
>>                       left: 165px;
>> @@ -449,10 +453,10 @@
>>               > span.column-name {
>>                   width: 202px;
>>                   @media (min-width: $screen-md) {
>> -                    width: 333px;
>> +                    width: 250px;
>>                   }
>>                   @media (min-width: $screen-lg) {
>> -                    width: 444px;
>> +                    width: 300px;
>>                   }
>>
>>                   label {
>> @@ -485,21 +489,36 @@
>>       .wok-datagrid > .wok-datagrid-header,
>>       .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row {
>>           > span.column-state {
>> -            width: 3.0519%;
>> +            width: 2.0519%;
>>               text-align: center;
>>           }
>>           > span.column-name {
>> -            width: 12.7272%;
>> +            width: 126px;
>>               text-overflow: ellipsis;
>> +            display: inline-block;
>> +            white-space: nowrap;
>> +            overflow: hidden !important;
>>           }
>>           > span.column-type {
>> -            width: 11.6883%;
>> +            width: 101px;
>> +            text-overflow: ellipsis;
>> +            display: inline-block;
>> +            white-space: nowrap;
>> +            overflow: hidden !important;
>>           }
>>           > span.column-location {
>> -            width: 21.4285%;
>> +            width: 171px;
>> +            text-overflow: ellipsis;
>> +            display: inline-block;
>> +            white-space: nowrap;
>> +            overflow: hidden !important;
>>           }
>>           > span.column-usage {
>> -            width: 9.41558%;
>> +            width: 152px;
>> +            text-overflow: ellipsis;
>> +            display: inline-block;
>> +            white-space: nowrap;
>> +            overflow: hidden !important;
>>               .usage-icon {
>>                   padding-left: 35px;
>>                   display: inline-block;
>> @@ -518,17 +537,29 @@
>>               }
>>           }
>>           > span.column-capacity {
>> -            width: 8.701298%;
>> +            width: 129px;
>> +            text-overflow: ellipsis;
>> +            display: inline-block;
>> +            white-space: nowrap;
>> +            overflow: hidden !important;
>>           }
>>           > span.column-allocated {
>> -            width: 9.35064%;
>> +            width: 134px;
>> +            text-overflow: ellipsis;
>> +            display: inline-block;
>> +            white-space: nowrap;
>> +            overflow: hidden !important;
>>           }
>>           > span.column-disks {
>>               text-align: center;
>> -            width: 2.9870%;
>> +            width: 105px;
>> +            text-overflow: ellipsis;
>> +            display: inline-block;
>> +            white-space: nowrap;
>> +            overflow: hidden !important;
>>           }
>>           > span.column-action {
>> -            width: 20.64%;
>> +            width: 254px;
>>               text-align: right;
>>           }
>>       }
>> diff --git a/ui/css/src/modules/_templates.scss 
>> b/ui/css/src/modules/_templates.scss
>> index f72efe9..c5d727e 100644
>> --- a/ui/css/src/modules/_templates.scss
>> +++ b/ui/css/src/modules/_templates.scss
>> @@ -77,7 +77,7 @@ $kimchi-icon-path: '../images';
>>       }
>>       .template-edit-wrapper-controls {
>>           vertical-align: top;
>> -        width: 400px;
>> +        width: 480px;
>>           height: 35px;
>>           line-height: 35px;
>>           margin: 7px 0 8px;
>> @@ -167,13 +167,13 @@ $kimchi-icon-path: '../images';
>>           width: 180px !important;
>>       }
>>       .template-storage-cell.type {
>> -        width: 100px;
>> +        width: 110px;
>>       }
>>       .template-storage-cell.disk {
>> -        width: 100px;
>> +        width: 133px;
>>       }
>>       .template-storage-cell.format {
>> -        width: 250px;
>> +        width: 162px;
>>       }
>>       .template-interface-cell.network {
>>           width: 220px;
>> @@ -318,7 +318,9 @@ $kimchi-icon-path: '../images';
>>
>>
>>   /* VM List View classes*/
>> -
>> +#templatestatusselect{
>> +      width: 240px !important;
>> +}
>>   #templates-root-container {
>>       .grid-control input[type="text"] {
>>           height: 38px;
>> @@ -390,6 +392,10 @@ $kimchi-icon-path: '../images';
>>                   border-bottom: none;
>>                   border-top: 0;
>>                   background-color: $table-bg;
>> +                width: 200px;
>> +                overflow: hidden;
>> +                text-overflow: ellipsis;
>> +                white-space: nowrap;
>>               }
>>           }
>>           .wok-vm-body {
>> @@ -406,6 +412,7 @@ $kimchi-icon-path: '../images';
>>                   font-size: 12.5pt;
>>                   line-height: (1 + $line-height-base);
>>                   font-weight: 400;
>> +                width: 200px;
>>               }
>>               .column-type {
>>                   padding-left: 40px !important;
>> @@ -450,7 +457,7 @@ $kimchi-icon-path: '../images';
>>               width: 1.6900%;
>>           }
>>           .column-action {
>> -            width: 33.8000%;
>> +            width: 232px;
>>           }
>>           .item-hidden {
>>               display: none !important;
>> diff --git a/ui/js/src/kimchi.guest_edit_main.js 
>> b/ui/js/src/kimchi.guest_edit_main.js
>> index 7667fad..bb82077 100644
>> --- a/ui/js/src/kimchi.guest_edit_main.js
>> +++ b/ui/js/src/kimchi.guest_edit_main.js
>> @@ -341,13 +341,13 @@ kimchi.guest_edit_main = function() {
>>                         case 'ovs' :
>>                                         $("#label-type-" + data.id, 
>> item).text(result.type);
>>                                         $("#label-network-" + 
>> data.id, item).text(result.source);
>> -                                      $("#label-mode-" + data.id, 
>> item).text('None');
>> +                                      $("#label-mode-" + data.id, 
>> item).text(i18n['KCHVMED6018M']);
>>                             break;
>>
>>                         case 'network' :
>>                                         $("#label-type-" + data.id, 
>> item).text(result.type);
>>                                         $("#label-network-" + 
>> data.id, item).text(result.network);
>> -                                      $("#label-mode-" + data.id, 
>> item).text('None');
>> +                                      $("#label-mode-" + data.id, 
>> item).text(i18n['KCHVMED6018M']);
>>                               break;
>>                       }
>>
>> @@ -397,7 +397,7 @@ kimchi.guest_edit_main = function() {
>>
>>                               break;
>>                           case 'ovs':
>> -                            $('#label-mode-' + data.id).html('None');
>> +                            $('#label-mode-' + 
>> data.id).html(i18n['KCHVMED6018M']);
>>                               $('#label-mode-' + 
>> data.id).removeClass('hide');
>>                               $('span.column-mode .bootstrap-select', 
>> itemNode).toggleClass("hide", true);
>>
>> @@ -405,7 +405,7 @@ kimchi.guest_edit_main = function() {
>>                               $("span.column-network select", 
>> itemNode).selectpicker('refresh');
>>                               break;
>>                           case 'network':
>> -                            $('#label-mode-' + data.id).html('None');
>> +                            $('#label-mode-' + 
>> data.id).html(i18n['KCHVMED6018M']);
>>                               $('#label-mode-' + 
>> data.id).removeClass('hide');
>>                               $('span.column-mode .bootstrap-select', 
>> itemNode).toggleClass("hide", true);
>>
>> @@ -470,14 +470,14 @@ kimchi.guest_edit_main = function() {
>>               $('#form-guest-edit-interface > div.s390x').show();
>>
>>               var typeOptionsdata = [{
>> -                label: "macvtap",
>> -                value: "macvtap"
>> +                label: i18n['KCHVMED6013M'],
>> +                value: 'macvtap'
>>               }, {
>> -                label: "ovs",
>> -                value: "ovs"
>> +                label: i18n['KCHVMED6014M'],
>> +                value: 'ovs'
>>               }, {
>> -                label: "network",
>> -                value: "network"
>> +                label: i18n['KCHVMED6015M'],
>> +                value: 'network'
>>               }];
>>               var typeOptions = '';
>>
>> @@ -487,11 +487,11 @@ kimchi.guest_edit_main = function() {
>>               }
>>
>>               var modeOptionsdata = [{
>> -                label: "Bridge",
>> -                value: "bridge"
>> +                label: i18n['KCHVMED6016M'],
>> +                value: 'bridge'
>>               }, {
>> -                label: "Vepa",
>> -                value: "vepa"
>> +                label: i18n['KCHVMED6017M'],
>> +                value: 'vepa'
>>               }];
>>               var modeOptions = '';
>>
>> diff --git a/ui/js/src/kimchi.template_edit_main.js 
>> b/ui/js/src/kimchi.template_edit_main.js
>> index 414a108..05bf1f4 100644
>> --- a/ui/js/src/kimchi.template_edit_main.js
>> +++ b/ui/js/src/kimchi.template_edit_main.js
>> @@ -616,9 +616,9 @@ kimchi.template_edit_main = function() {
>>                   //initialize type option
>>                   var typeOptionsdata = {};
>>                   var typeOptions = '';
>> -                typeOptionsdata.macvtap = 'macvtap';
>> -                typeOptionsdata.ovs = 'ovs';
>> -                typeOptionsdata.network = 'network';
>> +                typeOptionsdata.macvtap = i18n['KCHTMPL6009M'];
>> +                typeOptionsdata.ovs = i18n['KCHTMPL6010M'];
>> +                typeOptionsdata.network = i18n['KCHTMPL6011M'];
>>
>>                   $.each(typeOptionsdata, function(key, value) {
>>                       if (value === networkData.type) {
>> diff --git a/ui/pages/guest-edit.html.tmpl 
>> b/ui/pages/guest-edit.html.tmpl
>> index 9dd0c8f..09a2ac4 100644
>> --- a/ui/pages/guest-edit.html.tmpl
>> +++ b/ui/pages/guest-edit.html.tmpl
>> @@ -23,7 +23,7 @@
>>   <!DOCTYPE html>
>>   <html>
>>   <body>
>> -<div id="guest-edit-window" class="window modal-content">
>> +<div id="guest-edit-window" class="window modal-content" 
>> style="width:1280px; right:80px;">
>>       <div class="modal-header">
>>           <button type="button" class="close" data-dismiss="modal" 
>> aria-label="Close"><span aria-hidden="true">&times;</span></button>
>>           <h4 class="modal-title">$_("Edit Guest")</h4>
>> @@ -63,7 +63,7 @@
>>                   </div>
>>                   <div class="form-group" id="guest-console-panel" 
>> style="display:none;">
>>                       <label 
>> for="guest-edit-console">$_("Console")</label>
>> -                    <select id="guest-edit-console" name="console" 
>> class="form-control">
>> +                    <select id="guest-edit-console" 
>> data-none-selected-text="$_("Nothing selected")" name="console" 
>> class="form-control">
>>                           <option value="sclp">$_("sclp")</option>
>>                           <option value="virtio">$_("virtio")</option>
>>                       </select>
>> @@ -83,18 +83,18 @@
>>               <form role="tabpanel" class="guest-edit-interface 
>> tab-pane" id="form-guest-edit-interface">
>>                   <button class="add btn btn-primary"><i class="fa 
>> fa-plus-circle"></i>$_("Add")</button>
>>                   <div class="header">
>> -                    <span class="cell 
>> column-network">$_("Network")</span>
>> -                    <span class="cell column-type">$_("Type")</span>
>> -                    <span class="cell column-mac">$_("MAC 
>> Address")</span>
>> -                    <span class="cell column-ip">$_("IP 
>> Address")</span>
>> +                    <span class="cell column-network" 
>> data-toggle="tooltip" title="$_('Network')">$_("Network")</span>
>> +                    <span class="cell column-type" 
>> data-toggle="tooltip" title="$_('Type')">$_("Type")</span>
>> +                    <span class="cell column-mac" 
>> data-toggle="tooltip" title="$_('MAC Address')">$_("MAC Address")</span>
>> +                    <span class="cell column-ip" 
>> data-toggle="tooltip" title="$_('IP Address')">$_("IP Address")</span>
>>                       <span class="cell column-actions"><span 
>> class="sr-only">$_("Actions")</span></span>
>>                   </div>
>>                   <div class="header s390x" style="display:none">
>> -                    <span class="cell column-type">$_("Type")</span>
>> -                    <span class="cell 
>> column-network">$_("Network/Interface")</span>
>> -                    <span class="cell column-mode">$_("Mode")</span>
>> -                    <span class="cell column-mac">$_("MAC 
>> Address")</span>
>> -                    <span class="cell column-ip">$_("IP 
>> Address")</span>
>> +                    <span class="cell column-type" 
>> data-toggle="tooltip" title="$_('Type')">$_("Type")</span>
>> +                    <span class="cell column-network" 
>> data-toggle="tooltip" 
>> title="$_('Network/Interface')">$_("Network/Interface")</span>
>> +                    <span class="cell column-mode" 
>> data-toggle="tooltip" title="$_('Mode')">$_("Mode")</span>
>> +                    <span class="cell column-mac" 
>> data-toggle="tooltip" title="$_('MAC Address')">$_("MAC Address")</span>
>> +                    <span class="cell column-ip" 
>> data-toggle="tooltip" title="$_('IP Address')">$_("IP Address")</span>
>>                       <span class="cell column-actions"><span 
>> class="sr-only">$_("Actions")</span></span>
>>                   </div>
>>                   <div class="body"></div>
>> @@ -272,7 +272,7 @@
>>       <div class="item" id="{mac}">
>>           <span class="cell column-network">
>>               <span id="label-network-{id}" 
>> class="{viewMode}">{network}</span>
>> -            <select class="{editMode}"></select>
>> +            <select class="{editMode}" 
>> data-none-selected-text="$_("Nothing selected")"></select>
>>           </span>
>>           <span class="cell column-type">
>>               {type}
>> @@ -299,15 +299,15 @@
>>       <div class="item" id="{mac}">
>>           <span class="cell column-type">
>>             <span id="label-type-{id}" class="{viewMode}">{type}</span>
>> -          <select id="interface-s390x-type-{id}" 
>> class="{editMode}"></select>
>> +          <select id="interface-s390x-type-{id}" 
>> data-none-selected-text="$_("Nothing selected")" 
>> class="{editMode}"></select>
>>           </span>
>>           <span class="cell column-network">
>>               <span id="label-network-{id}" 
>> class="{viewMode}">{network}{source}</span>
>> -            <select id="interface-s390x-network-{id}" 
>> class="{editMode}"></select>
>> +            <select id="interface-s390x-network-{id}" 
>> data-none-selected-text="$_("Nothing selected")" 
>> class="{editMode}"></select>
>>           </span>
>>           <span class="cell column-mode">
>>               <span id="label-mode-{id}" 
>> class="{viewMode}">{mode}</span>
>> -            <select id="interface-s390x-mode-{id}" 
>> class="{editMode}"></select>
>> +            <select id="interface-s390x-mode-{id}" 
>> data-none-selected-text="$_("Nothing selected")" 
>> class="{editMode}"></select>
>>           </span>
>>           <span class="cell column-mac">
>>               <span id="label-mac-{id}" class="{viewMode}">{mac}</span>
>> diff --git a/ui/pages/guest-storage-add.html.tmpl 
>> b/ui/pages/guest-storage-add.html.tmpl
>> index dad3c3b..3b60b14 100644
>> --- a/ui/pages/guest-storage-add.html.tmpl
>> +++ b/ui/pages/guest-storage-add.html.tmpl
>> @@ -95,7 +95,7 @@
>>                               </div>
>>                               <div class="form-group volume">
>>                                   <label>$_("Storage Volume")</label>
>> -                                <select id="guest-disk-vol" 
>> class="selectpicker col-md-12 col-lg-12">
>> +                                <select id="guest-disk-vol" 
>> data-none-selected-text="$_("Nothing selected")" class="selectpicker 
>> col-md-12 col-lg-12">
>>                                   </select>
>>                                   <p class="help-block"><i class="fa 
>> fa-info-circle"></i> $_("Storage volume to be attached")</p>
>>                               </div>
>> diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
>> index cd23fcb..4510921 100644
>> --- a/ui/pages/i18n.json.tmpl
>> +++ b/ui/pages/i18n.json.tmpl
>> @@ -54,6 +54,9 @@
>>       "KCHTMPL6006M": "$_("Not Available")",
>>       "KCHTMPL6007M": "$_("Please check the invalid Storage Pools")",
>>       "KCHTMPL6008M": "$_("Please check the invalid Storage Pools or 
>> Paths")",
>> +    "KCHTMPL6009M": "$_("macvtap")",
>> +    "KCHTMPL6010M": "$_("ovs")",
>> +    "KCHTMPL6011M": "$_("network")",
>>
>>       "KCHVM6001M": "$_("This will delete the %1 virtual machine and 
>> its virtual disks. This operation cannot be undone. Would you like to 
>> continue?")",
>>       "KCHVM6002M": "$_("Power off Confirmation")",
>> @@ -90,6 +93,13 @@
>>       "KCHVMED6010M": "$_("Successfully attached device to VM")",
>>       "KCHVMED6011M": "$_("Successfully detached device from VM")",
>>       "KCHVMED6012M": "$_("Following devices will be affected, 
>> confirm?")",
>> +    "KCHVMED6013M": "$_("macvtap")",
>> +    "KCHVMED6014M": "$_("ovs")",
>> +    "KCHVMED6015M": "$_("network")",
>> +    "KCHVMED6016M": "$_("Bridge")",
>> +    "KCHVMED6017M": "$_("Vepa")",
>> +    "KCHVMED6018M": "$_("None")",
>> +
>>
>>       "KCHNET6001M": "$_("unavailable")",
>>       "KCHNET6002M": "$_("This action will interrupt network 
>> connectivity for any virtual machine that depend on the %1 network.")",
>> diff --git a/ui/pages/tabs/guests.html.tmpl 
>> b/ui/pages/tabs/guests.html.tmpl
>> index 37c9ce2..5d49e1c 100644
>> --- a/ui/pages/tabs/guests.html.tmpl
>> +++ b/ui/pages/tabs/guests.html.tmpl
>> @@ -50,13 +50,13 @@
>>                   <ul class="wok-guest-list">
>>                       <li class="wok-guest-list-header">
>>                         <span class="column-state"><span 
>> class="sr-only">$_("State")</span></span><!--
>> -                      --><span class="column-name"><span>$_("Guest 
>> Name ID")</span></span><!--
>> -                      --><span class="column-type"><span>$_("OS 
>> Type")</span></span><!--
>> -                      --><span 
>> class="column-vnc"><span>$_("VNC")</span></span><!--
>> -                      --><span 
>> class="column-processors"><span>$_("Processors 
>> Utilization")</span></span><!--
>> -                      --><span 
>> class="column-memory"><span>$_("Memory Utilization")</span></span><!--
>> -                      --><span 
>> class="column-storage"><span>$_("Storage I/O")</span></span><!--
>> -                      --><span 
>> class="column-network"><span>$_("Network I/O")</span></span><!--
>> +                      --><span class="column-name"><span 
>> data-toggle="tooltip" title="$_('Guest Name ID')">$_("Guest Name 
>> ID")</span></span><!--
>> +                      --><span class="column-type"><span 
>> data-toggle="tooltip" title="$_('OS Type')">$_("OS 
>> Type")</span></span><!--
>> +                      --><span class="column-vnc"><span 
>> data-toggle="tooltip" title="$_('VNC')">$_("VNC")</span></span><!--
>> +                      --><span class="column-processors"><span 
>> data-toggle="tooltip" title="$_('Processors 
>> Utilization')">$_("Processors Utilization")</span></span><!--
>> +                      --><span class="column-memory"><span 
>> data-toggle="tooltip" title="$_('Memory Utilization')">$_("Memory 
>> Utilization")</span></span><!--
>> +                      --><span class="column-storage"><span 
>> data-toggle="tooltip" title="$_('Storage I/O')">$_("Storage 
>> I/O")</span></span><!--
>> +                      --><span class="column-network"><span 
>> data-toggle="tooltip" title="$_('Network I/O')">$_("Network 
>> I/O")</span></span><!--
>>                         --><span class="column-action" 
>> style="display:none">
>>                             <span 
>> class="sr-only">$_("Actions")</span><!--
>>                         --></span>
>> diff --git a/ui/pages/tabs/storage.html.tmpl 
>> b/ui/pages/tabs/storage.html.tmpl
>> index 5468138..7c1ed39 100644
>> --- a/ui/pages/tabs/storage.html.tmpl
>> +++ b/ui/pages/tabs/storage.html.tmpl
>> @@ -41,13 +41,13 @@
>>               <div id='storageGrid' class="hidden">
>>                   <div>
>>                       <span class="column-state"><span 
>> class="sr-only">$_("State")</span></span><!--
>> -                    --><span class="column-name">$_("Name")</span><!--
>> -                    --><span class="column-type">$_("Type")</span><!--
>> -                    --><span 
>> class="column-location">$_("Location")</span><!--
>> -                    --><span 
>> class="column-usage">$_("%Used")</span><!--
>> -                    --><span 
>> class="column-allocated">$_("Allocated")</span><!--
>> -                    --><span 
>> class="column-capacity">$_("Capacity")</span><!--
>> -                    --><span 
>> class="column-disks">$_("Disks")</span><!--
>> +                    --><span class="column-name" 
>> data-taggle="tooltip" title="$_('Name')">$_("Name")</span><!--
>> +                    --><span class="column-type" 
>> data-taggle="tooltip" title="$_('Type')">$_("Type")</span><!--
>> +                    --><span class="column-location" 
>> data-taggle="tooltip" title="$_('Location')">$_("Location")</span><!--
>> +                    --><span class="column-usage" 
>> data-taggle="tooltip" title="$_('%Used')">$_("%Used")</span><!--
>> +                    --><span class="column-allocated" 
>> data-taggle="tooltip" title="$_('Allocated')">$_("Allocated")</span><!--
>> +                    --><span class="column-capacity" 
>> data-taggle="tooltip" title="$_('Capacity')">$_("Capacity")</span><!--
>> +                    --><span class="column-disks" 
>> data-taggle="tooltip" title="$_('Disks')">$_("Disks")</span><!--
>>                       --><span class="column-action" 
>> display="none"><span class="sr-only">$_("Actions")</span></span>
>>                   </div>
>>                   <div id="storagepoolsList" class="list-storage 
>> empty-when-logged-off"></div>
>> @@ -87,8 +87,8 @@
>>            <span class='column-state' val="{state}"><span 
>> class='storage-state {state}'><i class="fa 
>> fa-power-off"></i></span></span><!--
>>       --><span class='column-name' title="{name}" 
>> val="{name}">{name}</span><!--
>>       --><span class='column-type' val="{type}">{type}</span><!--
>> -    --><span class='column-location' val="{path}">{path}</span><!--
>> -    --><span class='column-usage {state}' val="{usage}" ><span 
>> class='usage-icon {icon}'>{usage}</span>%</span><!--
>> +    --><span class='column-location' title="{path}" 
>> val="{path}">{path}</span><!--
>> +    --><span class='column-usage {state}' val="{usage}" ><span 
>> class='usage-icon {icon}'>{usage}</span>$_("%")</span><!--
>>       --><span class='column-allocated' 
>> val="{allocated}">{allocated}</span><!--
>>       --><span class='column-capacity' 
>> val="{capacity}">{capacity}</span><!--
>>       --><span class="column-disks {state}"><div class="handle 
>> arrow-down"></div></span><!--
>> @@ -108,7 +108,8 @@
>>            <div class="volumes">
>>               <div id="volume-{name}" class="volumeslist" 
>> data-name="{name}" data-type="{type}">
>>                   <div class="row">
>> -                    <div class="pull-left">
>> +                    <div class="col-sm-7">
>> +                        <div class="btn-group">
>>                           <div class="dropdown menu-flat pool-action">
>>                               <button class="btn btn-primary 
>> dropdown-toggle" type="button" data-toggle="dropdown" 
>> aria-expanded="false" aria-haspopup="true"><span 
>> class="edit-alt"></span>$_("Actions")<span 
>> class="caret"></span></button>
>>                               <ul class="dropdown-menu actionsheet">
>> @@ -119,14 +120,17 @@
>>                                   <li class="disabled critical"><a 
>> href="#" class="volume-delete" data-name="{name}"><i class="fa 
>> fa-minus-circle"></i> $_("Delete")</a></li>
>>                               </ul>
>>                           </div>
>> -                        <button type="button" class="btn btn-default 
>> toggle-gallery"><span class="text">$_('View Gallery')</span> <i 
>> class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i><i 
>> class="fa fa-angle-right"></i></button>
>> +                      </div>
>> +                      <button type="button" class="btn btn-default 
>> toggle-gallery"><span class="text">$_('View Gallery')</span> <i 
>> class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i><i 
>> class="fa fa-angle-right"></i></button>
>>                       </div>
>> +                    <div class="col-sm-5">
>>                       <div class="pull-right">
>>                           <label><span 
>> class="sr-only">$_('Filter:')</span>
>>                               <input type="text" class="filter 
>> form-control search" placeholder="$_('Filter')">
>>                           </label>
>>                       </div>
>>                   </div>
>> +              </div>
>>                   <div class="wok-datagrid wok-list">
>>                       <div class="wok-datagrid-header">
>>                           <span 
>> class="column-name">$_('Name')</span><!--
>> @@ -168,12 +172,12 @@
>>                       <input type="checkbox" class="wok-checkbox" 
>> name="selected-volume[]" id="{checkbox}" value="{name}">
>>                       <label class="volume-name volume-name-filter" 
>> for="{checkbox}"><span class="volume-inline-progress hidden"><span 
>> class="wok-loading-icon"></span></span> {name}</label><!--
>>                      --></span><!--
>> -                   --><span class="column-format 
>> volume-format-filter"><span 
>> class="gallery-header">$_('Format')</span><span 
>> class="format-text">{format}</span></span><!--
>> -                   --><span class="column-type 
>> volume-type-filter"><span 
>> class="gallery-header">$_('Type')</span>{type}</span><!--
>> +                   --><span class="column-format 
>> volume-format-filter"><span class="gallery-header" 
>> title="$_('Format')">$_('Format')</span><span 
>> class="format-text">{format}</span></span><!--
>> +                   --><span class="column-type 
>> volume-type-filter"><span class="gallery-header" 
>> title="$_('Type')">$_('Type')</span>{type}</span><!--
>>                      --><span class="column-used-by 
>> volume-used-by-filter"><i class="fa fa-exclamation-circle" 
>> data-toggle="tooltip" title="$_('Used by the following VMs:') 
>> {used_by_formatted}" data-placement="bottom" 
>> data-original-title="$_('Used by the following VMs:') 
>> {used_by_formatted}"></i><span class="format-text" 
>> data-toggle="tooltip" title="$_('Used by the following VMs:') 
>> {used_by_formatted}" data-placement="bottom" 
>> data-original-title="$_('Used by the following VMs:') 
>> {used_by_formatted}">{used_by_text}</span></span><!--
>>                      --><span class="column-used"><span 
>> role="presentation" class="volume-icon {capacityIcon}"></span> 
>> {capacityLevel}%</span><!--
>> -                   --><span class="column-allocated"><span 
>> class="gallery-header">$_('Allocation')</span>{allocation}</span><!--
>> -                   --><span class="column-capacity"><span 
>> class="gallery-header">$_('Capacity')</span>{capacity}</span><!--
>> +                   --><span class="column-allocated"><span 
>> class="gallery-header" 
>> title="$_('Allocation')">$_('Allocation')</span>{allocation}</span><!--
>> +                   --><span class="column-capacity"><span 
>> class="gallery-header" 
>> title="$_('Capacity')">$_('Capacity')</span>{capacity}</span><!--
>>                      --><span class="column-progress hidden"><span 
>> class="progress-status"></span> <span 
>> class="progress-transferred"></span>
>>                           </span>
>>               </div>
>> diff --git a/ui/pages/tabs/templates.html.tmpl 
>> b/ui/pages/tabs/templates.html.tmpl
>> index 2207292..f947bc9 100644
>> --- a/ui/pages/tabs/templates.html.tmpl
>> +++ b/ui/pages/tabs/templates.html.tmpl
>> @@ -37,15 +37,15 @@
>>                   </div>
>>
>>                   <div class="form-group pull-right">
>> -                    <div class="btn-group bootstrap-select control">
>> -                        <button type="button" class="btn 
>> dropdown-toggle form-control selectpicker btn-default sort-button" 
>> data-toggle="dropdown" title="Status" aria-expanded="false"><span 
>> class="filter-option pull-left">$_("Status")</span>&nbsp;<span 
>> class="caret"></span></button>
>> +                    <div class="btn-group bootstrap-select control" 
>> id="templatestatusselect">
>> +                        <button type="button" class="btn 
>> dropdown-toggle form-control selectpicker btn-default sort-button" 
>> data-toggle="dropdown" aria-expanded="false"><span 
>> class="filter-option pull-left" data-placement="auto bottom" 
>> data-toggle="tooltip" 
>> title="$_('Status')">$_("Status")</span>&nbsp;<span 
>> class="caret"></span></button>
>>                           <div class="dropdown-menu open" 
>> style="max-height: 668px; overflow: hidden; min-height: 0px;padding: 
>> 0px;">
>>                               <ul class="dropdown-menu inner 
>> selectpicker" role="menu" style="max-height: 656px; overflow-y: auto; 
>> min-height: 0px;">
>> -                                <li nwAct="sort"><a href="#" 
>> class="sort" data-sort="name-filter">$_("Name")</a></li>
>> -                                <li nwAct="clone"><a href="#" 
>> class="sort" data-sort="os-type-filter">$_("OS")</a></li>
>> -                                <li nwAct="clone"><a href="#" 
>> class="sort" data-sort="os-version-filter">$_("Version")</a></li>
>> -                                <li nwAct="clone"><a href="#" 
>> class="sort" data-sort="cpus-filter">$_("Current CPUs")</a></li>
>> -                                <li nwAct="clone"><a href="#" 
>> class="sort" data-sort="memory-filter">$_("Memory")</a></li>
>> +                                <li nwAct="sort"><a href="#" 
>> class="sort" data-sort="name-filter" data-placement="auto bottom" 
>> data-toggle="tooltip" title="$_('Name')">$_("Name")</a></li>
>> +                                <li nwAct="clone"><a href="#" 
>> class="sort" data-sort="os-type-filter" data-placement="auto bottom" 
>> data-toggle="tooltip" title="$_('OS')">$_("OS")</a></li>
>> +                                <li nwAct="clone"><a href="#" 
>> class="sort" data-sort="os-version-filter" data-placement="auto 
>> bottom" data-toggle="tooltip" 
>> title="$_('Version')">$_("Version")</a></li>
>> +                                <li nwAct="clone"><a href="#" 
>> class="sort" data-sort="cpus-filter" data-placement="auto bottom" 
>> data-toggle="tooltip" title="$_('Current CPUs')">$_("Current 
>> CPUs")</a></li>
>> +                                <li nwAct="clone"><a href="#" 
>> class="sort" data-sort="memory-filter" data-placement="auto bottom" 
>> data-toggle="tooltip" title="$_('Memory')">$_("Memory")</a></li>
>>                               </ul>
>>                           </div>
>>                       </div>
>> @@ -57,11 +57,11 @@
>>               <div id="alert-container"></div>
>>               <ul id="templates-grid" class="wok-vm-list hidden 
>> empty-when-logged-off">
>>                   <li class="wok-vm-header">
>> -                        <span class="column-name">$_("Template Name 
>> (ID)")</span><!--
>> -                  --><span class="column-type">$_("OS")</span><!--
>> -                  --><span 
>> class="column-version">$_("Version")</span><!--
>> -                  --><span class="column-processors">$_("Current 
>> CPUs")</span><!--
>> -                  --><span 
>> class="column-memory">$_("Memory")</span><!--
>> +                        <span class="column-name" 
>> data-placement="auto bottom" data-toggle="tooltip" 
>> title="$_('Template Name (ID)')">$_("Template Name (ID)")</span><!--
>> +                  --><span class="column-type" data-placement="auto 
>> bottom" data-toggle="tooltip" title="$_('OS')">$_("OS")</span><!--
>> +                  --><span class="column-version" 
>> data-placement="auto bottom" data-toggle="tooltip" 
>> title="$_('Version')">$_("Version")</span><!--
>> +                  --><span class="column-processors" 
>> data-placement="auto bottom" data-toggle="tooltip" title="$_('Current 
>> CPUs')">$_("Current CPUs")</span><!--
>> +                  --><span class="column-memory" 
>> data-placement="auto bottom" data-toggle="tooltip" 
>> title="$_('Memory')">$_("Memory")</span><!--
>>                     --><span class="column-action" 
>> style="display:none"><span class="sr-only">$_("Actions")</span></span>
>>                       </li>
>>                       <li>
>> diff --git a/ui/pages/template-edit.html.tmpl 
>> b/ui/pages/template-edit.html.tmpl
>> index 728ce6d..4b5a407 100644
>> --- a/ui/pages/template-edit.html.tmpl
>> +++ b/ui/pages/template-edit.html.tmpl
>> @@ -218,13 +218,13 @@
>>           <span class="template-storage-cell source" 
>> style="display:none">
>>               <input class="template-storage-source" 
>> value={storageSource} type="text" style="display:none" />
>>               <select id="source">
>> -                <option value="pool">pool</option>
>> -                <option value="path">path</option>
>> +                <option value="pool">$_("pool")</option>
>> +                <option value="path">$_("path")</option>
>>               </select>
>>           </span>
>>           <span class="template-storage-cell storage-pool">
>>               <input class="template-storage-name" 
>> value="{storageName}" type="text" style="display:none" />
>> -            <select id="selectStorageName-{storageIndex}" 
>> class="selectStorageName"></select>
>> +            <select id="selectStorageName-{storageIndex}" 
>> data-none-selected-text="$_('Nothing selected')" 
>> class="selectStorageName"></select>
>>           </span>
>>           <span class="template-storage-cell storage-path" 
>> style="display:none">
>>               <input class="template-storage-path storage-path 
>> form-control" value="{storagePath}" type="text" />
>> @@ -238,12 +238,12 @@
>>           <span class="template-storage-cell format">
>>               <input class="template-storage-disk-format" 
>> value={storageDiskFormat} type="text" style="display:none" />
>>               <select id="diskFormat">
>> -               <option value="qcow2">qcow2</option>
>> -               <option value="raw">raw</option>
>> -               <option value="qcow">qcow</option>
>> -               <option value="qed">qed</option>
>> -               <option value="vmdk">vmdk</option>
>> -               <option value="vpc">vpc</option>
>> +               <option value="qcow2">$_("qcow2")</option>
>> +               <option value="raw">$_("raw")</option>
>> +               <option value="qcow">$_("qcow")</option>
>> +               <option value="qed">$_("qed")</option>
>> +               <option value="vmdk">$_("vmdk")</option>
>> +               <option value="vpc">$_("vpc")</option>
>>               </select>
>>           </span>
>>           <span class="pull-right">
>> @@ -254,7 +254,7 @@
>>   <script id="template-interface-tmpl" type="text/html">
>>       <div class="item" id={networkID}>
>>           <span class="template-interface-cell network">
>> -            <select></select>
>> +            <select data-none-selected-text="$_('Nothing 
>> selected')"></select>
>>           </span>
>>           <span class="template-interface-cell type">
>>               <input value={type} readonly=true class="form-control" 
>> type="text" />
>> @@ -270,13 +270,13 @@
>>               <select></select>
>>           </span>
>>           <span class="template-interface-cell network">
>> -            <select></select>
>> +            <select data-none-selected-text="$_('Nothing 
>> selected')"></select>
>>           </span>
>>           <span class="template-interface-cell mode">
>> -            <span class="label-mode hide">None</span>
>> +            <span class="label-mode hide">$_("None")</span>
>>               <select>
>> -                <option value="bridge">bridge</option>
>> -                <option value="vepa">vepa</option>
>> +                <option value="bridge">$_("bridge")</option>
>> +                <option value="vepa">$_("vepa")</option>
>>               </select>
>>           </span>
>>           <span class="pull-right">
>




More information about the Kimchi-devel mailing list