From 4ddcf875d5d92ee3b6ec6cdf9f00303f01991c8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= <elkan1788@139.com>
Date: Mon, 20 Jun 2022 10:58:16 +0800
Subject: [PATCH] :lipstick:  Add comments plug-in loading style.

---
 .../components/third-party/utterances.scss    | 13 +++++-----
 assets/css/_common/scaffolding/comments.scss  | 25 ++++++++++++++-----
 .../_thirdparty/comment/comm_loading.html     |  3 +++
 .../partials/_thirdparty/comment/waline.html  |  3 ++-
 layouts/partials/comments.html                |  6 ++++-
 5 files changed, 36 insertions(+), 14 deletions(-)
 create mode 100644 layouts/partials/_thirdparty/comment/comm_loading.html

diff --git a/assets/css/_common/components/third-party/utterances.scss b/assets/css/_common/components/third-party/utterances.scss
index 114be85..c888764 100644
--- a/assets/css/_common/components/third-party/utterances.scss
+++ b/assets/css/_common/components/third-party/utterances.scss
@@ -1,6 +1,7 @@
-@if $utterances_enable {
-  .utterances {
-    //max-width: unset;
-    min-height: 300px;
-  }
-}
+// TODO maybe use for next time
+// @if $utterances_enable {
+//   .utterances {
+//     max-width: unset;
+//     min-height: 300px;
+//   }
+// }
diff --git a/assets/css/_common/scaffolding/comments.scss b/assets/css/_common/scaffolding/comments.scss
index 7dd7b54..e8f9403 100644
--- a/assets/css/_common/scaffolding/comments.scss
+++ b/assets/css/_common/scaffolding/comments.scss
@@ -43,8 +43,26 @@
     margin-top: 60px;
   }
 
+  min-height: 300px;
   overflow: hidden;
 
+  .comment-loading {
+    @if $sidebar_position == 'right' {
+      padding-right: $sidebar-desktop + $sidebar-offset;
+    } @else {
+      padding-left: $sidebar-desktop + $sidebar-offset;
+    }
+    
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 100px;
+    text-align: center;
+    font-size: 2em;
+  }
+
   .comment-head {
     margin-bottom: 20px;
 
@@ -70,7 +88,7 @@
         }
         width: max-content;
         border-radius: 8px;
-        background: #eee;
+        background: var(--card-bg-color);
 
         .first-comment {
           color: $first_comment_color;
@@ -154,11 +172,6 @@
       $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;
     }
diff --git a/layouts/partials/_thirdparty/comment/comm_loading.html b/layouts/partials/_thirdparty/comment/comm_loading.html
new file mode 100644
index 0000000..233faaa
--- /dev/null
+++ b/layouts/partials/_thirdparty/comment/comm_loading.html
@@ -0,0 +1,3 @@
+<div class="comment-loading">
+  <i class="fa fa-sync fa-spin"></i>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/_thirdparty/comment/waline.html b/layouts/partials/_thirdparty/comment/waline.html
index 589d3bc..d5ec2fc 100644
--- a/layouts/partials/_thirdparty/comment/waline.html
+++ b/layouts/partials/_thirdparty/comment/waline.html
@@ -15,7 +15,8 @@
     wordLimit: {{ .wordLimit }},
     requiredMeta: {{ .requiredMeta }},
     serverURL: "{{ .serverURL }}",
-    lang: "{{ $.Lang }}"
+    lang: "{{ $.Lang }}",
+    dark: "auto"
   });
 </script>
 {{- end }}  
\ No newline at end of file
diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html
index 694a149..3626216 100644
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
@@ -28,11 +28,15 @@
   {{- if $tc }}
   {{- range $sn }}
     <div>
+      {{- partial "_thirdparty/comment/comm_loading.html" . }}
       {{- partial (printf $cp (lower .name)) $root }}
     </div>
   {{- end }}
   {{- else }}
-    <div>{{- partial (printf $cp $fc) $root }}</div>
+    <div>      
+      {{- partial "_thirdparty/comment/comm_loading.html" . }}
+      {{- partial (printf $cp $fc) $root }}
+    </div>
   {{- end }}
   </div>
 </div>