From 3c6b0e0223acf0ec898bc869bcf523532bd7fbca Mon Sep 17 00:00:00 2001
From: shenyu <448766534@qq.com>
Date: Mon, 16 Dec 2019 23:48:13 +0800
Subject: [PATCH] fix: Reward

---
 layout/_partial/after-footer.ejs |   3 +
 layout/_partial/article.ejs      |  32 +-------
 layout/_partial/mathjax.ejs      |   2 +-
 layout/_partial/modal.ejs        |  21 ++++++
 layout/_partial/post/gitalk.ejs  |  34 ++++-----
 layout/_partial/post/valine.ejs  |   2 +-
 layout/layout.ejs                |   1 +
 source/css/_partial/ayer.styl    |  10 +++
 source/css/_partial/reward.styl  | 123 +++++++++++++++++++------------
 source/css/_partial/tooltip.styl |  29 --------
 source/css/style.styl            |   1 -
 source/js/ayer.js                |  16 ++--
 12 files changed, 141 insertions(+), 133 deletions(-)
 create mode 100644 layout/_partial/modal.ejs
 delete mode 100644 source/css/_partial/tooltip.styl

diff --git a/layout/_partial/after-footer.ejs b/layout/_partial/after-footer.ejs
index 21fdd99..bbcc119 100644
--- a/layout/_partial/after-footer.ejs
+++ b/layout/_partial/after-footer.ejs
@@ -31,6 +31,9 @@
 
 <%- js('js/ayer') %>
 
+<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
+
 <% if (theme.mathjax){ %>
   <%- partial('mathjax') %>
 <% } %>
diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
index 47546ec..cb0d557 100644
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@@ -32,36 +32,8 @@
       <% } %>
       <!-- 打赏 -->
       <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
-        <div class="page-reward">
-          <a href="javascript:void(0);" class="page-reward-btn tooltip-top" target="_self">
-            <div class="tooltip tooltip-east">
-              <span class="tooltip-item">
-                赏
-              </span>
-              <span class="tooltip-content">
-                <span class="tooltip-text">
-                  <span class="tooltip-inner">
-                    <p class="reward-p"><i class="icon icon-quo-left"></i><%= theme.reward_wording%><i
-                        class="icon icon-quo-right"></i></p>
-                    <div class="reward-box">
-                      <% if(theme.alipay) {%>
-                      <div class="reward-box-item">
-                        <img class="reward-img" src="<%- url_for(theme.alipay) %>">
-                        <span class="reward-type">支付宝</span>
-                      </div>
-                      <% } %>
-                      <% if(theme.weixin) {%>
-                      <div class="reward-box-item">
-                        <img class="reward-img" src="<%- url_for(theme.weixin) %>">
-                        <span class="reward-type">微信</span>
-                      </div>
-                      <% } %>
-                    </div>
-                  </span>
-                </span>
-              </span>
-            </div>
-          </a>
+        <div id="reward-btn">
+          打赏
         </div>
         <% } %>
     </div>
diff --git a/layout/_partial/mathjax.ejs b/layout/_partial/mathjax.ejs
index b7d1997..73213ef 100644
--- a/layout/_partial/mathjax.ejs
+++ b/layout/_partial/mathjax.ejs
@@ -15,4 +15,4 @@
   });
 </script>
 
-<script src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
\ No newline at end of file
+<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.6/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
\ No newline at end of file
diff --git a/layout/_partial/modal.ejs b/layout/_partial/modal.ejs
new file mode 100644
index 0000000..0e8124b
--- /dev/null
+++ b/layout/_partial/modal.ejs
@@ -0,0 +1,21 @@
+<div id="mask"></div>
+
+<!-- #reward -->
+<div id="reward">
+  <span class="close"><i class="ri-close-line"></i></span>
+  <p class="reward-p"><i class="ri-cup-line"></i><%= theme.reward_wording%></p>
+  <div class="reward-box">
+    <% if(theme.alipay) {%>
+    <div class="reward-item">
+      <img class="reward-img" src="<%- url_for(theme.alipay) %>">
+      <span class="reward-type">支付宝</span>
+    </div>
+    <% } %>
+    <% if(theme.weixin) {%>
+    <div class="reward-item">
+      <img class="reward-img" src="<%- url_for(theme.weixin) %>">
+      <span class="reward-type">微信</span>
+    </div>
+    <% } %>
+  </div>
+</div>
\ No newline at end of file
diff --git a/layout/_partial/post/gitalk.ejs b/layout/_partial/post/gitalk.ejs
index 8f86da6..fcf12ef 100644
--- a/layout/_partial/post/gitalk.ejs
+++ b/layout/_partial/post/gitalk.ejs
@@ -1,21 +1,21 @@
 <% if (theme.gitalk.enable) { %>
-  <div class="gitalk" id="gitalk-container"></div>
-  <%- css('https://unpkg.com/gitalk/dist/gitalk.css') %>
-  <%- js('https://unpkg.com/gitalk/dist/gitalk.min.js') %>
-  <%- js('https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js') %>
-  <script type="text/javascript">
-    var gitalk = new Gitalk({
-      clientID: '<%- theme.gitalk.clientID %>',
-      clientSecret: '<%- theme.gitalk.clientSecret %>',
-      repo: '<%- theme.gitalk.repo %>',
-      owner: '<%- theme.gitalk.owner %>',
-      admin: ['<%- theme.gitalk.admin %>'],
-      // id: location.pathname,      // Ensure uniqueness and length less than 50
-      id: md5(location.pathname),
-      distractionFreeMode: false,  // Facebook-like distraction free mode
-      pagerDirection: 'last'
-    })
+<div class="gitalk" id="gitalk-container"></div>
+<%- css('https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.css') %>
+<%- js('https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.min.js') %>
+<%- js('https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js') %>
+<script type="text/javascript">
+  var gitalk = new Gitalk({
+    clientID: '<%- theme.gitalk.clientID %>',
+    clientSecret: '<%- theme.gitalk.clientSecret %>',
+    repo: '<%- theme.gitalk.repo %>',
+    owner: '<%- theme.gitalk.owner %>',
+    admin: ['<%- theme.gitalk.admin %>'],
+    // id: location.pathname,      // Ensure uniqueness and length less than 50
+    id: md5(location.pathname),
+    distractionFreeMode: false,  // Facebook-like distraction free mode
+    pagerDirection: 'last'
+  })
 
   gitalk.render('gitalk-container')
-  </script>
+</script>
 <% } %>
\ No newline at end of file
diff --git a/layout/_partial/post/valine.ejs b/layout/_partial/post/valine.ejs
index 674823a..eea7dd9 100644
--- a/layout/_partial/post/valine.ejs
+++ b/layout/_partial/post/valine.ejs
@@ -5,7 +5,7 @@
     </div>
 </div>
 <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
-<script src='//unpkg.com/valine@1.3.10/dist/Valine.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>
 <script>
     new Valine({
         el: '#vcomments',
diff --git a/layout/layout.ejs b/layout/layout.ejs
index 3feaacc..5440462 100644
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -16,6 +16,7 @@
         <% } %>
         <%- partial('_partial/sidebar') %>
       </aside>
+      <%- partial('_partial/modal') %>
       <%- partial('_partial/after-footer') %>
   </div>
 </body>
diff --git a/source/css/_partial/ayer.styl b/source/css/_partial/ayer.styl
index a74bd64..ac0918f 100644
--- a/source/css/_partial/ayer.styl
+++ b/source/css/_partial/ayer.styl
@@ -61,6 +61,16 @@
   text-align center
   transform scale(1.2)
 
+#mask
+  position fixed
+  left 0
+  top 0
+  width 100%
+  height 100%
+  background-color rgba(0,0,0,.8)
+  z-index 9998
+  display none
+
 // Media Query
 @media (max-width: 768px)
   .cover-inner
diff --git a/source/css/_partial/reward.styl b/source/css/_partial/reward.styl
index b3beb15..9b2f653 100644
--- a/source/css/_partial/reward.styl
+++ b/source/css/_partial/reward.styl
@@ -1,54 +1,81 @@
-.page-reward 
-  margin: 60px 0;
-  text-align: center;
-
-  .page-reward-btn
-    position: relative;
-    display: inline-block;
-    width: 56px;
-    height: 56px;
-    line-height: 56px;
-    font-size: 20px;
-    color: #fff;
-    background: body-color;
-    border-radius: 50%;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    -webkit-transition: .4s ease-in-out;
-    transition: .4s ease-in-out;
-
+#reward-btn
+    position relative
+    display inline-block
+    height 36px
+    line-height 36px
+    margin-top 3rem
+    padding 0 20px
+    font-size 18px
+    color #fff
+    background body-color
+    text-decoration none
+    border-radius 4px
+    margin-left 50%
+    transform translateX(-50%)
+    box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
+    -webkit-transition .4s ease-in-out
+    transition .4s ease-in-out
+    cursor pointer
     &:hover,
     &:active
-      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2);
+      box-shadow 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2)
     
-
-    .tooltip-item 
-      display: block;
-      width: 56px;
-      height: 56px;
-    
-
-  .reward-box 
-    display: flex;
-    justify-content: space-around;
-  
-
+#reward 
+  position absolute
+  z-index 9999
+  left 50%
+  top 20%
+  transform translateX(-50%)
+  margin 60px 0
+  padding 0px 20px 20px
+  background-color lighten(water,30%)
+  display none
+  .close
+    height 28px
+    line-height 28px
+    width 28px
+    display block
+    text-align center
+    position absolute
+    right: -12px;
+    top: -10px;
+    border-radius: 50%
+    background-color body-color
+    cursor pointer
+    i
+      font-size: 20px
+      color white
   .reward-p 
-    color: body-color;
-    font-weight: bold;
-    text-shadow: 1px 1px 1px main-color;
-
-    .icon 
-      margin: 0 10px;
-      color: #ddd;
-
+    color body-color
+    font-weight bold
+    font-size 20px
+    text-align center
+    text-shadow 1px 1px 1px main-color
+    i
+      margin 0 10px
+      transform translateY(2px)
+  .reward-box 
+    display: flex
+    justify-content space-between  
+    width 100%
+    .reward-item
+      text-align center
+      margin: 0 10px
   .reward-type 
-    font-size: 16px;
-    display: block;
-    color: #4d4d4d;
-    margin: 20px 0 0 0;
-
+    font-size 16px
+    display block
+    color black
+    margin-top 10px
   .reward-img 
-    width: 130px;
-    height: 130px;
-    border: 6px solid #fff;
-    border-radius: 3px;
\ No newline at end of file
+    display block
+    width 12rem
+    height 12rem
+    border-radius 3px
+
+@media (max-width: 768px)
+  #reward 
+    padding 0 10px 10px
+    .reward-img
+      max-width 10rem
+      max-height 10rem
+      margin 0 5px
\ No newline at end of file
diff --git a/source/css/_partial/tooltip.styl b/source/css/_partial/tooltip.styl
deleted file mode 100644
index 3136c0c..0000000
--- a/source/css/_partial/tooltip.styl
+++ /dev/null
@@ -1,29 +0,0 @@
-
- 
-
-.tooltip-top
-  .tooltip
-    display: inline;
-    position: relative;
-    z-index: 999;
-
-  /* Tooltip */
-
-  .tooltip-content
-    position: absolute;
-    z-index: 9999;
-    width: 370px;
-    left: 50%;
-    bottom: 70px;
-    font-size: 20px;
-    line-height: 1.4;
-    text-align: center;
-    font-weight: 400;
-    color: #4d4d4d;
-    background: water;
-    margin: 0 0 -10px -185px;
-    cursor: default;
-    display: none;
-    padding-bottom: 20px;
- 
- 
diff --git a/source/css/style.styl b/source/css/style.styl
index f8ce09d..238f936 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -68,7 +68,6 @@ button
 @import "_partial/gitalk"
 @import "_partial/apple"
 @import "_partial/reward"
-@import "_partial/tooltip"
 
 if sidebar
   @import "_partial/sidebar"
diff --git a/source/js/ayer.js b/source/js/ayer.js
index 5a8b194..6d3f7a0 100644
--- a/source/js/ayer.js
+++ b/source/js/ayer.js
@@ -1,6 +1,6 @@
 (function ($) {
   //
-  // Search ------------
+  // Search
   var $searchWrap = $('.search-form-wrap'),
     isSearchAnim = false,
     searchAnimDuration = 200;
@@ -208,11 +208,15 @@
     $content.addClass('on');
     $sidebar.addClass('on');
   }
-  // 赞赏
-  $('.tooltip-item').hover(function () {
-    $('.tooltip-content').slideDown(150)
-  }, function () {
-    $('.tooltip-content').slideUp(150)
+
+  // reward
+  $('#reward-btn').on('click', function () {
+    $('#mask').fadeIn(100)
+    $('#reward').fadeIn(100)
+  });
+  $('#reward .close, #mask').on('click', function () {
+    $('#mask').fadeOut(100)
+    $('#reward').fadeOut(100)
   })
 })(jQuery);