opendev/storyboard-vue
Code Issues Proposed changes

Add a component for entries in a Story list

Browse Source 
We're going to want to list Stories in more than one place, and we
should use a reusable component for the entries to keep the UI
consistent.
This commit is contained in:
Adam Coldrick 2020-05-08 16:08:54 +01:00
parent e76ad5fbe0
commit 32357f5d6d
2 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/StoryListItem.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<div class="story">
<h3>
<router-link :to="'/story/' + story.id">{{ story.id }}. {{ story.title }}</router-link>
</h3>
<span class="tag" v-for="tag in story.tags" :key="tag">{{ tag }}</span>
</div>
</template>
<script>
export default {
name: 'StoryListItem',
props: ['story']
}
</script>
<style lang="scss" scoped>
.story {
padding: 20px;
border-top: solid 1px #ddd;
&:hover {
background-color: #fff;
}
h3 {
margin-top: 0;
font-size: 1.25em;
font-weight: 300;
}
}
.tag {
padding: 6px 12px;
margin: 0 5px;
background-color: #f0ad4e;
color: #f7f6f4;
border-radius: 20px;
}
</style>

36
src/views/StoryList.vue
View File

@ -1,20 +1,19 @@
<template>
<div class="story-list">
<h1>Stories</h1>
<div class="story" v-for="story in stories" :key="story.id">
<h3>
<router-link :to="'/story/' + story.id">{{ story.id }}. {{ story.title }}</router-link>
</h3>
<span class="tag" v-for="tag in story.tags" :key="tag">{{ tag }}</span>
</div>
<StoryListItem v-for="story in stories" :key="story.id" :story="story" />
</div>
</template>
<script>
import axios from 'axios'
import StoryListItem from '@/components/StoryListItem.vue'
export default {
name: 'StoryListView',
components: {
StoryListItem
},
data: function () {
return {
stories: []
@ -34,28 +33,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.story {
padding: 20px;
border-top: solid 1px #ddd;
&:hover {
background-color: #fff;
}
h3 {
margin-top: 0;
font-size: 1.25em;
font-weight: 300;
}
}
.tag {
padding: 6px 12px;
margin: 0 5px;
background-color: #f0ad4e;
color: #f7f6f4;
border-radius: 20px;
}
</style>