Add Story components

resources/assets/js/components/Stories.vue

@@ -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);
 				});
 			}
 		}

resources/assets/js/components/StoryCompose.vue

@@ -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>