[Kimchi-devel] [PATCH] [Kimchi 3/4] Multi-culture UI issues for kimchi plugin Storage module
rajgupta at linux.vnet.ibm.com
rajgupta at linux.vnet.ibm.com
Wed Dec 14 11:09:03 UTC 2016
From: Rajat Gupta <rajat.triumph at gmail.com>
Externalized all the html text content
Html changes done for virtualization storage listing table to avoid text overlap in other languages
CSS changes done for virtualization storage listing table columns to avoid strings overflow in other languages
Signed-off-by: Rajat Gupta <rajat.triumph at gmail.com>
---
ui/css/kimchi.css | 61 ++++++++++++++++++++++++++++++----------
ui/css/src/modules/_storage.scss | 61 ++++++++++++++++++++++++++++++----------
ui/pages/tabs/storage.html.tmpl | 34 ++++++++++++----------
3 files changed, 111 insertions(+), 45 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index ccb29fa..852f9a0 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -2608,7 +2608,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;
@@ -2670,13 +2670,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 {
@@ -2767,7 +2771,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;
}
}
@@ -2803,7 +2807,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;
}
}
@@ -2858,14 +2862,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;
}
}
@@ -2895,29 +2899,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,
@@ -2946,23 +2965,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/_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/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
index 5468138..9675579 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" title="$_('Name')">$_("Name")</span><!--
+ --><span class="column-type" title="$_('Type')">$_("Type")</span><!--
+ --><span class="column-location" title="$_('Location')">$_("Location")</span><!--
+ --><span class="column-usage" title="$_('%Used')">$_("%Used")</span><!--
+ --><span class="column-allocated" title="$_('Allocated')">$_("Allocated")</span><!--
+ --><span class="column-capacity" title="$_('Capacity')">$_("Capacity")</span><!--
+ --><span class="column-disks" 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>
--
2.1.0
More information about the Kimchi-devel
mailing list