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

[Daniel Henrique Barboza]

Reviewed-by: Daniel Barboza <danielhb at 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 at 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>