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 | <template>
<div :class="{ error: !loading && !data.length }" class="grid">
<!-- Loading placeholder -->
<GridItemSkeleton v-if="loading" />
<GridItemSkeleton v-if="loading" />
<!-- Items -->
<GridItem v-else :key="item.id" v-for="item in data" :item="item" />
<!-- Error messages -->
<p v-if="!loading && !data.length" class="alert"><b>💡 Restart API</b>: 0 fruits !</p>
</div>
</template>
<script>
import { mapState } from "vuex";
import GridItemSkeleton from "./GridItemSkeleton";
export default {
name: "Grid",
components: {
GridItemSkeleton,
GridItem: () => import("./GridItem")
},
props: {
data: Array
},
computed: {
...mapState(["loading"])
}
};
</script>
<style scoped lang="less">
.grid {
display: grid;
grid-template-columns: 1fr;
column-gap: 1rem;
row-gap: 1.5rem;
&.error {
display: block;
}
@media screen and (min-width: @md) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: @lg) {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: @xl) {
grid-template-columns: repeat(4, 1fr);
}
.alert {
box-sizing: border-box;
margin: 0 auto;
width: 80%;
background-color: @color-3;
color: @color-2;
padding: 1rem 1.5rem;
border-radius: 4px;
@media screen and (min-width: @sm) {
width: 50%;
max-width: 535px;
}
pre {
padding: 1rem;
border-radius: 4px;
background-color: rgb(45, 48, 55);
span {
color: @color-3;
}
}
}
}
</style>
|