🎨 add sponsors

src/main/webapp/admin/admin-about.ftl

@@ -27,7 +27,7 @@
                 <img width="128" src="${staticServePath}/images/logo.png" alt="Solo" title="Solo" />
             </a>
         </div>
-        <div class="fn__left vditor-reset about__panel" style="margin-left: 20px;">
+        <div class="about__panel">
             <div id="aboutLatest" class="about-margin fn__left">
                 ${checkingVersionLabel}
             </div>
@@ -39,14 +39,46 @@
             <div class="fn__clear"></div>
 
             ${aboutContentLabel}
+            <br/>
             <ul class="about-list">
                 <li><a target="_blank" href="https://hacpai.com/article/1492881378588">用户指南</a></li>
                 <li><a target="_blank" href="https://hacpai.com/article/1537690756242">Solo 从设计到实现</a></li>
                 <li><a target="_blank" href="https://hacpai.com/article/1493814851007">皮肤开发指南</a></li>
             </ul>
-            <button class="fn__right" onclick="window.open('https://hacpai.com/sponsor')">${sponsorLabel}</button>
         </div>
-        <span class="fn__clear" /> <br/>
+        <span class="fn__clear" /> <br/><br/>
+    </div>
+</div>
+
+<div class="module-panel">
+    <div class="module-header">
+        <h2>❤️ 欢迎成为我们的赞助者</h2>
+    </div>
+    <div class="module-body padding12">
+        <a href="https://b3log.org">B3log 开源组织</a>旗下包含
+        <a href="https://sym.b3log.org/">Symphony</a>、
+        <a href="https://solo.b3log.org/">Solo</a>、
+        <a href="https://github.com/b3log/pipe">Pipe</a>、
+        <a href="https://github.com/b3log/wide">Wide</a>、
+        <a href="https://github.com/b3log/latke">Latke</a>、
+        <a href="https://github.com/b3log/vditor">Vditor</a>、
+        <a href="https://github.com/b3log/gulu">Gulu</a>&nbsp;等一系列开源项目。随着项目规模的增长，我们需要有相应的资金支持才能持续项目的维护和开发。
+        <br/> <br/>
+        如果你觉得 Pipe 还算好用，可通过支付宝对我们进行赞助，谢谢 🙏
+        <br/> <br/>
+        <div class="ft__center">
+            <button class="fn__flex-inline" onclick="window.open('https://hacpai.com/sponsor')">
+                <svg viewBox="0 0 32 32" width="100%" height="100%"
+                     className={classes.svg}>
+                    <path
+                            d="M32 21.906v-15.753c0-3.396-2.757-6.152-6.155-6.152h-19.692c-3.396 0-6.152 2.756-6.152 6.152v19.694c0 3.396 2.754 6.152 6.152 6.152h19.694c3.027 0 5.545-2.189 6.058-5.066-1.632-0.707-8.703-3.76-12.388-5.519-2.804 3.397-5.74 5.434-10.166 5.434s-7.38-2.726-7.025-6.062c0.234-2.19 1.736-5.771 8.26-5.157 3.438 0.323 5.012 0.965 7.815 1.89 0.726-1.329 1.329-2.794 1.785-4.35h-12.433v-1.233h6.151v-2.212h-7.503v-1.357h7.504v-3.195c0 0 0.068-0.499 0.62-0.499h3.077v3.692h7.999v1.357h-7.999v2.212h6.526c-0.6 2.442-1.51 4.686-2.651 6.645 1.895 0.686 10.523 3.324 10.523 3.324v0 0 0zM8.859 24.736c-4.677 0-5.417-2.953-5.168-4.187 0.246-1.227 1.6-2.831 4.201-2.831 2.987 0 5.664 0.767 8.876 2.328-2.256 2.94-5.029 4.69-7.908 4.69v0 0z"></path>
+                </svg>
+                &nbsp;
+                使用支付宝进行赞助
+            </button>
+        </div>
+        <br/>
+        <ul id="adminAboutSponsors" style="list-style: none"></ul>
     </div>
 </div>
 ${plugins}

src/main/webapp/js/admin/about.js

@@ -20,40 +20,68 @@
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
  * @author <a href="http://88250.b3log.org">Liang Ding</a>
