update billings design

This commit is contained in:
edmondlang
2022-03-02 21:32:58 +08:00
parent f9a3bdcd67
commit 79b4431ef7
2 changed files with 12 additions and 8 deletions
@@ -11,7 +11,7 @@
<div class="row h-100">
<div class="col fs-9 d-flex align-items-center flex-column" style="padding-top: 7px; padding-bottom: 4px;">
<label class="all-caps w-100 m-b-0" style="font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;">Document Type</label>
<span class="w-100 fs-14">{{parameters.type}}</span>
<span class="w-100 fs-14">{{parameters.type.replaceAll('_', ' ')}}</span>
</div>
<div class="col-auto b-l b-grey">
<div class="row h-100 align-items-center">
@@ -27,10 +27,10 @@
<div class="row text-left no-margin bg-white">
<div class="col no-padding">
<div class="row no-margin" v-for="document in documents" :key="document">
<div class="col b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 b-a" @click="updateDocumentType(document)">
<div class="col b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 b-a" :class="[{'bg-primary-light': document === parameters.type}, {'text-white': document === parameters.type}, {'b-primary': document === parameters.type}, {'hover-primary': document !== parameters.type}, {'pointer': document !== parameters.type}]" @click="updateDocumentType(document)">
<div class="row align-items-center justify-content-center">
<div class="col">
<div class="font-heading fs-10">{{document}}</div>
<div class="font-heading fs-10">{{document.replaceAll('_', ' ')}}</div>
</div>
</div>
</div>
@@ -40,11 +40,15 @@
<div class="font-heading text-success bold">{{item.owner.amount}} {{item.owner.fixed_currency.short_code}}</div>
</div>
<div class="col">
<document-file-viewer-component :file="item.files[0]">
<template slot="button">
<button class="btn btn-success">Download</button>
</template>
</document-file-viewer-component>
<div class="row">
<div class="col-auto">
<document-file-viewer-component :file="item.files[0]">
<template slot="button">
<button class="btn btn-success w-100">Download</button>
</template>
</document-file-viewer-component>
</div>
</div>
</div>
</div>
</div>