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

On Storage volume gallery view, the volume box content was a mess. Fix it. Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com&gt; --- 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>