apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-11-03 04:12:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

some styling fixes

Browse Source 
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2020-01-10 12:29:00 +05:30
parent 457561bf88
commit e27a9670f0
1 changed files with 33 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
ui/src/components/view/InfoCard.vue
View File

@ -25,6 +25,7 @@
<slot name="avatar"> <slot name="avatar">
<os-logo v-if="resource.ostypeid || resource.ostypename" :osId="resource.ostypeid" :osName="resource.ostypename" size="4x" /> <os-logo v-if="resource.ostypeid || resource.ostypename" :osId="resource.ostypeid" :osName="resource.ostypename" size="4x" />
<a-icon v-else style="font-size: 36px" :type="$route.meta.icon" /> <a-icon v-else style="font-size: 36px" :type="$route.meta.icon" />
<console style="margin-left: -15px" :resource="resource" size="default" v-if="resource.id" />
</slot> </slot>
</div> </div>
<slot name="name"> <slot name="name">
@ -53,7 +54,6 @@
<a-tag v-if="'isdynamicallyscalable' in resource" :color="resource.isdynamicallyscalable ? 'green': 'red'"> <a-tag v-if="'isdynamicallyscalable' in resource" :color="resource.isdynamicallyscalable ? 'green': 'red'">
{{ $t('isdynamicallyscalable') }} {{ $t('isdynamicallyscalable') }}
</a-tag> </a-tag>
<console :resource="resource" size="default" v-if="resource.id" />
</div> </div>
</slot> </slot>
</div> </div>
@ -94,25 +94,25 @@
<a-icon type="appstore" /> <a-icon type="appstore" />
<span v-if="resource.cpunumber && resource.cpuspeed">{{ resource.cpunumber }} CPU x {{ parseFloat(resource.cpuspeed / 1000.0).toFixed(2) }} Ghz</span> <span v-if="resource.cpunumber && resource.cpuspeed">{{ resource.cpunumber }} CPU x {{ parseFloat(resource.cpuspeed / 1000.0).toFixed(2) }} Ghz</span>
<span v-else-if="resource.cputotal">{{ resource.cputotal }}</span> <span v-else-if="resource.cputotal">{{ resource.cputotal }}</span>
<span </div>
v-if="resource.cpuused" <div>
style="display: flex; padding-left: 25px"> <span v-if="resource.cpuused">
{{ $t('cpuusedghz') }}
<a-progress <a-progress
v-if="resource.cpuused" v-if="resource.cpuused"
style="padding-left: 10px" style="width: 85%"
size="small" size="small"
status="active" status="active"
:percent="parseFloat(resource.cpuused)" /> :percent="parseFloat(resource.cpuused)"
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('cpuusedghz')"
/>
</span> </span>
<span <span v-if="resource.cpuallocated">
v-if="resource.cpuallocated"
style="display: flex; padding-left: 25px">
{{ $t('cpuallocatedghz') }}
<a-progress <a-progress
style="padding-left: 10px" style="width: 85%"
size="small" size="small"
:percent="parseFloat(resource.cpuallocated)" /> :percent="parseFloat(resource.cpuallocated)"
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('cpuallocatedghz')"
/>
</span> </span>
</div> </div>
</div> </div>
@ -120,15 +120,16 @@
<div class="resource-detail-item__label">{{ $t('memory') }}</div> <div class="resource-detail-item__label">{{ $t('memory') }}</div>
<div class="resource-detail-item__details"> <div class="resource-detail-item__details">
<a-icon type="bulb" />{{ resource.memory }} MB Memory <a-icon type="bulb" />{{ resource.memory }} MB Memory
<span </div>
v-if="resource.memorykbs && resource.memoryintfreekbs" <div>
style="display: flex; padding-left: 25px"> <span v-if="resource.memorykbs && resource.memoryintfreekbs">
{{ $t('memoryusedgb') }}
<a-progress <a-progress
style="padding-left: 10px" style="width: 85%"
size="small" size="small"
status="active" status="active"
:percent="Number(parseFloat(100.0 * (resource.memorykbs - resource.memoryintfreekbs) / resource.memorykbs).toFixed(2))" /> :percent="Number(parseFloat(100.0 * (resource.memorykbs - resource.memoryintfreekbs) / resource.memorykbs).toFixed(2))"
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('memoryusedgb')"
/>
</span> </span>
</div> </div>
</div> </div>
@ -136,24 +137,24 @@
<div class="resource-detail-item__label">{{ $t('memory') }}</div> <div class="resource-detail-item__label">{{ $t('memory') }}</div>
<div class="resource-detail-item__details"> <div class="resource-detail-item__details">
<a-icon type="bulb" />{{ resource.memorytotalgb }} Memory <a-icon type="bulb" />{{ resource.memorytotalgb }} Memory
<span </div>
v-if="resource.memoryusedgb" <div>
style="display: flex; padding-left: 25px"> <span v-if="resource.memoryusedgb">
{{ $t('memoryusedgb') }}
<a-progress <a-progress
style="padding-left: 10px" style="width: 85%"
size="small" size="small"
status="active" status="active"
:percent="Number(parseFloat(100.0 * parseFloat(resource.memoryusedgb) / parseFloat(resource.memorytotalgb)).toFixed(2))" /> :percent="Number(parseFloat(100.0 * parseFloat(resource.memoryusedgb) / parseFloat(resource.memorytotalgb)).toFixed(2))"
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('memoryusedgb')"
/>
</span> </span>
<span <span v-if="resource.memoryallocatedgb">
v-if="resource.memoryallocatedgb"
style="display: flex; padding-left: 25px">
{{ $t('memoryallocatedgb') }}
<a-progress <a-progress
style="padding-left: 10px" style="width: 85%"
size="small" size="small"
:percent="Number(parseFloat(100.0 * parseFloat(resource.memoryallocatedgb) / parseFloat(resource.memorytotalgb)).toFixed(2))" /> :percent="Number(parseFloat(100.0 * parseFloat(resource.memoryallocatedgb) / parseFloat(resource.memorytotalgb)).toFixed(2))"
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('memoryallocatedgb')"
/>
</span> </span>
</div> </div>
</div> </div>
@ -767,21 +768,18 @@ export default {
.avatar { .avatar {
margin-right: 20px; margin-right: 20px;
overflow: hidden; overflow: hidden;
border-radius: 50%;
min-width: 50px; min-width: 50px;
img { img {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
} }
.name { .name {
margin-bottom: 0; margin-bottom: 0;
font-size: 16px; font-size: 18px;
line-height: 1; line-height: 1;
font-weight: bold;
word-wrap: break-word; word-wrap: break-word;
text-align: left; text-align: left;
} }
@ -869,7 +867,6 @@ export default {
.ant-tag { .ant-tag {
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 4px 10px;
height: auto; height: auto;
} }