ui/css/kimchi.css | 10 +++++----- ui/css/src/modules/_storage.scss | 10 +++++----- ui/pages/tabs/storage.html.tmpl | 6 +++--- 3 files changed, 13 insertions(+), 13 deletions(-)
On Storage volume gallery view, the volume box content was a mess. Fix it.
Signed-off-by: Aline Manera <alinefm@linux.vnet.ibm.com>
---
ui/css/kimchi.css | 10 +++++-----
ui/css/src/modules/_storage.scss | 10 +++++-----
ui/pages/tabs/storage.html.tmpl | 6 +++---
3 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 2d44919..948b888 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -2683,7 +2683,7 @@ ul {
#storage-root-container .volumes .wok-gallery .volume-box-inner {
padding: 0 16px;
width: 409px;
- height: 150px;
+ height: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
@@ -2745,8 +2745,8 @@ ul {
#storage-root-container .volumes .wok-gallery span.column-format,
#storage-root-container .volumes .wok-gallery span.column-type {
order: 3;
- width: 142px;
- margin-top: -5px;
+ width: auto;
+ margin: 5px 0px;
}
#storage-root-container .volumes .wok-gallery span.gallery-header {
@@ -2937,14 +2937,14 @@ ul {
@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: 250px;
+ width: 450px;
}
}
@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: 300px;
+ width: 500px;
}
}
diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss
index 0123009..cf81d1b 100644
--- a/ui/css/src/modules/_storage.scss
+++ b/ui/css/src/modules/_storage.scss
@@ -240,7 +240,7 @@
.volume-box-inner {
padding: 0 16px;
width: 409px;
- height: 150px;
+ height: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
@@ -303,8 +303,8 @@
span.column-format,
span.column-type {
order: 3;
- width: 142px;
- margin-top: -5px;
+ width: auto;
+ margin: 5px 0px;
}
span.gallery-header {
@@ -457,10 +457,10 @@
> span.column-name {
width: 202px;
@media (min-width: $screen-md) {
- width: 250px;
+ width: 450px;
}
@media (min-width: $screen-lg) {
- width: 300px;
+ width: 500px;
}
label {
diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
index 9675579..ad88b65 100644
--- a/ui/pages/tabs/storage.html.tmpl
+++ b/ui/pages/tabs/storage.html.tmpl
@@ -1,7 +1,7 @@
#*
* Project Kimchi
*
- * Copyright IBM Corp, 2013-2016
+ * Copyright IBM Corp, 2013-2017
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -172,10 +172,10 @@
<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-used"><span role="presentation" class="volume-icon {capacityIcon}"></span> {capacityLevel}%</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-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" 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>
--
2.9.3
_______________________________________________
Kimchi-devel mailing list
Kimchi-devel@ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel
Reviewed-by: Daniel Barboza <danielhb@linux.vnet.ibm.com> On 03/23/2017 11:55 AM, Aline Manera wrote: > On Storage volume gallery view, the volume box content was a mess. Fix it. > > Signed-off-by: Aline Manera <alinefm@linux.vnet.ibm.com> > --- > ui/css/kimchi.css | 10 +++++----- > ui/css/src/modules/_storage.scss | 10 +++++----- > ui/pages/tabs/storage.html.tmpl | 6 +++--- > 3 files changed, 13 insertions(+), 13 deletions(-) > > diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css > index 2d44919..948b888 100644 > --- a/ui/css/kimchi.css > +++ b/ui/css/kimchi.css > @@ -2683,7 +2683,7 @@ ul { > #storage-root-container .volumes .wok-gallery .volume-box-inner { > padding: 0 16px; > width: 409px; > - height: 150px; > + height: auto; > display: flex; > flex-flow: row wrap; > justify-content: space-around; > @@ -2745,8 +2745,8 @@ ul { > #storage-root-container .volumes .wok-gallery span.column-format, > #storage-root-container .volumes .wok-gallery span.column-type { > order: 3; > - width: 142px; > - margin-top: -5px; > + width: auto; > + margin: 5px 0px; > } > > #storage-root-container .volumes .wok-gallery span.gallery-header { > @@ -2937,14 +2937,14 @@ ul { > @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: 250px; > + width: 450px; > } > } > > @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: 300px; > + width: 500px; > } > } > > diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss > index 0123009..cf81d1b 100644 > --- a/ui/css/src/modules/_storage.scss > +++ b/ui/css/src/modules/_storage.scss > @@ -240,7 +240,7 @@ > .volume-box-inner { > padding: 0 16px; > width: 409px; > - height: 150px; > + height: auto; > display: flex; > flex-flow: row wrap; > justify-content: space-around; > @@ -303,8 +303,8 @@ > span.column-format, > span.column-type { > order: 3; > - width: 142px; > - margin-top: -5px; > + width: auto; > + margin: 5px 0px; > } > > span.gallery-header { > @@ -457,10 +457,10 @@ > > span.column-name { > width: 202px; > @media (min-width: $screen-md) { > - width: 250px; > + width: 450px; > } > @media (min-width: $screen-lg) { > - width: 300px; > + width: 500px; > } > > label { > diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl > index 9675579..ad88b65 100644 > --- a/ui/pages/tabs/storage.html.tmpl > +++ b/ui/pages/tabs/storage.html.tmpl > @@ -1,7 +1,7 @@ > #* > * Project Kimchi > * > - * Copyright IBM Corp, 2013-2016 > + * Copyright IBM Corp, 2013-2017 > * > * Licensed under the Apache License, Version 2.0 (the "License"); > * you may not use this file except in compliance with the License. > @@ -172,10 +172,10 @@ > <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-used"><span role="presentation" class="volume-icon {capacityIcon}"></span> {capacityLevel}%</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-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" 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> _______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
Applied. Thanks. Regards, Aline Manera _______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
Applied. Thanks. Regards, Aline Manera _______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
© 2016 - 2024 Red Hat, Inc.