TheCloneArmy/serverless-invoices
1
0
Fork 0
mirror of https://github.com/mokuappio/serverless-invoices.git synced 2025-10-27 07:51:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

general improvements to layout for small screens,

Browse Source 
fix invoice status selector showing translation keys
This commit is contained in:
Marek Fraczyk
2021-04-23 14:52:29 +03:00
parent 12533b1251
commit 0e19818791
7 changed files with 58 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/scss/_scaffolding.scss
View File

@ -1,8 +1,8 @@
.app {
&__content {
//padding-top: 32px;
padding-right: 66px;
padding-left: 66px;
padding-right: 16px;
padding-left: 16px;
will-change: padding-left;
transition: padding-left 0.2s $base-ease;

5
src/assets/scss/components/_invoice.scss
View File

@ -1,6 +1,11 @@
.invoice-container {
overflow-x: auto;
}
.invoice-box {
margin: auto;
padding: 30px;
min-width: var(--breakpoint-md);
box-shadow: $box-shadow-light-1;
font-size: 16px;
line-height: 24px;

10
src/components/TheFooter.vue
View File

@ -1,7 +1,7 @@
<template>
<footer class="col-12 d-flex justify-content-between align-items-center text-secondary px-0 mt-3 d-print-none">
<div>
<LanguageSwitcher/>
<footer class="row text-secondary px-0 mt-3 d-print-none">
<div class="col-md-4">
<LanguageSwitcher class="ml-n2 ml-md-0"/>
<button class="btn btn-sm text-secondary" @click="toggleTheme">
{{ theme === 'dark' ? $t('lights-on') : $t('lights-off') }}
<i class="material-icons material-icons-round md-14 align-text-bottom ml-1">
@ -9,7 +9,7 @@
</i>
</button>
</div>
<div>
<div class="col-md-8 text-left text-md-right">
<small v-b-tooltip.hover
:title="$t('title')"
class="pointer">
@ -22,7 +22,7 @@
<a href="https://mokuapp.io/" class="text-secondary" target="_blank">Moku</a>.
</small>
<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">
<img src="@/assets/img/github.png"
alt="Serverless Invoices Github"

6
src/components/invoices/InvoiceControls.vue
View File

@ -10,13 +10,13 @@
<AppSelect :value="getStatusObj"
class="mb-0 mr-2 text-capitalize multiselect--capitalize"
:options="invoiceStatuses"
label-field="name"
label-field="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'"
@click="bookInvoice">{{ $t('book') }}
</button>
<b-dropdown variant="link" size="sm" no-caret right>
<b-dropdown variant="link" no-caret right>
<template slot="button-content">
<i class="material-icons">more_vert</i>
</template>

76
src/components/invoices/InvoiceForm.vue
View File

@ -1,40 +1,44 @@
<template>
<div class="card bg-base dp--02 invoice-box" v-if="invoice">
<div class="card-body">
<div class="row mb-5">
<TeamLogo class="col-sm-4" :errors="errors"/>
<InvoiceHeader :invoice="invoice" :errors="errors" @update="updateProp"
class="col-8 text-right mb-2"/>
</div>
<div class="row">
<InvoiceClientDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-6"/>
<InvoiceCompanyDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-6 text-right"/>
</div>
<div class="row mt-3">
<AppEditable :value="invoice.notes"
class="col-12"
:placeholder="$t('insert_note')"
@change="updateProp({ notes: $event })"/>
</div>
<div class="row">
<table class="table">
<InvoiceRowsHeader :invoice="invoice"/>
<tbody>
<InvoiceRow v-for="(row, index) in invoice.rows" :errors="errors"
:row="row" :index="index" :key="row.id"/>
<InvoiceAddRowBtn :invoice="invoice" :errors="errors"/>
</tbody>
<InvoiceTotals :invoice="invoice" :errors="errors" @update="updateProp"/>
</table>
</div>
<hr>
<div class="row">
<InvoiceBankDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-8"/>
<InvoiceContactDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-4 text-right"/>
<div class="row">
<div class="col-12 scrollbar invoice-container">
<div class="card bg-base dp--02 invoice-box" v-if="invoice">
<div class="card-body">
<div class="row mb-5">
<TeamLogo class="col-4" :errors="errors"/>
<InvoiceHeader :invoice="invoice" :errors="errors" @update="updateProp"
class="col-8 text-right mb-2"/>
</div>
<div class="row">
<InvoiceClientDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-6"/>
<InvoiceCompanyDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-6 text-right"/>
</div>
<div class="row mt-3">
<AppEditable :value="invoice.notes"
class="col-12"
:placeholder="$t('insert_note')"
@change="updateProp({ notes: $event })"/>
</div>
<div class="row">
<table class="table">
<InvoiceRowsHeader :invoice="invoice"/>
<tbody>
<InvoiceRow v-for="(row, index) in invoice.rows" :errors="errors"
:row="row" :index="index" :key="row.id"/>
<InvoiceAddRowBtn :invoice="invoice" :errors="errors"/>
</tbody>
<InvoiceTotals :invoice="invoice" :errors="errors" @update="updateProp"/>
</table>
</div>
<hr>
<div class="row">
<InvoiceBankDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-8"/>
<InvoiceContactDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-4 text-right"/>
</div>
</div>
</div>
</div>
</div>

4
src/components/invoices/InvoicesList.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<template>
<div class="table-responsive">
<div v-if="!invoices" class="col-12">{{ $t('loading') }}</div>
<table class="table table--card table-hover" v-else-if="invoices && invoices.length > 0">
<thead>

2
src/views/dashboard/Invoices.vue
View File

@ -16,7 +16,7 @@
</div>
</div>
<div class="row">
<div class="col-12 p-0">
<div class="col-12">
<InvoicesList/>
</div>
</div>