Bring some responsive styles, subject to later improvements

coverage/clover.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1607048925926" clover="3.2.0">
+<coverage generated="1607048976462" clover="3.2.0">
-  <project timestamp="1607048925926" name="All files">
+  <project timestamp="1607048976462" name="All files">
     <metrics statements="7" coveredstatements="4" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="1" elements="10" coveredelements="5" complexity="0" loc="7" ncloc="7" packages="2" files="3" classes="3"/>
     <package name="components">
       <metrics statements="1" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>

coverage/lcov-report/components/Grid.vue.html

@@ -144,7 +144,7 @@ export default {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/components/index.html

@@ -94,7 +94,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/index.html

@@ -109,7 +109,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="prettify.js"></script>

coverage/lcov-report/views/Fruit.vue.html

@@ -132,7 +132,7 @@ export default {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/views/Fruits.vue.html

@@ -129,7 +129,7 @@ export default {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/views/index.html

@@ -109,7 +109,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

src/App.vue

@@ -27,18 +27,16 @@ export default {
 }
 
 main {
-  margin-top: 58px;
   padding: 1rem;
-
+  margin: 58px auto 0 auto;
-  h1 {
+  max-width: 1200px;
-    font-size: 28px;
-  }
 
   h2 {
     width: -webkit-max-content;
     width: -moz-max-content;
     width: max-content;
     padding-right: 1rem;
+    padding-bottom: 0.35rem;
     font-size: 26px;
     border-bottom: 2px solid @primary-color;
     margin-bottom: 1.35rem;
@@ -47,7 +45,9 @@ main {
 
   h3 {
     font-size: 22px;
+    font-weight: lighter;
     text-transform: capitalize;
+    margin-top: 0;
   }
 }
 </style>

src/assets/less/variables.less

@@ -1,3 +1,14 @@
 @primary-color: #0c9696;
 @secondary-color: #ffffff;
 @text-color: #333;
+
+@sm: 640px;
+// => @media (min-width: 640px) { ... }
+@md: 768px;
+// => @media (min-width: 768px) { ... }
+@lg: 1024px;
+// => @media (min-width: 1024px) { ... }
+@xl: 1280px;
+// => @media (min-width: 1280px) { ... }
+@2xl: 1536px;
+// => @media (min-width: 1536px) { ... }

src/components/Grid.vue

@@ -21,7 +21,20 @@ export default {
 <style scoped lang="less">
 .grid {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr;
   column-gap: 1rem;
+  row-gap: 1.5rem;
+
+  @media screen and (min-width: @sm) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media screen and (min-width: @md) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  @media screen and (min-width: @lg) {
+    grid-template-columns: repeat(4, 1fr);
+  }
 }
 </style>

src/components/GridItem.vue

@@ -1,10 +1,19 @@
 <template>
   <article class="grid-item">
     <router-link :to="`/fruit/${item.id}`">
-      <img :src="item.image" :alt="item.name" />
+      <div class="thumbnail">
-      <h2>{{ item.name }}</h2>
+        <img :src="item.image" :alt="item.name" />
-      <span class="tag" :style="{ backgroundColor: item.color }">{{ item.taste }}</span>
+      </div>
-      <p class="price">{{ item.price + "$" }}</p>
+      <section>
+        <h3>
+          {{ item.name }}
+          <span class="tag" :style="{ backgroundColor: item.color }">{{ item.taste }}</span>
+        </h3>
+
+        <hr />
+
+        <p class="price">{{ "$" + item.price }}</p>
+      </section>
     </router-link>
   </article>
 </template>
@@ -19,33 +28,68 @@ export default {
 
 <style scoped lang="less">
 .grid-item {
-  padding: 1rem;
+  border-radius: 10px;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
 
-  h2 {
+  &:hover .thumbnail img {
-    text-transform: capitalize;
+    transform: scale(1.1);
   }
 
-  .tag {
+  a {
-    font-weight: bold;
+    display: block;
-    text-transform: lowercase;
+    text-decoration: none;
-    display: inline-block;
+    color: inherit;
-    color: #ffffff;
-    padding: 0.35rem;
-    min-width: 85px;
-    border-radius: 25px;
-  }
 
-  img {
+    .thumbnail {
-    width: 100%;
+      height: 285px;
-    height: 350px;
+      overflow: hidden;
-    object-fit: cover;
+      box-shadow: 0 1px 4px 1px #d2d2f2;
-    max-width: 100%;
-  }
 
-  .price {
+      img {
-    font-size: 24px;
+        border-radius: 10px 10px 0 0;
-    font-weight: bold;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        max-width: 100%;
+        transition: transform 0.4s ease-in-out;
+      }
+    }
+
+    section {
+      padding: 1.5rem 1rem;
+
+      h3 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 0.55rem;
+      }
+
+      hr {
+        width: 100px;
+        color: #cece;
+        margin: 1.35rem auto;
+      }
+
+      .tag {
+        border-radius: 25px;
+        padding: 0.55rem;
+        margin-left: 0.75rem;
+        color: #ffffff;
+        font-size: 14px;
+        font-weight: bold;
+        text-align: center;
+        text-transform: lowercase;
+      }
+
+      .price {
+        text-align: center;
+        margin: 0;
+        font-size: 28px;
+        font-weight: bold;
+      }
+    }
   }
 }
 </style>

src/components/Header.vue

@@ -19,12 +19,20 @@ nav {
   padding: 0.5rem;
   box-shadow: 0 19px 34px -15px #d2d2f2;
 
+  h1 {
+    margin: 0;
+    font-size: 28px;
+    font-weight: lighter;
+  }
+
   &.main-nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: calc(58px - 0.5rem * 2);
+    z-index: 15;
+
     img {
       width: 35px;
       height: 35px;

src/views/Fruit.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>Fruit Details</h1>
+    <h2>Fruit Details</h2>
     {{ this.fruit }}
   </div>
 </template>

src/views/Fruits.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
+  <div class="fruits">
-    <h1>Fruits Directory</h1>
+    <h2>Directory</h2>
     <Grid :data="this.fruits" />
   </div>
 </template>

tests/unit/fruits.spec.js

@@ -10,7 +10,7 @@ import Fruits from "@/views/Fruits.vue";
 describe("Test Fruits page.", () => {
   it("dispatches getFruits on mounted", async () => {
     // axios.get.mockImplementationOnce(() => Promise.resolve({ data: { data: "value" } }));
-    const wrapper = mount(Fruits, { store, stubs: { RouterLink: RouterLinkStub } });
+    mount(Fruits, { store, stubs: { RouterLink: RouterLinkStub } });
 
     await store.dispatch("getFruits");
     expect(store.state.fruits.length).toBe(7);