# All files / components/Grid GridItem.vue

66.67% Statements 2/3
100% Branches 0/0
50% Functions 1/2
66.67% Lines 2/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111

    1x

    2x

     <template>
      <article class="grid-item">
        <DeleteItem v-if="deleteMode" :item="item" />
        <router-link :to="`/fruit/${item.id}`">
          <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 | noDecimal }}</p>
          </section>
        </router-link>
      </article>
    </template>

    <script>
    import { mapState } from "vuex";

    export default {
      name: "GridItem",
      components: { DeleteItem: () => import("./DeleteItem") },
      props: {
        item: Object
      },
      computed: {
        ...mapState(["deleteMode"])
      },
      filters: {
        noDecimal(value) {
          return parseInt(value).toFixed();
        }
      }
    };
    </script>

    <style scoped lang="less">
    .grid-item {
      position: relative;
      z-index: 0;
      background-color: @color-2;
      border-radius: 10px;
      overflow: hidden;

      &:hover .thumbnail img {
        transform: scale(1.1);
      }

      a {
        display: block;
        color: inherit;

        .thumbnail {
          height: 285px;
          overflow: hidden;
          box-shadow: 0 1px 4px 1px #d2d2f2;

          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.35rem 0.75rem;
            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;
            color: #ff9700;
          }
        }
      }
    }
    </style>