snipette/snipette-gridsome
snipette/snipette-gridsome
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Post Card styling: make every sixth post "large"

Browse source 
This is consistent with the style Ghost uses to display posts
This commit is contained in:
Hippo 2019-12-24 13:47:40 +05:30
parent 9a0415d3ff
commit 2c63ea707e
2 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Card.vue
View file

@ -45,7 +45,8 @@ export default {
Avatar Avatar
}, },
props: { props: {
cardData: Object cardData: Object,
isLarge: Boolean
}, },
computed: { computed: {
articleClass() { articleClass() {
@ -57,6 +58,9 @@ export default {
var cardTagClass = "post-" + this.cardData.tags[i].slug; var cardTagClass = "post-" + this.cardData.tags[i].slug;
classes.push(cardTagClass); classes.push(cardTagClass);
} }
if (this.isLarge) {
classes.push("post-card-large");
}
return classes; return classes;
} }
}, },

2
src/pages/Index.vue
View file

@ -24,7 +24,7 @@
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">
<div class="inner"> <div class="inner">
<div class="post-feed"> <div class="post-feed">
<Card v-for="{ node } in $page.posts.edges" :key="node.id" :cardData="node" /> <Card v-for="{ node }, count in $page.posts.edges" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" />
</div> </div>
</div> </div>
</main> </main>