src/App.vue

@@ -45,6 +45,10 @@ a {
   }
 }
 
+body.is-overlayed {
+  overflow: hidden;
+}
+
 main {
   padding: 2rem 1rem;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='%230c9696' fill-opacity='0.35'%3E%3Cpath fill-rule='evenodd' d='M29.42 29.41c.36-.36.58-.85.58-1.4V0h-4v26H0v4h28c.55 0 1.05-.22 1.41-.58h.01zm0 29.18c.36.36.58.86.58 1.4V88h-4V62H0v-4h28c.56 0 1.05.22 1.41.58zm29.16 0c-.36.36-.58.85-.58 1.4V88h4V62h26v-4H60c-.55 0-1.05.22-1.41.58h-.01zM62 26V0h-4v28c0 .55.22 1.05.58 1.41.37.37.86.59 1.41.59H88v-4H62zM18 36c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm16-26a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 58a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 78a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zM34 4a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm-8 82a2 2 0 1 1 4 0v2h-4v-2zm0-68a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V18zM66 4a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm0 72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm-48 0a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm0-72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm24-4h4v2a2 2 0 1 1-4 0V0zm0 60a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V60zm14-24c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm-28-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM36 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-8-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 68a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-34a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-12a2 2 0 1 0 0 4 6 6 0 1 1 0 12 2 2 0 1 0 0 4 10 10 0 1 0 0-20zm-64 0a2 2 0 1 1 0 4 6 6 0 1 0 0 12 2 2 0 1 1 0 4 10 10 0 1 1 0-20zm56-12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-48 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm24 32a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-4a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm36-36a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM10 44c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm56 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm8 24c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zM3 68c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm0-48c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm71 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm6 66a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 86a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-68A6 6 0 1 1 8 2a6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm36 36a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/g%3E%3C/svg%3E");

src/components/AddFruit.vue

@@ -1,41 +1,87 @@
 <template>
   <div class="modal">
     <h2>New Fruit</h2>
-    <form id="new-fruit">
+    <form id="new-fruit" @submit.prevent="checkForm">
       <!-- name -->
-      <p>
+      <div class="form-field">
-        <input ref="autofocus" type="text" v-model="fruit.name" placeholder="Name" />
+        <label for="fruit-name">Name</label>
-      </p>
+        <input
+          id="fruit-name"
+          ref="autofocus"
+          type="text"
+          v-model="fruit.name"
+          placeholder="Ex: Banana"
+          required
+        />
+      </div>
 
       <!-- image finder (with Unsplash API) -->
       <ImageUnsplash
         @getValue="getImage"
         label="Image"
+        containerClass="form-field"
         placeholder="Search: strawberry, apple ..."
+        :required="true"
       />
 
-      <div class="input-group">
+      <div class="form-group">
         <!-- taste -->
-        <input type="text" v-model="fruit.taste" placeholder="Taste" />
+        <div class="form-field">
-
+          <label for="fruit-taste">Taste</label>
-        <!-- color -->
+          <input
-        <input type="color" v-model="fruit.color" placeholder="Color" />
+            id="fruit-taste"
+            type="text"
+            v-model="fruit.taste"
+            placeholder="Ex: sweet"
+            required
+          />
         </div>
 
+        <!-- color -->
+        <div class="form-field">
+          <label for="fruit-color">Color</label>
+          <input id="fruit-color" type="color" v-model="fruit.color" placeholder="Color" required />
+        </div>
+      </div>
+
+      <div class="form-group">
         <!-- price -->
-      <p>
+        <div class="form-field">
-        <input type="number" v-model="fruit.price" placeholder="Price" />
+          <label for="fruit-price">Price ($)</label>
-      </p>
+          <input
+            id="fruit-price"
+            type="number"
+            v-model="fruit.price"
+            placeholder="Ex: $13"
+            required
+            min="0"
+          />
+        </div>
 
         <!-- expires -->
-      <p>
+        <div class="form-field">
-        <input type="date" v-model="fruit.expires" placeholder="Expiry date" />
+          <label for="fruit-expires">Expiration Date</label>
-      </p>
+          <input id="fruit-expires" type="date" v-model="fruit.expires" required />
+        </div>
+      </div>
 
       <!-- description -->
-      <p>
+      <div class="form-field">
-        <textarea v-model="fruit.description" placeholder="Message ..." />
+        <label for="fruit-description">Description</label>
-      </p>
+        <textarea
+          id="fruit-description"
+          v-model="fruit.description"
+          placeholder="Ex: malesuada pellentesque elit eget ..."
+          required
+        />
+      </div>
+
+      <div class="actions">
+        <button class="btn btn--cancel" type="button" @click="() => $store.commit('toggleModal')">
+          Cancel
+        </button>
+        <button class="btn btn--success" type="submit">Save</button>
+      </div>
     </form>
   </div>
 </template>
@@ -48,15 +94,27 @@ export default {
   components: { ImageUnsplash },
   data() {
     return {
-      fruit: {}
+      fruit: {
+        color: "#000000"
+      }
     };
   },
   mounted() {
     this.$refs["autofocus"].focus();
+    document.body.classList.add("is-overlayed");
+  },
+  destroyed() {
+    document.body.classList.remove("is-overlayed");
   },
   methods: {
     getImage(url) {
       this.fruit.image = url;
+    },
+    async checkForm(e) {
+      await this.$store
+        .dispatch("addFruit", this.fruit)
+        .then(() => this.$store.commit("toggleModal"));
+      e.preventDefault();
     }
   }
 };
@@ -64,15 +122,15 @@ export default {
 
 <style lang="less">
 .modal {
-  position: absolute;
+  position: fixed;
   top: @headerHeight;
   left: 0;
   right: 0;
   bottom: 0;
-  height: 100%;
   background-color: @color-2;
   padding: 1rem;
   z-index: 14;
+  overflow-y: scroll;
 
   form {
     border: 2px solid @color-1;
@@ -82,30 +140,94 @@ export default {
     background-color: rgba(0, 0, 0, 0.06);
     box-shadow: 0 1px 4px 1px #d2d2f2;
     padding: 1rem;
+    margin-bottom: 1rem;
 
-    .input-group {
+    @media screen and (min-width: @sm) {
-      display: flex;
+      width: 425px;
-      align-items: center;
+      margin: 0 auto 2rem auto;
-      margin: 1rem 0;
+    }
 
     [type="color"] {
-        width: 35%;
       height: 48px;
     }
 
-      :first-child {
+    .form-field {
-        margin-right: 1rem;
+      padding: 0.75rem 1rem;
+      border-radius: 4px;
+      box-sizing: border-box;
+      background-color: @color-2;
+      margin: 1rem 0;
+
+      label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+      }
+
+      textarea,
+      input {
+        width: 100%;
+        box-sizing: border-box;
+        border: none;
+        border-radius: 4px;
+        background-color: lighten(@text-color, 70%);
+        padding: 0.75rem 1rem;
+        color: darken(@color-1, 20%);
       }
     }
 
-    input,
+    .form-group {
-    .image-unsplash {
+      display: flex;
-      box-sizing: border-box;
+      align-items: center;
-      width: 100%;
+      margin: 1rem 0;
-      border-radius: 4px;
-      border: 1px solid #cecece;
       background-color: @color-2;
-      padding: 0.75rem 1rem;
+
+      .form-field {
+        background-color: none;
+        margin: 0;
+        width: 50%;
+      }
+
+      // :first-child {
+      //   margin-right: 1rem;
+      //   width: 60%;
+
+      //   @media screen and (min-width: @sm) {
+      //     width: 100%;
+      //   }
+      // }
+
+      // [type="color"] {
+      //   width: calc(40% - 1rem);
+      //   flex-shrink: 0;
+      //   height: 48px;
+
+      //   @media screen and (min-width: @sm) {
+      //     width: calc(35% - 1rem);
+      //   }
+      // }
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      .btn {
+        border: none;
+        border-radius: 4px;
+        color: @color-2;
+        padding: 0.5rem 1.35rem;
+        margin: 0 0.5rem;
+
+        &--success {
+          background-color: #2ecc71;
+        }
+
+        &--cancel {
+          background-color: darken(#cecece, 15%);
+        }
+      }
     }
   }
 }

src/components/Form/ImageUnsplash/ImageUnsplash.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="image-unsplash">
+  <div :class="containerClass" class="image-unsplash">
     <label for="search-unsplash">{{ label }}</label>
     <!-- Loading placeholder -->
     <ImageSkeleton v-if="loading" />
@@ -17,7 +17,13 @@
 
     <!-- Search input -->
     <div class="search-box">
-      <input id="search-unsplash" type="search" :placeholder="placeholder" @change="handleSearch" />
+      <input
+        id="search-unsplash"
+        type="search"
+        :placeholder="placeholder"
+        @change="handleSearch"
+        :required="required"
+      />
     </div>
   </div>
 </template>
@@ -32,6 +38,10 @@ export default {
     ImageSkeleton
   },
   props: {
+    containerClass: {
+      type: String,
+      default: null
+    },
     label: {
       type: String,
       default: "Image (from Unsplash)"
@@ -39,6 +49,10 @@ export default {
     placeholder: {
       type: String,
       default: "Type anything !"
+    },
+    required: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -69,12 +83,6 @@ export default {
 
 <style scoped lang="less">
 .image-unsplash {
-  label {
-    display: block;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
-
   .preview,
   .skeleton {
     margin-bottom: 1rem;
@@ -104,7 +112,7 @@ export default {
       position: absolute;
       z-index: 1;
       top: 50%;
-      right: 0.3rem;
+      right: 0.5rem;
       width: 24px;
       height: 24px;
       transform: translateY(-50%);

src/components/Grid/DeleteItem.vue

@@ -6,8 +6,8 @@
     <div v-if="openPrompt" :class="{ open: openPrompt }" class="prompt">
       <h3>You will delete '{{ item.name }}'?</h3>
       <div class="actions">
-        <button class="btn btn-cancel" @click="openPrompt = false">No</button>
+        <button class="btn btn--cancel" @click="openPrompt = false">No</button>
-        <button class="btn btn-success" @click="removeFruit(item.id)">Yes</button>
+        <button class="btn btn--success" @click="removeFruit(item.id)">Yes</button>
       </div>
     </div>
   </div>
@@ -67,16 +67,16 @@ export default {
     color: @color-2;
     padding: 0.5rem 1.35rem;
     margin: 0 0.5rem;
-  }
 
-  .btn-success {
+    &--success {
       background-color: #2ecc71;
     }
 
-  .btn-cancel {
+    &--cancel {
       background-color: darken(#cecece, 15%);
     }
   }
+}
 
 .delete-btn {
   position: absolute;

src/components/Header.vue

@@ -7,13 +7,18 @@
 
     <div class="actions">
       <button
+        :disabled="modalIsOpen"
         class="action-btn action-btn--delete"
         @click="() => $store.commit('toggleDeleteMode')"
       >
         {{ deleteMode ? "&#x1F6AB;" : "&#x1f5d1;" }}
       </button>
-      <button class="action-btn action-btn--add" @click="() => $store.commit('toggleModal')">
+      <button
-        +
+        :disabled="deleteMode"
+        class="action-btn action-btn--add"
+        @click="() => $store.commit('toggleModal')"
+      >
+        {{ modalIsOpen ? "&#x1F6AB;" : "&#x2795;" }}
       </button>
     </div>
   </header>
@@ -25,7 +30,7 @@ import { mapState } from "vuex";
 export default {
   name: "Header",
   computed: {
-    ...mapState(["deleteMode"])
+    ...mapState(["deleteMode", "modalIsOpen"])
   }
 };
 </script>
@@ -75,24 +80,23 @@ header {
         border: none;
         border-radius: 50%;
         color: @color-2;
-        font-size: 28px;
+        font-size: 24px;
         font-weight: lighter;
         text-align: center;
         margin-left: 1rem;
+        padding-top: 2px;
+        background: lighten(#cecece, 10%);
+
+        &:disabled {
+          opacity: 0.4;
+        }
 
         &--delete {
           border: 1px solid @text-error;
-          background: lighten(#cecece, 10%);
-          font-size: 24px;
-          padding-top: 2px;
         }
 
         &--add {
-          background: linear-gradient(112.4deg, #1c9797 11.05%, #147171 89.93%);
+          border: 1px solid @color-1;
-
-          &:hover {
-            background: linear-gradient(0deg, #1c9797 11.05%, #147171 89.93%);
-          }
         }
       }
     }

src/store/actions.js

@@ -15,6 +15,14 @@ export default {
   getFruit: async ({ commit }, id) => {
     await axios.get(`http://localhost:3000/fruit/${id}`).then(res => commit("setFruit", res.data));
   },
+  addFruit: async ({ commit }, fruit) => {
+    commit("setLoading", true);
+    await axios
+      .post("http://localhost:3000/fruit", fruit)
+      .then(res => commit("addFruit", res.data))
+      .catch(err => console.log(err))
+      .finally(() => commit("setLoading", false));
+  },
   removeFruit: async ({ commit }, id) => {
     await axios
       .delete(`http://localhost:3000/fruit/${id}`)