fix https://github.com/b3log/solo/issues/12627

Jane/css/base.css

@@ -37,7 +37,7 @@
  * skin style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 0.1.0.1, Jan 2, 2019
+ * @version 0.2.0.0, Jan 30, 2019
 */
 /*
  * Symphony - A modern community (forum/BBS/SNS/blog) platform written in Java.
@@ -780,6 +780,23 @@ a {
     padding: 10px; }
 
 .b3-solo-list {
+  position: fixed;
+  right: -200px;
+  background-color: #2a2a2a;
+  top: 0;
+  margin: 0 !important;
+  height: 100vh;
+  overflow: auto;
+  width: 200px;
+  padding: 10px !important;
+  box-sizing: border-box;
+  transition: all 1s ease;
+  opacity: 0;
+  color: #fff;
+  font-size: 14px !important; }
+  .b3-solo-list a {
+    color: #fff; }
+  .b3-solo-list::-webkit-scrollbar {
     display: none; }
 
 .header {
@@ -812,7 +829,8 @@ a {
   max-width: 768px;
   margin: 0 auto;
   padding: 0 70px 0 20px;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+  transition: all 1s ease; }
 
 .footer {
   color: #999;

Jane/css/base.scss

@@ -19,7 +19,7 @@
  * skin style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 0.1.0.1, Jan 2, 2019
+ * @version 0.2.0.0, Jan 30, 2019
 */
 @import "../../../scss/reset";
 @import "../../../scss/reset-content";
@@ -76,8 +76,29 @@ a {
 }
 
 .b3-solo-list {
+  position: fixed;
+  right: -200px;
+  background-color: #2a2a2a;
+  top: 0;
+  margin: 0 !important;
+  height: 100vh;
+  overflow: auto;
+  width: 200px;
+  padding: 10px !important;
+  box-sizing: border-box;
+  transition: all 1s ease;
+  opacity: 0;
+  color: #fff;
+  font-size: 14px !important;
+
+  a {
+    color: #fff;
+  }
+
+  &::-webkit-scrollbar {
     display: none;
   }
+}
 
 // header
 .header {
@@ -120,6 +141,7 @@ a {
   margin: 0 auto;
   padding: 0 70px 0 20px;
   box-sizing: border-box;
+  transition: all 1s ease;
 }
 
 // footer

Jane/js/common.js

@@ -19,7 +19,7 @@
  * @fileoverview util and every page should be used.
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 0.1.0.0, Dec 7, 2018
+ * @version 0.2.0.0, Jan 30, 2019
  */
 
 /**
@@ -27,6 +27,19 @@
  * @static
  */
 var Skin = {
+  initToc: function () {
+    if ($('.b3-solo-list li').length > 0 && $(window).width() > 768) {
+      $('.b3-solo-list').css({
+        right: '50px',
+        'border-right': '1px solid #fff',
+        opacity: 1,
+      })
+      $('#pjax.wrapper').css({
+        'max-width': '968px',
+        'padding-right': '270px',
+      })
+    }
+  },
   init: function () {
     Util.initPjax(function () {
       $('.header a').each(function () {
@@ -36,6 +49,15 @@ var Skin = {
           this.className = 'tooltipped tooltipped__w'
         }
       })
+
+      if ($('.b3-solo-list li').length > 0 && $(window).width() > 768) {
+        $('#pjax.wrapper').css({
+          'max-width': '968px',
+          'padding-right': '270px',
+        })
+      } else {
+        $('#pjax.wrapper').removeAttr('style')
+      }
     })
 
     $('.header a').each(function () {

Jane/js/common.min.js

@@ -15,4 +15,4 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-var Skin={init:function(){Util.initPjax(function(){$(".header a").each(function(){this.href===location.href?this.className="current tooltipped tooltipped__w":this.className="tooltipped tooltipped__w"})}),$(".header a").each(function(){this.href===location.href&&(this.className="current tooltipped tooltipped__w")}).click(function(){$(".header a").removeClass("current"),this.className="current tooltipped tooltipped__w"}),$("body").on("click",".content-reset img",function(){window.open(this.src)})}};Skin.init();
+var Skin={initToc:function(){0<$(".b3-solo-list li").length&&768<$(window).width()&&($(".b3-solo-list").css({right:"50px","border-right":"1px solid #fff",opacity:1}),$("#pjax.wrapper").css({"max-width":"968px","padding-right":"270px"}))},init:function(){Util.initPjax(function(){$(".header a").each(function(){this.href===location.href?this.className="current tooltipped tooltipped__w":this.className="tooltipped tooltipped__w"}),0<$(".b3-solo-list li").length&&768<$(window).width()?$("#pjax.wrapper").css({"max-width":"968px","padding-right":"270px"}):$("#pjax.wrapper").removeAttr("style")}),$(".header a").each(function(){this.href===location.href&&(this.className="current tooltipped tooltipped__w")}).click(function(){$(".header a").removeClass("current"),this.className="current tooltipped tooltipped__w"}),$("body").on("click",".content-reset img",function(){window.open(this.src)})}};Skin.init();

Jane/macro-comments.ftl

@@ -114,7 +114,7 @@
         var commentFormHTML = '<table class=\'form comments__reply comments__content\' id=\'replyForm\'>'
         page.addReplyForm(id, commentFormHTML)
     };
-    (function () {
+    $(document).ready(function () {
         page.load({
             language: {
                 theme: 'tomorrow-night-eighties'
@@ -123,6 +123,7 @@
         // emotions
         page.replaceCommentsEm('#comments .content-reset')
         <#nested>
-    })()
+        Skin.initToc()
+    })
 </script>
 </#macro>