- * @version 1.0.1.4, Feb 18, 2017
+ * @version 1.1.0.0, Jul 17, 2019
  */
 
 /* about 相关操作 */
 admin.about = {
-    init: function() {
-        $.ajax({
-            url: "https://rhythm.b3log.org/version/solo/latest/" + Label.version,
-            type: "GET",
-            cache: false,
-            dataType: "jsonp",
-            success: function(data, textStatus) {
-                var version = data.soloVersion;
-                if (version === Label.version) {
-                    $("#aboutLatest").text(Label.upToDateLabel);
-                } else {
-                    $("#aboutLatest").html(Label.outOfDateLabel +
-                            "<a href='" + data.soloDownload + "'>" + version + "</a>");
-                }
-            },
-            complete: function(XHR, TS) {
-                admin.clearTip();
-            }
-        });
-    }
-};
+  init: function () {
+    $.ajax({
+      url: 'https://rhythm.b3log.org/version/solo/latest/' + Label.version,
+      type: 'GET',
+      cache: false,
+      dataType: 'jsonp',
+      success: function (data, textStatus) {
+        var version = data.soloVersion
+        if (version === Label.version) {
+          $('#aboutLatest').text(Label.upToDateLabel)
+        } else {
+          $('#aboutLatest').html(Label.outOfDateLabel +
+            '<a href=\'' + data.soloDownload + '\'>' + version + '</a>')
+        }
+      },
+      complete: function (XHR, TS) {
+        admin.clearTip()
+      },
+    })
+
+    $.ajax({
+      url: 'https://hacpai.com/apis/sponsors',
+      type: 'GET',
+      dataType: 'jsonp',
+      jsonp: 'callback',
+      success: function (data, textStatus) {
+        var payments = data.data.payments
+        var sponsprsHTML = ''
+        for (var i = 0; i < payments.length; i++) {
+          var userName = '<b>匿名好心人</b>'
+          if (payments[i].paymentUserName) {
+            userName = '<a href="https://hacpai.com/member/' +
+              payments[i].paymentUserName + '"><b>' + payments[i].paymentUserName +
+              '</b></a>'
+          }
+          sponsprsHTML += '<li><div class="fn__flex">' + userName + ' <span class="ft__green fn__flex-1">&nbsp;' +
+            payments[i].paymentAmount + 'RMB</span><time class="ft__fade">&nbsp;&nbsp;' +
+            payments[i].paymentTimeStr + '</time></div><div>' +
+            payments[i].paymentMemo + '</div></li>'
+        }
+        $('#adminAboutSponsors').html(sponsprsHTML)
+      },
+      complete: function (XHR, TS) {
+        admin.clearTip()
+      },
+    })
+
+  },
+}
 
 /*
  * 注册到 admin 进行管理 
  */
-admin.register["about"] = {
-    "obj": admin.about,
-    "init": admin.about.init,
-    "refresh": function() {
-        admin.clearTip();
-    }
-};
\ No newline at end of file
+admin.register['about'] = {
+  'obj': admin.about,
+  'init': admin.about.init,
+  'refresh': function () {
+    admin.clearTip()
+  },
+}
\ No newline at end of file

src/main/webapp/scss/_function.scss

@@ -19,19 +19,22 @@
  * Function and font text style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</ta>
- * @version 0.2.0.1, Mar 20, 2019
+ * @version 0.3.0.0, Jul 17, 2019
  */
 
 .fn {
   &__flex {
     display: flex;
+
     &-center {
       align-self: center;
     }
+
     &-inline {
       display: inline-flex;
       align-items: center;
     }
+
     &-1 {
       flex: 1;
       min-width: 1px;
@@ -83,6 +86,11 @@
 }
 
 .ft {
+
+  &__green {
+    color: #569e3d;
+  }
+
   &__13 {
     font-size: 13px;
   }

src/main/webapp/scss/admin.scss

@@ -20,7 +20,7 @@
 *
 * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
 * @author <a href="http://88250.b3log.org">Liang Ding</a>
-* @version 3.1.0.2, Mar 20, 2019
+* @version 3.2.0.0, Jul 17, 2019
 */
 @import "reset";
 @import "function";
@@ -616,24 +616,30 @@ button#submitArticle:hover {
 
 /* start about */
 .about-logo {
-  float: left;
-  margin: 20px 0 0 20px;
+  margin: 0 40px 0 20px;
+  align-self: center;
 }
 
 .about-margin {
-  font-size: 20px;
+  font-size: 18px;
   margin: 20px 0;
 }
 
-.vditor-reset .about-list li {
+.about__panel .about-list li {
   border: 0;
+  padding: 0;
+  margin-left: 24px;
 }
 
-.vditor-reset .about-list li:hover {
+.about__panel .about-list li:hover {
   background-color: #fff;
   text-decoration: underline;
 }
 
+.ft__fade {
+  color: rgba(0,0,0,.38)
+}
+
 /* end about */
 
 /*