Final

Author: JohnRay1997

package-lock.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "uid": "^2.0.0",
-    "vue": "^3.0.0",
+    "vue": "^3.0.11",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },

package.json

@@ -1,9 +1,18 @@
 <template>
-  <div class="app" v-if="invoicesLoaded">
-    <Navigation />
-    <div class="app-content flex flex-column">
-      <NewInvoice v-if="newInvoice" />
-      <router-view />
+  <div v-if="invoicesLoaded">
+    <div class="app flex" v-if="!mobile">
+      <Navigation />
+      <div class="app-content flex flex-column">
+        <Modal v-if="modalActive" />
+        <transition name="invoice">
+          <NewInvoice v-if="newInvoice" />
+        </transition>
+        <router-view />
+      </div>
+    </div>
+    <div class="mobile-message flex" v-else>
+      <h2>Sorry, this app is not supported on Mobile Devices</h2>
+      <p>To use this app, please use a computer or Tablet</p>
     </div>
   </div>
 </template>
@@ -12,30 +21,43 @@
 import { mapActions, mapState } from "vuex";
 import Navigation from "./components/Navigation";
 import NewInvoice from "./components/NewInvoice";
+import Modal from "./components/Modal";
 export default {
   name: "App",
   components: {
     Navigation,
     NewInvoice,
+    Modal,
   },
   data() {
     return {
-      testing: null,
+      windownWidth: null,
+      mobile: null,
     };
   },
   created() {
     this.getInvoiceData();
+    window.addEventListener("resize", this.checkScreen);
   },
   methods: {
-    ...mapActions({
-      getInvoiceData: "GET_INVOICES",
-    }),
+    ...mapActions(["GET_INVOICES"]),
+
+    getInvoiceData() {
+      this.GET_INVOICES();
+    },
+
+    checkScreen() {
+      this.windownWidth = window.innerWidth;
+      if (this.windownWidth <= 750) {
+        this.mobile = true;
+        return;
+      }
+      this.mobile = false;
+      return;
+    },
   },
   computed: {
-    ...mapState({
-      newInvoice: "newInvoice",
-      invoicesLoaded: "invoicesLoaded",
-    }),
+    ...mapState(["newInvoice", "invoicesLoaded", "modalActive"]),
   },
 };
 </script>
@@ -50,17 +72,47 @@ export default {
   font-family: "Poppins", sans-serif;
 }
 
+// animated invoice
+.invoice-enter-active,
+.invoice-leave-active {
+  transition: 0.8s ease all;
+}
+
+.invoice-enter-from,
+.invoice-leave-to {
+  transform: translateX(-700px);
+}
+
 .app {
   background-color: #141625;
-  display: flex;
   min-height: 100vh;
+  flex-direction: column;
+  @media (min-width: 900px) {
+    flex-direction: row;
+  }
 
   .app-content {
+    padding: 0 20px;
     flex: 1;
     position: relative;
   }
 }
 
+.mobile-message {
+  flex-direction: column;
+  text-align: center;
+  padding: 20px;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  background-color: #141625;
+  color: #fff;
+
+  p {
+    margin-top: 16px;
+  }
+}
+
 // button styling
 
 button,
@@ -86,6 +138,14 @@ button,
   background-color: #7c5dfa;
 }
 
+.green {
+  background-color: #33d69f;
+}
+
+.orange {
+  background-color: #ff8f00;
+}
+
 // utility classes
 
 .flex {
@@ -98,9 +158,13 @@ button,
 
 .container {
   width: 100%;
-  padding-top: 72px;
+  padding: 40px 10px;
   max-width: 850px;
   margin: 0 auto;
+
+  @media (min-width: 800px) {
+    padding-top: 72px;
+  }
 }
 
 .nav-link {

src/App.vue

@@ -2,16 +2,7 @@
   <router-link :to="{ name: 'Invoice', params: { invoiceId: invoice.invoiceId } }" class="invoice flex">
     <div class="left flex">
       <span class="tracking-number">#{{ invoice.invoiceId }}</span>
-      <span class="due-date"
-        >Due
-        {{
-          new Date(invoice.paymentDueDateUnix).toLocaleDateString("en-us", {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-          })
-        }}</span
-      >
+      <span class="due-date">Due {{ invoice.paymentDueDate }}</span>
       <span class="person">{{ invoice.clientName }}</span>
     </div>
     <div class="right flex">
@@ -55,14 +46,8 @@ export default {
   align-items: center;
 
   .left {
+    align-items: center;
     flex-basis: 60%;
-  }
-
-  .right {
-    flex-basis: 40%;
-  }
-
-  .left {
     gap: 16px;
     span {
       flex: 1;
@@ -74,6 +59,8 @@ export default {
   }
 
   .right {
+    gap: 16px;
+    flex-basis: 40%;
     align-items: center;
 
     .price {

src/assets/file-invoice-dollar-solid.png

@@ -11,16 +11,28 @@
 </template>
 
 <script>
+import { mapMutations, mapState } from "vuex";
 export default {
   methods: {
+    ...mapMutations(["TOGGLE_INVOICE", "TOGGLE_EDITING_INVOICE", "TOGGLE_MODAL"]),
+
     closeModal() {
-      this.$emit("close-modal");
+      this.TOGGLE_MODAL();
     },
 
     closeInvoice() {
-      this.$store.commit("TOGGLE_INVOICE");
+      this.TOGGLE_MODAL();
+      this.TOGGLE_INVOICE();
+      // only toggling editing invoice
+      // if currently being edited
+      if (this.editInvoice) {
+        this.TOGGLE_EDITING_INVOICE();
+      }
     },
   },
+  computed: {
+    ...mapState(["editInvoice"]),
+  },
 };
 </script>
 

src/assets/file-invoice-dollar-solid.svg

@@ -1,10 +1,8 @@
 <template>
-  <header>
+  <header class="flex">
     <div class="branding">
-      <img src="@/assets/Logo.png" alt="" />
+      <img src="@/assets/file-invoice-dollar-solid.png" alt="" />
     </div>
-    <hr />
-    <img class="profile" src="@/assets/profile.jpeg" alt="" />
   </header>
 </template>
 
@@ -14,42 +12,31 @@ export default {};
 
 <style lang="scss" scoped>
 header {
-  border-radius: 0 20px 20px 0;
-  min-width: 90px;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
+  z-index: 99;
+  // align-items: center;
+  flex-direction: row;
   color: #fff;
   background-color: #1e2139;
+  @media (min-width: 900px) {
+    min-height: 100%;
+    flex-direction: column;
+    min-width: 90px;
+    border-radius: 0 20px 20px 0;
+  }
 }
 
 .branding {
   border-radius: 0 20px 20px 0;
   padding: 24px;
   display: flex;
   justify-content: center;
-  width: 100%;
   background-color: #7c5dfa;
   img {
-    width: 30px;
+    width: auto;
     height: 30px;
   }
-}
-
-hr {
-  margin-top: auto;
-  width: 100%;
-  height: 1px;
-  border-color: #979797;
-}
-
-.profile {
-  margin: 20px 0;
-
-  object-fit: cover;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
+  @media (min-width: 900px) {
+    width: 100%;
+  }
 }
 </style>