ADD scroll placeholder

spemer · Dec 30, 2018 · 906be83 · 906be83
1 parent 285ee92
commit 906be83
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 8 deletions.
diff --git a/docs/dist/build.js b/docs/dist/build.js
diff --git a/docs/dist/build.js.map b/docs/dist/build.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -57,7 +57,7 @@
   <body>
     <div id="app"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <!-- <script src="https://spemer.github.io/vue-scroll-progress/dist/build.js"></script> -->
-    <script src="/dist/build.js"></script>
+    <script src="https://spemer.github.io/vue-scroll-progress/dist/build.js"></script>
+    <!-- <script src="/dist/build.js"></script> -->
   </body>
 </html>
diff --git a/docs/src/components/Placeholder.vue b/docs/src/components/Placeholder.vue
@@ -0,0 +1,28 @@
+<template lang="pug">
+  div#placeholder
+    p(
+      v-for="value in 100"
+      :key="value"
+    ) {{ textLoop.text }}
+</template>
+
+<script>
+export default {
+  name: 'placeholder',
+
+  data () {
+    return {
+      textLoop: {
+        text: 'Watch the top of the page while scrolling!',
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+#placeholder {
+  margin: $grid32x 0;
+  text-align: center;
+}
+</style>
diff --git a/docs/src/components/TopBtn.vue b/docs/src/components/TopBtn.vue
@@ -0,0 +1,52 @@
+<template lang="pug">
+  div#top(
+    v-scroll-to="{el: 'body', duration: 0}"
+  )
+    button.topbtn__btn(
+    ) {{ tooltip }}
+</template>
+
+<script>
+export default {
+  name: 'topBtn',
+
+  data () {
+    return {
+      tooltip: 'Top',
+    }
+  },
+
+  methods: {
+  },
+
+}
+</script>
+
+<style lang="scss">
+
+#top {
+  margin-bottom: $grid32x;
+
+  .topbtn__btn {
+    border: none;
+    outline: none;
+    color: $brand;
+    display: block;
+    margin: 0 auto;
+    cursor: pointer;
+    width: $grid32x;
+    height: $grid12x;
+    font-weight: 900;
+    margin-top: $grid16x;
+    border: $brand 1px solid;
+    background-color: #fff;
+    transition: all .25s ease;
+    @include border-radius($grid32x);
+
+    &:hover {
+      color: #fff;
+      background-color: $brand;
+    }
+  }
+}
+</style>
diff --git a/docs/src/page/Home.vue b/docs/src/page/Home.vue
@@ -5,6 +5,8 @@
     Readme
     Install
     Docs
+    Placeholder
+    TopBtn
     Footer
 </template>
 
@@ -15,6 +17,8 @@ import Hero from '../components/Hero'
 import Readme from '../components/Readme'
 import Install from '../components/Install'
 import Docs from '../components/Docs'
+import Placeholder from '../components/Placeholder'
+import TopBtn from '../components/TopBtn'
 import Footer from '../components/Footer'
 
 export default {
@@ -24,6 +28,8 @@ export default {
     Readme,
     Install,
     Docs,
+    Placeholder,
+    TopBtn,
     Footer,
   }
 }

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-scroll-progress",
   "description": "Simple Vue.js plugin for page scroll progress bar",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": "spemer <ghsspower@naver.com>",
   "license": "MIT",
   "private": false,