accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-01-11 10:38:14 +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> <template>
<div class="flex -mx-4"> <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> <SectionHeader>
<template slot="title">{{ invoice.title }}</template> <template slot="title">{{ invoice.title }}</template>
<PeriodSelector <PeriodSelector
@ -19,45 +19,47 @@
<feather-icon name="plus" class="w-4 h-4 text-white" /> <feather-icon name="plus" class="w-4 h-4 text-white" />
</Button> </Button>
</SectionHeader> </SectionHeader>
<div class="mt-6 flex justify-between"> <div>
<div <div class="mt-6 flex justify-between">
class="text-sm" <div
:class="{ 'bg-gray-200 text-gray-200 rounded': !invoice.hasData }" 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 }">{{ {{ frappe.format(invoice.paid, 'Currency') }}
_('Paid') <span :class="{ 'text-gray-600': invoice.hasData }">{{
}}</span> _('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>
<div <div class="mt-2 relative">
class="text-sm" <div
:class="{ 'bg-gray-200 text-gray-200 rounded': !invoice.hasData }" class="w-full h-4 rounded"
> :class="
{{ frappe.format(invoice.unpaid, 'Currency') }} invoice.hasData && invoice.color == 'blue'
<span :class="{ 'text-gray-600': invoice.hasData }">{{ ? 'bg-blue-200'
_('Unpaid') : 'bg-gray-200'
}}</span> "
></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> </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>
</div> </div>
</template> </template>