mirror of
				https://github.com/mokuappio/serverless-invoices.git
				synced 2025-10-28 08:21:08 -04:00 
			
		
		
		
	general improvements to layout for small screens,
fix invoice status selector showing translation keys
This commit is contained in:
		| @ -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; | ||||
|  | ||||
|  | ||||
| @ -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; | ||||
|  | ||||
| @ -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" | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
| @ -1,8 +1,10 @@ | ||||
| <template> | ||||
|     <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-sm-4" :errors="errors"/> | ||||
|                         <TeamLogo class="col-4" :errors="errors"/> | ||||
|                         <InvoiceHeader :invoice="invoice" :errors="errors" @update="updateProp" | ||||
|                                        class="col-8 text-right mb-2"/> | ||||
|                     </div> | ||||
| @ -38,6 +40,8 @@ | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
| </template> | ||||
| <script> | ||||
| import { mapGetters, mapState } from 'vuex'; | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
| @ -16,7 +16,7 @@ | ||||
|             </div> | ||||
|         </div> | ||||
|         <div class="row"> | ||||
|             <div class="col-12 p-0"> | ||||
|             <div class="col-12"> | ||||
|                 <InvoicesList/> | ||||
|             </div> | ||||
|         </div> | ||||
|  | ||||
		Reference in New Issue
	
	Block a user