[Kimchi-devel] [PATCH] [Kimchi] Bug fix: Proper display storage volume content on gallery view

Aline Manera posted 1 patch 4 years, 1 month ago
Failed in applying to current master (apply log)
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(-)

[Kimchi-devel] [PATCH] [Kimchi] Bug fix: Proper display storage volume content on gallery view

Posted by Aline Manera 4 years, 1 month ago
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

Re: [Kimchi-devel] [PATCH] [Kimchi] Bug fix: Proper display storage volume content on gallery view

Posted by Daniel Henrique Barboza 4 years, 1 month ago
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

Re: [Kimchi-devel] [PATCH] [Kimchi] Bug fix: Proper display storage volume content on gallery view

Posted by Aline Manera 4 years, 1 month ago
Applied. Thanks.

Regards,

Aline Manera

_______________________________________________
Kimchi-devel mailing list
Kimchi-devel@ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel

Re: [Kimchi-devel] [PATCH] [Kimchi] Bug fix: Proper display storage volume content on gallery view

Posted by Aline Manera 4 years, 1 month ago
Applied. Thanks.

Regards,

Aline Manera

_______________________________________________
Kimchi-devel mailing list
Kimchi-devel@ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel