评论新增状态进度条

hiPsyDuck · Dec 26, 2020 · 2c2327b · 2c2327b
1 parent 697e967
commit 2c2327b
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 139 deletions.
diff --git a/CSS/shortcode.white.css b/CSS/shortcode.white.css
@@ -3,139 +3,155 @@
 * @author: psyduck
 */
 
+* {
+    font-family: 'Arima Madurai', Microsoft JhengHei, Georgia, Times, serif;
+    -webkit-appearance: none;
+}
 
-.ArtinArt{
-	padding: 20px;
-	background: #eee;
-	border-radius: 30px;
-	max-width: 300px;
-	margin: 10px auto;
+.ArtinArt {
+    padding: 20px;
+    background: white;
+    max-width: 300px;
+    margin: 10px auto;
+    /*box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.12);*/
+    border: 1px solid #eee;
 }
-.ArtinArt h4{
-	margin:0;
-	border: none;
+
+.ArtinArt h4 {
+    margin: 0;
+    border: none;
 }
-.ArtinArt h4 a::after{
-	display: none;
+
+.ArtinArt h4 a::after {
+    display: none;
 }
+
 .ArtinArt p {
-	margin-top:5px!important;
-	margin-bottom: 0;
-	color:hsla(0,0%,100%,.6);
-}
-
-.post-download{
-
-}
-.post-download a{
-  border: 1px solid #666;
-  padding: 0.7rem 2rem;
-  display: inline-block;
-  max-width: 150px;
-  border-radius: 100000000rem;
-  text-align: center;
-  color:#333!important;
-  text-overflow: ellipsis;
-  white-space: nowrap !important;
-  overflow: hidden;
-
-  -webkit-transition: .3s ease all;
-  -moz-transition: .3s ease all;
-  -ms-transition: .3s ease all;
-  -o-transition: .3s ease all;
-  transition: .3s ease all;
-}
-.post-download a span::before{
-  font-size: 1rem;
-  content: ' ';
-  display: inline-block;
-  position: relative;
-  width: 1rem;
-  height: 1rem;
-  top: 0.2rem;
-  left: -0.4rem;
-  background-size: contain;
-  background-image: url(https://i.loli.net/2019/02/15/5c66d1a1484bd.png);
-  -webkit-transition: .3s ease all;
-  -moz-transition: .3s ease all;
-  -ms-transition: .3s ease all;
-  -o-transition: .3s ease all;
-  transition: .3s ease all;
-}
-.post-download a:hover span::before{
-  font-size: 1rem;
-  content: ' ';
-  display: inline-block;
-  position: relative;
-  width: 1rem;
-  height: 1rem;
-  top: 0.2rem;
-  left: -0.4rem;
-  background-size: contain;
-  background-image: url(https://i.loli.net/2019/02/15/5c66d1a148f1d.png);
-}
-
-.post-download a::after{
-  display: none;
-}
-.post-download a:hover{
-  background:#666;
-  color:white!important;
-}
-.post-content-notice{
-	margin:15px 0;
-	border:1.5px solid RGB(121,145,209);
-	border-radius: 10px;
-	padding: 1.5rem 1.25rem 1.5rem 3.5rem;
-	position: relative;
-	overflow: hidden;
-}
-.post-content-notice:before{
-	content: " ";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: url(../IMG/notice.svg) no-repeat;
-  opacity: .1;
-}
-
-.post-content-warn{
-	margin:15px 0;
-	border:1.5px solid RGBA(184,2,51,0.6);
-	border-radius: 10px;
-	padding: 1.5rem 1.25rem 1.5rem 3.5rem;
-	position: relative;
-	overflow: hidden;
-}
-.post-content-warn:before{
-	content: " ";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: url(../IMG/warn.svg) no-repeat;
-  opacity: .1;
-}
-.post-content-tag{
-	display: inline-block;
-  margin: 0 5px;
-  padding: .2rem .4rem;
-	font-size:12px;
-	vertical-align: middle;
-  border-radius: 3px;
-}
-.tag-blue{
-	color: RGB(121,145,209);
-	border: 0.0625rem solid RGB(121,145,209);
-}
-.tag-black{
-	color: #444;
-	border: 0.0625rem solid #444;
-}
-.tag-red{
-	color: RGBA(184,2,51,0.6);
-	border: 0.0625rem solid RGBA(184,2,51,0.6);
+    margin-top: 5px !important;
+    margin-bottom: 0;
+    color: hsla(0, 0%, 100%, .6);
+}
+
+.post-download {
+
+}
+
+.post-download a {
+    margin: 10px auto;
+    border: 1px solid #3A8FB7;
+    padding: 0.7rem 2rem;
+    display: inline-block;
+    max-width: 150px;
+    /*border-radius: 100000000rem;*/
+    text-align: center;
+    color: #3A8FB7 !important;
+    text-overflow: ellipsis;
+    white-space: nowrap !important;
+    overflow: hidden;
+    -webkit-transition: .3s ease all;
+    -moz-transition: .3s ease all;
+    -ms-transition: .3s ease all;
+    -o-transition: .3s ease all;
+    transition: .3s ease all;
+}
+
+.post-download a span::before {
+    font-size: 1rem;
+    content: ' ';
+    display: inline-block;
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    top: 0.2rem;
+    left: -0.4rem;
+    background-size: contain;
+    background-image: url(https://i.loli.net/2020/12/26/LcASwXYP6tuiHU2.png);
+    -webkit-transition: .3s ease all;
+    -moz-transition: .3s ease all;
+    -ms-transition: .3s ease all;
+    -o-transition: .3s ease all;
+    transition: .3s ease all;
+}
+
+.post-download a:hover span::before {
+    font-size: 1rem;
+    content: ' ';
+    display: inline-block;
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    top: 0.2rem;
+    left: -0.4rem;
+    background-size: contain;
+    background-image: url(https://i.loli.net/2020/12/26/BbECH2sj4x69kDS.png);
+}
+
+.post-download a::after {
+    display: none;
+}
+
+.post-download a:hover {
+    background: #3A8FB7;
+    color: white !important;
+}
+
+.post-content-notice {
+    margin: 15px 0;
+    border: 1.5px solid RGB(121, 145, 209);
+    padding: 1.5rem 1.25rem 1.5rem 3.5rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.post-content-notice:before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: url(../IMG/notice.svg) no-repeat;
+    opacity: .1;
+}
+
+.post-content-warn {
+    margin: 15px 0;
+    border: 1.5px solid RGBA(184, 2, 51, 0.6);
+    padding: 1.5rem 1.25rem 1.5rem 3.5rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.post-content-warn:before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: url(../IMG/warn.svg) no-repeat;
+    opacity: .1;
+}
+
+.post-content-tag {
+    display: inline-block;
+    margin: 0 5px;
+    padding: 0 .5rem;
+    font-size: 12px;
+    vertical-align: middle;
+}
+
+.tag-blue {
+    color: RGB(121, 145, 209);
+    border: 0.0625rem solid RGB(121, 145, 209);
+}
+
+.tag-black {
+    color: #444;
+    border: 0.0625rem solid #444;
+}
+
+.tag-red {
+    color: RGBA(184, 2, 51, 0.6);
+    border: 0.0625rem solid RGBA(184, 2, 51, 0.6);
 }
diff --git a/CSS/white.css b/CSS/white.css
@@ -209,6 +209,14 @@ label input[type="checkbox"]:checked+span>span{
 	opacity: 1;
 }
 
+#toast-container > .customer-warn {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
+}
+
+.customer-warn {
+	background-color: #3A8FB7!important;
+}
+
 .ins-search-container {
   z-index: 1000!important;
 }

diff --git a/JS/X.js b/JS/X.js
@@ -146,7 +146,7 @@ function ajaxc(){
 		 * 发送前的处理
 		 */
 		function beforeSendComment() {
-			// $("#comment-loading").fadeIn();
+			NProgress.start();
 			$(".submit").fadeOut();
 			$("#OwO-container").slideUp();
 		}
@@ -157,8 +157,8 @@ function ajaxc(){
 		 */
 		function afterSendComment(ok) {
 				if (ok) {
-						$("#textarea").val('');
-						replyTo = '';
+					$("#textarea").val('');
+					replyTo = '';
 				}
 				bindButton();
 		}
@@ -170,15 +170,15 @@ function ajaxc(){
 						url: $(this).attr('action'),
 						data: commentData,
 						error: function (e) {
+								NProgress.done();
 								console.log('Ajax Comment Error');
 								window.location.reload();
 						},
 						success: function (data) {
 								if (!$('#comments', data).length) {
+										NProgress.done();
 										var msg = $('title').eq(0).text().trim().toLowerCase() === 'error' ? $('.container', data).eq(0).text() : '评论提交失败！';
-
-										toastr.warning(msg, 'QAQ');
-										//$("#comment-loading").fadeOut();
+										toastr.warning(msg, 'QAQ', {"iconClass": 'customer-warn'});
 										$(".submit").fadeIn();
 										afterSendComment(false);
 										return false;
@@ -220,16 +220,16 @@ function ajaxc(){
 												TypechoComment.cancelReply();
 										}
 								}
+								NProgress.done(true);
 								afterSendComment(true);
 
 						},
 						error:function(){
-							//$("#comment-loading").fadeOut();
+							NProgress.done();
 							$(".submit").fadeIn();
 						},
 						complete:function(){
-							// toastr.success('送信完了', '发送成功');
-							//$("#comment-loading").fadeOut();
+							NProgress.done();
 							$(".submit").fadeIn();
 						}
 				});

diff --git a/footer.php b/footer.php
@@ -49,6 +49,8 @@
 
 	<script src="https://cdn.bootcss.com/fancybox/3.5.6/jquery.fancybox.min.js"></script>
 
+    <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
+
 	<?php $this->footer(); ?>
 
 

diff --git a/header.php b/header.php
@@ -30,6 +30,8 @@
 
 	<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
 
+    <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
+
 	<style>
 		.article-item {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,6 +49,8 @@

		<script src="https://cdn.bootcss.com/fancybox/3.5.6/jquery.fancybox.min.js"></script>

		<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>

		<?php $this->footer(); ?>


Expand Down
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,8 @@ @@
     	<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
     	<style>
     		.article-item {
@@ Expand Down @@