john
/
timekeeper
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor: componentize responsive grid

This commit is contained in:
pskfyi 2022-01-10 02:14:02 -08:00 committed by pskfyi
parent f0fb7a5981
commit 7c0a3b6375
2 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/ResponsiveGrid.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div
class="grid gap-4"
:class="`grid-cols-${min} md:grid-cols-${mid} 2xl:grid-cols-${max}`"
>
<slot />
</div>
</template>
<script>
export default {
props: {
min: { type: [Number, String], default: 1 },
mid: { type: [Number, String], default: 2 },
max: { type: [Number, String], default: 3 },
},
}
</script>

27
pages/Missions.vue
View File

@ -1,33 +1,12 @@
<template> <template>
<div class="tab-content grid md:overflow-hidden"> <responsive-grid>
<template v-for="(mission, index) in $store.state.missions">
<progress-button <progress-button
v-for="(mission, index) in $store.state.missions"
:key="index" :key="index"
:label="mission.name" :label="mission.name"
:description="mission.description" :description="mission.description"
:max="mission.completionCriteria.cost" :max="mission.completionCriteria.cost"
:value="$store.state.currency" :value="$store.state.currency"
/> />
</template> </responsive-grid>
</div>
</template> </template>
<style scoped>
.tab-content {
--columns: 1;
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
grid-gap: 1rem;
}
/* md */
@media (min-width: 768px) {
.tab-content {
--columns: 2;
}
}
/* 2xl */
@media (min-width: 1536px) {
.tab-content {
--columns: 3;
}
}
</style>