From 0e198187910e04fef52c66fe882af37d5b4d99e9 Mon Sep 17 00:00:00 2001
From: Marek Fraczyk <mareksmakosz@gmail.com>
Date: Fri, 23 Apr 2021 14:52:29 +0300
Subject: [PATCH] general improvements to layout for small screens, fix invoice
 status selector showing translation keys

---
 src/assets/scss/_scaffolding.scss           |  4 +-
 src/assets/scss/components/_invoice.scss    |  5 ++
 src/components/TheFooter.vue                | 10 +--
 src/components/invoices/InvoiceControls.vue |  6 +-
 src/components/invoices/InvoiceForm.vue     | 76 +++++++++++----------
 src/components/invoices/InvoicesList.vue    |  4 +-
 src/views/dashboard/Invoices.vue            |  2 +-
 7 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/src/assets/scss/_scaffolding.scss b/src/assets/scss/_scaffolding.scss
index 6241d94..90ac6c1 100644
--- a/src/assets/scss/_scaffolding.scss
+++ b/src/assets/scss/_scaffolding.scss
@@ -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;
 
diff --git a/src/assets/scss/components/_invoice.scss b/src/assets/scss/components/_invoice.scss
index e06651e..9834ab2 100644
--- a/src/assets/scss/components/_invoice.scss
+++ b/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;
diff --git a/src/components/TheFooter.vue b/src/components/TheFooter.vue
index d35e6bc..75a7de9 100644
--- a/src/components/TheFooter.vue
+++ b/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">
-        <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"
diff --git a/src/components/invoices/InvoiceControls.vue b/src/components/invoices/InvoiceControls.vue
index ce6b5c5..67e5b94 100644
--- a/src/components/invoices/InvoiceControls.vue
+++ b/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>
diff --git a/src/components/invoices/InvoiceForm.vue b/src/components/invoices/InvoiceForm.vue
index 689f626..3fb02eb 100644
--- a/src/components/invoices/InvoiceForm.vue
+++ b/src/components/invoices/InvoiceForm.vue
@@ -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>
diff --git a/src/components/invoices/InvoicesList.vue b/src/components/invoices/InvoicesList.vue
index 8a1131c..d9ba3c8 100644
--- a/src/components/invoices/InvoicesList.vue
+++ b/src/components/invoices/InvoicesList.vue
@@ -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>
diff --git a/src/views/dashboard/Invoices.vue b/src/views/dashboard/Invoices.vue
index d90e670..471eed2 100644
--- a/src/views/dashboard/Invoices.vue
+++ b/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>