Merge pull request #18 from chicio/pull-to-refresh 🚀

Pull to refresh 🚀

Author: chicio

CHANGELOG.md

@@ -1,6 +1,19 @@
 # Change Log
 All changes to Chicio coding will be documented in this file.
 
+## [1.14.0](https://github.com/chicio/chicio.github.io/releases/tag/1.14.0)
+Release date: 2019-09-15.
+
+#### Added
+
+- new pull to refresh feature
+- updated dependencies
+
+#### Fixed
+
+- flow build removes old js build
+- improved code quality with eslint
+
 ## [1.13.1](https://github.com/chicio/chicio.github.io/releases/tag/1.13.1)
 Release date: 2019-07-28.
 

_css/blog-pull-to-refresh.scss

@@ -0,0 +1,61 @@
+html {
+  overscroll-behavior-y: contain;
+}
+
+.pullable-content {
+  margin-top: 10px
+}
+
+.pull-to-refresh {
+  height: 100px; 
+  background-color: $general-background; 
+  margin-top: 55px;
+  margin-bottom: 10px;
+  box-shadow: inset 0px -2px 6px 1px $divider-color;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 10px;
+
+  &.visible-pull {
+    visibility: visible;
+  }
+  
+  &.hidden-pull {
+    visibility: hidden;
+  }
+  
+  .pull-to-refresh-status {
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  .pull-to-refresh-loader {
+    border: 3px solid $primary-color-dark;
+    border-top: 3px solid $primary-color-light;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    margin-bottom: 10px;
+    opacity: 0;
+  
+    &.animate {
+      animation: spin 1.25s linear infinite;
+    }
+  
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  }
+}
+
+.start-pull {
+  transform: translateY(-100px); 
+}
+
+.end-pull {
+  transform: translateY(-100px) !important;
+  transition: 0.4s ease-in-out;
+}

_css/style.blog.archive.scss

@@ -2,4 +2,5 @@
 @import "./blog-common.scss";
 @import "./blog-masthead.scss";
 @import "./blog-header.scss";
-@import "./blog-archive.scss";
+@import "./blog-archive.scss";
+@import "./blog-pull-to-refresh.scss";

_css/style.blog.home.scss

@@ -6,3 +6,4 @@
 @import "./blog-masthead.scss";
 @import "./blog-header.scss";
 @import "./blog-pages-button.scss";
+@import "./blog-pull-to-refresh.scss";

_css/style.blog.post.scss

@@ -9,4 +9,5 @@
 @import "./blog-post.scss";
 @import "./blog-recent-posts.scss";
 @import "./blog-post-tags.scss";
-@import "./disqus.scss";
+@import "./disqus.scss";
+@import "./blog-pull-to-refresh.scss";

_css/style.blog.tags.scss

@@ -3,4 +3,5 @@
 @import "./blog-masthead.scss";
 @import "./blog-header.scss";
 @import "./blog-post-tags.scss";
-@import "./blog-tags.scss";
+@import "./blog-tags.scss";
+@import "./blog-pull-to-refresh.scss";

_includes/blog-pull-to-refresh.html

@@ -0,0 +1,6 @@
+<div id="pull-to-refresh" class="pull-to-refresh start-pull hidden-pull">    
+    <div id="pull-to-refresh-loader" class="pull-to-refresh-loader"></div>
+    <div id="pull-to-refresh-status" class="pull-to-refresh-status">
+        Pull down to refresh
+    </div>
+</div>