mirror of
https://github.com/mokuappio/serverless-invoices.git
synced 2025-10-27 16:01:07 -04:00
general improvements to layout for small screens,
fix invoice status selector showing translation keys
This commit is contained in:
Marek Fraczyk
@ -1,8 +1,8 @@
|
|||||||
.app {
|
.app {
|
||||||
&__content {
|
&__content {
|
||||||
//padding-top: 32px;
|
//padding-top: 32px;
|
||||||
padding-right: 66px;
|
padding-right: 16px;
|
||||||
padding-left: 66px;
|
padding-left: 16px;
|
||||||
will-change: padding-left;
|
will-change: padding-left;
|
||||||
transition: padding-left 0.2s $base-ease;
|
transition: padding-left 0.2s $base-ease;
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,11 @@
|
|||||||
|
.invoice-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.invoice-box {
|
.invoice-box {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
|
min-width: var(--breakpoint-md);
|
||||||
box-shadow: $box-shadow-light-1;
|
box-shadow: $box-shadow-light-1;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<footer class="col-12 d-flex justify-content-between align-items-center text-secondary px-0 mt-3 d-print-none">
|
<footer class="row text-secondary px-0 mt-3 d-print-none">
|
||||||
<div>
|
<div class="col-md-4">
|
||||||
<LanguageSwitcher/>
|
<LanguageSwitcher class="ml-n2 ml-md-0"/>
|
||||||
<button class="btn btn-sm text-secondary" @click="toggleTheme">
|
<button class="btn btn-sm text-secondary" @click="toggleTheme">
|
||||||
{{ theme === 'dark' ? $t('lights-on') : $t('lights-off') }}
|
{{ theme === 'dark' ? $t('lights-on') : $t('lights-off') }}
|
||||||
<i class="material-icons material-icons-round md-14 align-text-bottom ml-1">
|
<i class="material-icons material-icons-round md-14 align-text-bottom ml-1">
|
||||||
@ -9,7 +9,7 @@
|
|||||||
</i>
|
</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="col-md-8 text-left text-md-right">
|
||||||
<small v-b-tooltip.hover
|
<small v-b-tooltip.hover
|
||||||
:title="$t('title')"
|
:title="$t('title')"
|
||||||
class="pointer">
|
class="pointer">
|
||||||
@ -22,7 +22,7 @@
|
|||||||
<a href="https://mokuapp.io/" class="text-secondary" target="_blank">Moku</a>.
|
<a href="https://mokuapp.io/" class="text-secondary" target="_blank">Moku</a>.
|
||||||
</small>
|
</small>
|
||||||
<a href="https://github.com/mokuappio/serverless-invoices"
|
<a href="https://github.com/mokuappio/serverless-invoices"
|
||||||
class="btn btn-sm btn--icon ml-2"
|
class="btn btn-sm btn--icon ml-0 ml-md-2"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
<img src="@/assets/img/github.png"
|
<img src="@/assets/img/github.png"
|
||||||
alt="Serverless Invoices Github"
|
alt="Serverless Invoices Github"
|
||||||
|
|||||||
@ -10,13 +10,13 @@
|
|||||||
<AppSelect :value="getStatusObj"
|
<AppSelect :value="getStatusObj"
|
||||||
class="mb-0 mr-2 text-capitalize multiselect--capitalize"
|
class="mb-0 mr-2 text-capitalize multiselect--capitalize"
|
||||||
:options="invoiceStatuses"
|
:options="invoiceStatuses"
|
||||||
label-field="name"
|
label-field="value"
|
||||||
@input="updateProp({status: $event.value})"/>
|
@input="updateProp({status: $event.value})"/>
|
||||||
<button class="btn btn-sm btn-outline-dark"
|
<button class="btn btn-outline-dark"
|
||||||
v-if="invoice.status === 'draft'"
|
v-if="invoice.status === 'draft'"
|
||||||
@click="bookInvoice">{{ $t('book') }}
|
@click="bookInvoice">{{ $t('book') }}
|
||||||
</button>
|
</button>
|
||||||
<b-dropdown variant="link" size="sm" no-caret right>
|
<b-dropdown variant="link" no-caret right>
|
||||||
<template slot="button-content">
|
<template slot="button-content">
|
||||||
<i class="material-icons">more_vert</i>
|
<i class="material-icons">more_vert</i>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,40 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="card bg-base dp--02 invoice-box" v-if="invoice">
|
<div class="row">
|
||||||
<div class="card-body">
|
<div class="col-12 scrollbar invoice-container">
|
||||||
<div class="row mb-5">
|
<div class="card bg-base dp--02 invoice-box" v-if="invoice">
|
||||||
<TeamLogo class="col-sm-4" :errors="errors"/>
|
<div class="card-body">
|
||||||
<InvoiceHeader :invoice="invoice" :errors="errors" @update="updateProp"
|
<div class="row mb-5">
|
||||||
class="col-8 text-right mb-2"/>
|
<TeamLogo class="col-4" :errors="errors"/>
|
||||||
</div>
|
<InvoiceHeader :invoice="invoice" :errors="errors" @update="updateProp"
|
||||||
<div class="row">
|
class="col-8 text-right mb-2"/>
|
||||||
<InvoiceClientDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
</div>
|
||||||
class="col-6"/>
|
<div class="row">
|
||||||
<InvoiceCompanyDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
<InvoiceClientDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
||||||
class="col-6 text-right"/>
|
class="col-6"/>
|
||||||
</div>
|
<InvoiceCompanyDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
||||||
<div class="row mt-3">
|
class="col-6 text-right"/>
|
||||||
<AppEditable :value="invoice.notes"
|
</div>
|
||||||
class="col-12"
|
<div class="row mt-3">
|
||||||
:placeholder="$t('insert_note')"
|
<AppEditable :value="invoice.notes"
|
||||||
@change="updateProp({ notes: $event })"/>
|
class="col-12"
|
||||||
</div>
|
:placeholder="$t('insert_note')"
|
||||||
<div class="row">
|
@change="updateProp({ notes: $event })"/>
|
||||||
<table class="table">
|
</div>
|
||||||
<InvoiceRowsHeader :invoice="invoice"/>
|
<div class="row">
|
||||||
<tbody>
|
<table class="table">
|
||||||
<InvoiceRow v-for="(row, index) in invoice.rows" :errors="errors"
|
<InvoiceRowsHeader :invoice="invoice"/>
|
||||||
:row="row" :index="index" :key="row.id"/>
|
<tbody>
|
||||||
<InvoiceAddRowBtn :invoice="invoice" :errors="errors"/>
|
<InvoiceRow v-for="(row, index) in invoice.rows" :errors="errors"
|
||||||
</tbody>
|
:row="row" :index="index" :key="row.id"/>
|
||||||
<InvoiceTotals :invoice="invoice" :errors="errors" @update="updateProp"/>
|
<InvoiceAddRowBtn :invoice="invoice" :errors="errors"/>
|
||||||
</table>
|
</tbody>
|
||||||
</div>
|
<InvoiceTotals :invoice="invoice" :errors="errors" @update="updateProp"/>
|
||||||
<hr>
|
</table>
|
||||||
<div class="row">
|
</div>
|
||||||
<InvoiceBankDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
<hr>
|
||||||
class="col-8"/>
|
<div class="row">
|
||||||
<InvoiceContactDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
<InvoiceBankDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
||||||
class="col-4 text-right"/>
|
class="col-8"/>
|
||||||
|
<InvoiceContactDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
||||||
|
class="col-4 text-right"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="table-responsive">
|
||||||
<div v-if="!invoices" class="col-12">{{ $t('loading') }}</div>
|
<div v-if="!invoices" class="col-12">{{ $t('loading') }}</div>
|
||||||
<table class="table table--card table-hover" v-else-if="invoices && invoices.length > 0">
|
<table class="table table--card table-hover" v-else-if="invoices && invoices.length > 0">
|
||||||
<thead>
|
<thead>
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 p-0">
|
<div class="col-12">
|
||||||
<InvoicesList/>
|
<InvoicesList/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user