general improvements to layout for small screens,

fix invoice status selector showing translation keys

src/assets/scss/_scaffolding.scss

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

src/assets/scss/components/_invoice.scss

@@ -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;

src/components/TheFooter.vue

@@ -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">
+    <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">
                 {{ 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"

src/components/invoices/InvoiceControls.vue

@@ -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>

src/components/invoices/InvoiceForm.vue

@@ -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';

src/components/invoices/InvoicesList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <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>

src/views/dashboard/Invoices.vue

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