UI fine-tuning.

ArtalkJS · May 3, 2020 · a2f34ff · a2f34ff
1 parent a0aab71
commit a2f34ff
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 32 deletions.
diff --git a/dist/Artalk.css b/dist/Artalk.css
diff --git a/dist/Artalk.js b/dist/Artalk.js
diff --git a/index-tpl.ejs b/index-tpl.ejs
@@ -5,6 +5,7 @@
   <title><%= htmlWebpackPlugin.options.title %></title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
+    * { box-sizing: border-box; }
     body { padding:45px 10px;margin:0;background:#f4f4f4 }
     .card { margin:0 auto;max-width:700px;position:relative;overflow:hidden;background:#FFF;border-radius:4px;padding:20px }
     .card:not(:last-child) { margin-bottom:10px }
@@ -16,6 +17,11 @@
     .desc { font-size:12px;color:#757e91 }
     .social { margin-top:20px }
     .social > a:not(:last-child) { margin-right:2px }
+    @media only screen and (max-width: 768px) {
+      body { padding: 0;background: #FFF; }
+      .card.billboard { padding-top: 20px; }
+      .card { width: 100%;padding: 5px; }
+    }
   </style>
 </head>
 <body>

diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
   <title>Artalk DEMO</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
+    * { box-sizing: border-box; }
     body { padding:45px 10px;margin:0;background:#f4f4f4 }
     .card { margin:0 auto;max-width:700px;position:relative;overflow:hidden;background:#FFF;border-radius:4px;padding:20px }
     .card:not(:last-child) { margin-bottom:10px }
@@ -16,8 +17,13 @@
     .desc { font-size:12px;color:#757e91 }
     .social { margin-top:20px }
     .social > a:not(:last-child) { margin-right:2px }
+    @media only screen and (max-width: 768px) {
+      body { padding: 0;background: #FFF; }
+      .card.billboard { padding-top: 20px; }
+      .card { width: 100%;padding: 5px; }
+    }
   </style>
-<link href="dist/Artalk.css?a5ea79944862d0fc7c61" rel="stylesheet"><script type="text/javascript" src="dist/Artalk.js?a5ea79944862d0fc7c61"></script></head>
+<link href="dist/Artalk.css?98f27d36b704e08ccdb6" rel="stylesheet"><script type="text/javascript" src="dist/Artalk.js?98f27d36b704e08ccdb6"></script></head>
 <body>
   <div class="card billboard">
     <div class="title"><a href="https://github.com/qwqcode/Artalk" target="_blank"><span>&gt; </span>Artalk<span> &lt;</span></a></div>

diff --git a/src/assets/emoticons.json b/src/assets/emoticons.json
@@ -9,13 +9,13 @@
       "流口水": "￣﹃￣",
       "捂脸": "(/ω＼)",
       "给跪": "∠( ᐛ 」∠)＿",
-      "蛤？": "(๑•̀ㅁ•́ฅ)",
+      "哈？": "(๑•̀ㅁ•́ฅ)",
       "斜眼": "→_→",
       "加油": "୧(๑•̀⌄•́๑)૭",
       "有木有WiFi": "٩(ˊᗜˋ*)و",
       "前方高能预警": "(ノ°ο°)ノ",
-      "我从未见过如此厚颜无耻之人": "(´இ皿இ｀)",
-      "吓死宝宝惹": "⌇●﹏●⌇",
+      "纳尼": "(´இ皿இ｀)",
+      "吓死惹": "⌇●﹏●⌇",
       "已阅留爪": "(ฅ´ω`ฅ)",
       "去吧大师球": "(╯°A°)╯︵○○○",
       "太萌惹": "φ(￣∇￣o)",

diff --git a/src/components/Comment.ts b/src/components/Comment.ts
@@ -119,7 +119,7 @@ export default class Comment extends ArtalkContext {
       // console.log(this.nestedNo)
       if (this.nestedNum < this.maxNestedNo) {
         this.childrenEl = Utils.createElement('<div class="artalk-comment-children"></div>')
-        this.contentEl.appendChild(this.childrenEl)
+        this.mainEl.appendChild(this.childrenEl)
       } else {
         this.childrenEl = this.parent.getChildrenEl()
       }

diff --git a/src/components/List.ts b/src/components/List.ts
@@ -1,7 +1,7 @@
 import md5 from 'md5'
 import '../css/list.less'
 import Comment from './Comment'
-import { ListData } from '~/types/artalk-data'
+import { ListData, CommentData } from '~/types/artalk-data'
 import Artalk from '../Artalk'
 import ArtalkContext from '../ArtalkContext'
 import Utils from '../utils'
@@ -99,7 +99,8 @@ export default class List extends ArtalkContext {
       const children = rawData.filter(o => o.rid === parentC.data.id)
       if (children.length === 0) return
 
-      children.forEach((itemData) => {
+      children.forEach((itemData: CommentData) => {
+        itemData.is_allow_reply = parentC.data.is_allow_reply
         const childC = new Comment(this.artalk, this, itemData)
         parentC.putChild(childC)
 
@@ -108,7 +109,8 @@ export default class List extends ArtalkContext {
     }
 
     // 开始处理 rawData
-    rawData.filter((o) => o.rid === 0).forEach((rootCommentData) => {
+    rawData.filter((o) => o.rid === 0).forEach((rootCommentData: CommentData) => {
+      if (rootCommentData.is_collapsed) rootCommentData.is_allow_reply = false
       const rootComment = new Comment(this.artalk, this, rootCommentData)
       this.artalk.comments.push(rootComment) // 将评论导入 comments 总表中
 

diff --git a/src/css/_variables.less b/src/css/_variables.less
@@ -14,5 +14,6 @@
 @line-height: 1.6em;
 
 @block-margin: 15px;
+@block-margin-mobile: 7px;
 @block-padding: 10px;
 @block-radius: 4px;
diff --git a/src/css/comment.less b/src/css/comment.less
@@ -1,7 +1,6 @@
 .artalk-comment-wrap {
   overflow: hidden;
   position: relative;
-  margin-bottom: 10px;
   border-bottom: 1px solid @color-border;
 
   &.artalk-flash-once {
@@ -141,6 +140,19 @@
             }
           }
         }
+
+        &.artalk-read-more-mask:after {
+          pointer-events: none;
+          position: absolute;
+          z-index: 1;
+          display: block;
+          overflow: hidden;
+          width: 100%;
+          content: " ";
+          bottom: 0;
+          height: 41px;
+          background: linear-gradient(180deg, hsla(0,0%,100%,0), hsla(0,0%,100%,1));
+        }
       }
 
       & > .artalk-footer {
@@ -178,29 +190,33 @@
           }
         }
       }
+    }
+  }
 
-      .artalk-comment-children {
-        margin-top: 10px;
-        border-radius: 3px;
-        border-left: 1px dashed hsla(0,0%,93%,.5);
-
-        .artalk-comment-wrap {
-          border-bottom-color: transparent;
-          &:not(:last-child) {
-            margin-bottom: 5px;
-          }
+  .comment-small-size() {
+    border-bottom-color: transparent;
+    &:not(:last-child) {
+      margin-bottom: 5px;
+    }
 
-          & > .artalk-comment {
-            padding-top: 4px;
-            padding-bottom: 4px;
+    & > .artalk-comment {
+      padding-top: 4px;
+      padding-bottom: 4px;
 
-            & > .artalk-avatar img {
-              width: 36px;
-              height: 36px;
-            }
-          }
-        }
+      & > .artalk-avatar img {
+        width: 36px;
+        height: 36px;
       }
     }
   }
+
+  .artalk-comment-children {
+    .artalk-comment-wrap {
+      margin-top: 10px;
+      border-radius: 3px;
+      border-left: 1px dashed hsla(0,0%,93%,.5);
+
+      .comment-small-size()
+    }
+  }
 }
diff --git a/src/css/editor.less b/src/css/editor.less
@@ -6,6 +6,12 @@
   position: relative;
   background: #FFF;
 
+  @media only screen and (max-width: 768px) {
+    & > {
+      margin-bottom: @block-margin-mobile;
+    }
+  }
+
   & > .artalk-editor-header {
     display: flex;
     flex-direction: row;

diff --git a/src/templates/Editor.ejs b/src/templates/Editor.ejs
@@ -5,7 +5,7 @@
     <input name="link" placeholder="网址 (https://)" class="artalk-link" type="url">
   </div>
   <div class="artalk-editor-textarea-wrap">
-    <div class="artalk-close-comment" style="display: none;"><span>此页仅管理员可评论</span></div>
+    <div class="artalk-close-comment" style="display: none;"><span>仅管理员可评论</span></div>
     <textarea id="artalk-editor-textarea" class="artalk-editor-textarea" placeholder="<%= artalk.conf.placeholder %>"></textarea>
   </div>
   <div class="artalk-editor-plug-wrap" style="display: none;"></div>