mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-23 21:43:17 +00:00
Add Story components
This commit is contained in:
parent
549ce89b4b
commit
1faa7ac011
2 changed files with 64 additions and 5 deletions
|
@ -1,8 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-body" id="stories">
|
||||
|
||||
<div class="card stories-card">
|
||||
<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>
|
||||
|
@ -21,7 +34,7 @@
|
|||
},
|
||||
|
||||
beforeMount() {
|
||||
|
||||
//this.fetchStories();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
@ -32,7 +45,10 @@
|
|||
fetchStories() {
|
||||
axios.get('/api/v2/stories')
|
||||
.then(res => {
|
||||
this.stories = res.data
|
||||
this.stories = res.data;
|
||||
$('.stories-card .loader').hide();
|
||||
var stories = pixelfed.stories.create('stories');
|
||||
stories.update(this.stories);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
43
resources/assets/js/components/StoryCompose.vue
Normal file
43
resources/assets/js/components/StoryCompose.vue
Normal 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>
|
Loading…
Reference in a new issue