accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-09-20 11:29:00 +00:00
Code Issues Releases Activity

fix: UI alignment

Browse Source
This commit is contained in:
Faris Ansari 2019-11-28 00:09:30 +05:30
parent d5a88398a8
commit e7aef6d5ee
1 changed files with 39 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/pages/Dashboard/UnpaidInvoices.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex -mx-4">
<div class="w-1/2 px-4" v-for="invoice in invoices" :key="invoice.title">
<div class="w-1/2 px-4 flex flex-col justify-between" v-for="invoice in invoices" :key="invoice.title">
<SectionHeader>
<template slot="title">{{ invoice.title }}</template>
<PeriodSelector
@ -19,45 +19,47 @@
<feather-icon name="plus" class="w-4 h-4 text-white" />
</Button>
</SectionHeader>
<div class="mt-6 flex justify-between">
<div
class="text-sm"
:class="{ 'bg-gray-200 text-gray-200 rounded': !invoice.hasData }"
>
{{ frappe.format(invoice.paid, 'Currency') }}
<span :class="{ 'text-gray-600': invoice.hasData }">{{
_('Paid')
}}</span>
<div>
<div class="mt-6 flex justify-between">
<div
class="text-sm"
:class="{ 'bg-gray-200 text-gray-200 rounded': !invoice.hasData }"
>
{{ frappe.format(invoice.paid, 'Currency') }}
<span :class="{ 'text-gray-600': invoice.hasData }">{{
_('Paid')
}}</span>
</div>
<div
class="text-sm"
:class="{ 'bg-gray-200 text-gray-200 rounded': !invoice.hasData }"
>
{{ frappe.format(invoice.unpaid, 'Currency') }}
<span :class="{ 'text-gray-600': invoice.hasData }">{{
_('Unpaid')
}}</span>
</div>
</div>
<div
class="text-sm"
:class="{ 'bg-gray-200 text-gray-200 rounded': !invoice.hasData }"
>
{{ frappe.format(invoice.unpaid, 'Currency') }}
<span :class="{ 'text-gray-600': invoice.hasData }">{{
_('Unpaid')
}}</span>
<div class="mt-2 relative">
<div
class="w-full h-4 rounded"
:class="
invoice.hasData && invoice.color == 'blue'
? 'bg-blue-200'
: 'bg-gray-200'
"
></div>
<div
class="absolute inset-0 h-4 rounded"
:class="
invoice.hasData && invoice.color == 'blue'
? 'bg-blue-500'
: 'bg-gray-500'
"
:style="`width: ${invoice.barWidth}%`"
></div>
</div>
</div>
<div class="mt-2 relative">
<div
class="w-full h-4 rounded"
:class="
invoice.hasData && invoice.color == 'blue'
? 'bg-blue-200'
: 'bg-gray-200'
"
></div>
<div
class="absolute inset-0 h-4 rounded"
:class="
invoice.hasData && invoice.color == 'blue'
? 'bg-blue-500'
: 'bg-gray-500'
"
:style="`width: ${invoice.barWidth}%`"
></div>
</div>
</div>
</div>
</template>