💄 Optimize comment components display style.

assets/css/_common/scaffolding/comments.scss

@@ -53,6 +53,9 @@
       vertical-align: middle;
       font-weight: 700;
       font-size: 1.4em;
+      @include mobile-small() {
+        font-size: $font-size-smaller;
+      }
     }
 
     @if $two_comments_enable {
@@ -61,6 +64,10 @@
         float: right;
         margin: 2px auto;
         padding: 4px 16px;
+        @include mobile-small() {
+          font-size: $font-size-smaller;
+          padding: 4px;
+        }
         width: max-content;
         border-radius: 8px;
         background: #eee;
@@ -83,7 +90,7 @@
         .switch-btn {
           position: relative;
           display: inline-block;
-          margin: -4px 8px 0;
+          margin: 5px;
           width: 42px;
           height: 22px;
           border-radius: 34px;
@@ -147,6 +154,11 @@
       $second_comment_display: block;
     }
 
+    .comment-wrap .storage {
+      display: block;
+      animation: 0.5s ease 0s 1 normal none running tabshow;
+    }
+
     .comment-wrap>div:nth-child(1) {
       display: $first_comment_display;
     }

assets/js/next-boot.js

@@ -50,6 +50,7 @@ NexT.boot.refresh = function() {
   NexT.utils.registerLangSelect();*/
   NexT.utils.registerSidebarTOC();
   NexT.utils.registerPostReward();
+  NexT.utils.initCommontesDispaly();
   NexT.utils.registerCommonSwitch();
   NexT.utils.wrapTableWithBox();
   NexT.utils.registerVideoIframe();

assets/js/utils.js

@@ -243,18 +243,30 @@ NexT.utils = {
     });
   },
 
+  initCommontesDispaly: function(){
+    const comms = document.querySelectorAll('.comment-wrap > div');
+    if (comms.length<=1) return;
+    comms.forEach(function(item){
+      var dis = window.getComputedStyle(item, null).display;
+      item.style.display = dis;
+    });
+  },
+
   registerCommonSwitch: function() {
     const button = document.querySelector('.comment-switch .switch-btn');
     if (!button) return;
-    const cwrap = document.querySelector('.comment-wrap');
+    const comms = document.querySelectorAll('.comment-wrap > div');
     button.addEventListener('click', () => {
       button.classList.toggle('move');
-      const comms = document.querySelectorAll('.comment-wrap > div');
-      let len = comms.length;
-      while(len--){
-        cwrap.appendChild(comms[len]);
+      comms.forEach(function(item){
+        item.style.display = item.style.display === 'none' ? 'block' : 'none';
+        if (item.style.display === 'block') {
+          item.style.animation = "0.8s ease 0s 1 normal none running tabshow";
+        } else {
+          item.style.removeProperty('animation');
         }
       });
+    });
   },
 
   activateNavByIndex: function(index) {

layouts/partials/_thirdparty/comment/utterances.html

@@ -1,6 +1,6 @@
 {{- with .Site.Params.utterances }}
 {{- if .enable }}
-<script src="//utteranc.es/client.js" 
+<script src="https://utteranc.es/client.js" 
 repo="{{ .repo }}" 
 issue-term="{{ .issueTerm }}" 
 label="{{ .label }}"