Bring some responsive styles, subject to later improvements

2020-12-04 17:38:59 +01:00
parent a9eb304a5c
commit bb09df70f5
15 changed files with 119 additions and 43 deletions
--- a/coverage/clover.xml
+++ b/coverage/clover.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1607048925926" clover="3.2.0">
-  <project timestamp="1607048925926" name="All files">
+<coverage generated="1607048976462" clover="3.2.0">
+  <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"/>
--- a/coverage/lcov-report/components/Grid.vue.html
+++ b/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>
--- a/coverage/lcov-report/components/index.html
+++ b/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>
--- a/coverage/lcov-report/index.html
+++ b/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>
--- a/coverage/lcov-report/views/Fruit.vue.html
+++ b/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>
--- a/coverage/lcov-report/views/Fruits.vue.html
+++ b/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>
--- a/coverage/lcov-report/views/index.html
+++ b/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>
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,18 +27,16 @@ export default {
 }

 main {
-  margin-top: 58px;
  padding: 1rem;
-
-  h1 {
-    font-size: 28px;
-  }
+  margin: 58px auto 0 auto;
+  max-width: 1200px;

  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>
--- a/src/assets/less/variables.less
+++ b/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) { ... }
--- a/src/components/Grid.vue
+++ b/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>
--- a/src/components/GridItem.vue
+++ b/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" />
-      <h2>{{ item.name }}</h2>
-      <span class="tag" :style="{ backgroundColor: item.color }">{{ item.taste }}</span>
-      <p class="price">{{ item.price + "$" }}</p>
+      <div class="thumbnail">
+        <img :src="item.image" :alt="item.name" />
+      </div>
+      <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 {
-    text-transform: capitalize;
+  &:hover .thumbnail img {
+    transform: scale(1.1);
  }

-  .tag {
-    font-weight: bold;
-    text-transform: lowercase;
-    display: inline-block;
-    color: #ffffff;
-    padding: 0.35rem;
-    min-width: 85px;
-    border-radius: 25px;
-  }
+  a {
+    display: block;
+    text-decoration: none;
+    color: inherit;

-  img {
-    width: 100%;
-    height: 350px;
-    object-fit: cover;
-    max-width: 100%;
-  }
+    .thumbnail {
+      height: 285px;
+      overflow: hidden;
+      box-shadow: 0 1px 4px 1px #d2d2f2;

-  .price {
-    font-size: 24px;
-    font-weight: bold;
+      img {
+        border-radius: 10px 10px 0 0;
+        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>
--- a/src/components/Header.vue
+++ b/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;
--- a/src/views/Fruit.vue
+++ b/src/views/Fruit.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <h1>Fruit Details</h1>
+    <h2>Fruit Details</h2>
    {{ this.fruit }}
  </div>
 </template>
--- a/src/views/Fruits.vue
+++ b/src/views/Fruits.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1>Fruits Directory</h1>
+  <div class="fruits">
+    <h2>Directory</h2>
    <Grid :data="this.fruits" />
  </div>
 </template>
--- a/tests/unit/fruits.spec.js
+++ b/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);