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

[Aline Manera]

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>
-- 
2.9.3