Skip to content

Instantly share code, notes, and snippets.

@saitergun

saitergun/timeline.html

Created February 27, 2020 13:50
Show Gist options
  • Save saitergun/6fa253c4b8bfd509e88651aac0e0e14f to your computer and use it in GitHub Desktop.
Save saitergun/6fa253c4b8bfd509e88651aac0e0e14f to your computer and use it in GitHub Desktop.
Download ZIP
timeline placeholder
Raw
timeline.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timeline</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css" />
</head>
<body class="bg-gray-100">
<span id="app">
<nav class="w-full h-12 flex items-center justify-between bg-purple-700 px-8">
<span class="block w-24 h-8 bg-purple-600 rounded-sm"></span>
<span class="flex items-center">
<span class="block w-12 h-4 bg-purple-600 rounded-full"></span>
<span class="block w-12 h-4 bg-purple-600 rounded-full mx-4"></span>
<span class="block w-12 h-4 bg-purple-600 rounded-full"></span>
</span>
</nav>
<span class="grid grid-cols-12 gap-8 max-w-3xl mx-auto p-8">
<aside class="col-span-5">
<span class="block w-7/12 h-4 bg-gray-300 rounded-full"></span>
<span class="block w-10/12 h-4 bg-gray-300 rounded-full mt-3"></span>
<span class="block w-8/12 h-4 bg-gray-300 rounded-full mt-3"></span>
<span class="block w-11/12 h-4 bg-gray-300 rounded-full mt-3"></span>
</aside>
<main class="col-span-7">
<post :post="post" :class="{ 'mt-8': key }" :key="key" v-for="(post, key) in posts"></post>
<button
class="w-64 block bg-yellow-400 text-yellow-700 rounded font-semibold text-sm py-2 px-4 mt-4 mx-auto"
@click="pushPost">LOAD MORE</button>
</main>
</span>
</span>
<script type="text/x-template" id="template-post">
<span class="block w-full bg-white shadow-xs rounded-lg">
<header class="flex items-center justify-between sm:rounded-t py-3 px-3">
<span class="flex items-center py-1">
<span class="block w-8 h-8 bg-gray-300 rounded-full" />
<span class="flex items-start justify-start flex-col ml-3">
<span class="block w-32 h-3 bg-gray-300 rounded-full" />
<span class="block w-20 h-2 bg-gray-300 rounded-full mt-1" />
</span>
</span>
<span class="py-2 px-3">
<span class="block w-4 h-4 bg-gray-300 rounded-full" />
</span>
</header>
<main class="border-t border-b p-4">
<span class="block w-full h-3 bg-gray-300 rounded-full" :class="{ 'mt-3': n > 1 }" v-for="n in post.textLength" v-if="post.textLength" />
<span class="block w-2/3 h-3 bg-gray-300 rounded-full" :class="{ 'mt-3': post.textLength }" />
</main>
<footer class="w-full flex items-center py-3 px-4">
<span class="block flex-grow h-8 border rounded-full"></span>
<span class="block w-6 h-6 bg-gray-300 rounded-full ml-3"></span>
</footer>
</span>
</script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
Vue.component('post', {
template: '#template-post',
props: ['post'],
});
new Vue({
el: '#app',
data: () => ({
posts: [],
}),
methods: {
pushPost() {
for(let i = 1; i <= 10; i++) {
this.posts.push({
textLength: Math.floor(Math.random() * 6),
});
}
},
},
mounted() {
this.pushPost();
},
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment