kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
43 wiersze
1.2 KiB
Vue
43 wiersze
1.2 KiB
Vue
<template>
|
|
<div class="content">
|
|
<ul class="resources">
|
|
<li v-for="resource in resources" :key="resource.id"><b-icon v-if="resource.icon" :icon="resource.icon" :pack="resource.iconPack" size="is-small" /><svgicon v-if="resource.svgicon" class="icon" :icon="resource.svgicon" color="#555" /><img v-if="resource.iconImg" class="icon" :src="resource.iconImg" />{{ resource.prefix ? resource.prefix + ': ' : '' }}<a :href="resource.url" target="_blank">{{ resource.title }}</a><span class="subdued author" v-if="resource.author">(by {{ resource.author }} on {{ resource.date | formatSubmittedDate }})</span><span v-if="resource.suffix" class="subdued details">{{ resource.suffix }}</span></li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
|
|
export default {
|
|
name: 'ResourceList',
|
|
props: {
|
|
resources: Array
|
|
},
|
|
filters: {
|
|
formatSubmittedDate (date) {
|
|
return moment.unix(date).format('DD MMM YYYY')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.resources {
|
|
margin-top: 0.5em;
|
|
list-style: none;
|
|
margin-left: 1em;
|
|
}
|
|
.resources .icon {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
vertical-align: bottom;
|
|
margin-right: 0.3em;
|
|
opacity: 0.5;
|
|
}
|
|
.author, .details {
|
|
display: inline-block;
|
|
margin-left: 0.5em;
|
|
}
|
|
</style>
|