Add Story components

This commit is contained in:
Daniel Supernault 2019-02-10 19:20:21 -07:00
parent 549ce89b4b
commit 1faa7ac011
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
2 changed files with 64 additions and 5 deletions

View file

@ -1,8 +1,21 @@
<template> <template>
<div> <div>
<div class="card"> <div class="card stories-card">
<div class="card-body" id="stories"> <div class="card-header bg-white">
<p class="mb-0 d-flex align-items-center justify-content-between">
<span class="text-muted font-weight-bold">Stories</span>
<a class="text-dark small" href="/account/activity">See All</a>
</p>
</div>
<div class="card-body loader text-center" style="height: 120px;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card-body pt-2 contents" style="max-height: 120px; overflow-y: scroll;">
<div id="stories">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -21,7 +34,7 @@
}, },
beforeMount() { beforeMount() {
//this.fetchStories();
}, },
mounted() { mounted() {
@ -32,7 +45,10 @@
fetchStories() { fetchStories() {
axios.get('/api/v2/stories') axios.get('/api/v2/stories')
.then(res => { .then(res => {
this.stories = res.data this.stories = res.data;
$('.stories-card .loader').hide();
var stories = pixelfed.stories.create('stories');
stories.update(this.stories);
}); });
} }
} }

View file

@ -0,0 +1,43 @@
<template>
<div>
<div class="container">
<p class="display-4 text-center py-5">Share Your Story</p>
<div class="d-flex justify-content-center align-item-center">
<div class="bg-dark" style="width:400px;height:600px">
<p class="text-center text-light font-weight-bold">Add Photo</p>
</div>
</div>
</div>
</div>
</template>
<style type="text/css" scoped>
.navtab .nav-link {
color: #657786;
}
.navtab .nav-link.active {
color: #08d;
border-bottom: 4px solid #08d;
}
</style>
<script type="text/javascript">
export default {
data() {
return {
currentTab: 'upload',
};
},
mounted() {
this.welcomeMessage();
},
methods: {
welcomeMessage() {
}
}
}
</script>