UI | 评论样式完善 #15

FlyingSky-CN · Jan 12, 2020 · f2f9c3a · f2f9c3a
1 parent 4da3c59
commit f2f9c3a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/comments.php b/comments.php
@@ -57,7 +57,7 @@ function threadedComments($comments, $options) {
     <?php if($this->user->hasLogin()): ?>
     <p>登录身份: <a href="<?php $this->options->profileUrl(); ?>" target="_blank"><?php $this->user->screenName(); ?></a>. <a href="<?php $this->options->logoutUrl(); ?>" title="Logout"<?php if ($this->options->PjaxOption): ?> no-pjax <?php endif; ?>>退出 &raquo;</a></p>
     <?php endif; ?>
-    <p <?php if(!$this->user->hasLogin()): ?>class="textarea"<?php endif; ?>>
+    <p <?php if(!$this->user->hasLogin()): ?>class="textarea"<?php else: ?>style="margin-bottom:5px"<?php endif; ?>>
     <textarea name="text" id="textarea" placeholder="加入讨论..." required ><?php $this->remember('text'); ?></textarea>
     </p>
     <?php if(!$this->user->hasLogin()): ?>
@@ -113,7 +113,10 @@ function threadedComments($comments, $options) {
                     if (null != textarea && 'text' == textarea.name) {
                         textarea.focus()
                     }
-                    response.style.padding='8px 8px 0px 8px';
+                    response.style.padding='8px';
+                    <?php if(!$this->user->hasLogin()): ?>
+                    response.style.paddingBottom='5px';
+                    <?php endif; ?>
                     return false
                 },
                 cancelReply: function() {

diff --git a/header.php b/header.php
@@ -121,7 +121,7 @@
             }
         </style>
         <?php endif; ?>
-        <link rel="stylesheet" href="<?php cjUrl('style.css?v=12') ?>" />
+        <link rel="stylesheet" href="<?php cjUrl('style.css?v=13') ?>" />
     </head>
     <body class="<?php if($_COOKIE['dark']=='1'): ?>mdui-theme-layout-dark<?php endif; ?> <?php if ($this->options->mdrNavDefOpen): ?>mdui-drawer-body-left<?php endif; ?> mdui-appbar-with-toolbar mdui-drawer-body-right mdui-theme-accent-<?php if($_COOKIE['dark']=='1'){$this->options->mdrAccentD();}else{$this->options->mdrAccent();}?> mdui-theme-primary-<?=$this->options->mdrPrimary?>">
         <div class="mdui-progress" style="z-index:9999;position: fixed; <?php if ($this->options->mdrLoading == 'bottom') { ?> bottom:0 <?php } else { ?> top:0 <?php } ?>; left:0;display:none;border-radius: 0px;" id="loading">

diff --git a/page-whisper.php b/page-whisper.php
@@ -90,21 +90,23 @@ function threadedComments($comments, $options) {
 </div>
 <h3 id="response">发表<?php echo $this->user->pass('editor', true) ? '轻语' : '评论' ?></h3>
 <form method="post"<?php if($this->user->pass('editor', true)): ?> action="<?php $this->commentUrl() ?>"<?php endif; ?> id="comment-form"<?php if(!$this->user->hasLogin()): ?> class="comment-form clearfix"<?php endif; ?>>
-<p <?php if(!$this->user->hasLogin()): ?>class="textarea"<?php endif; ?>>
+<p <?php if(!$this->user->hasLogin()): ?>class="textarea"<?php else: ?>style="margin-bottom:5px"<?php endif; ?>>
 <textarea name="text" id="textarea" placeholder="说点什么..." required ><?php $this->remember('text'); ?></textarea>
 </p>
-<p <?php if(!$this->user->hasLogin()): ?>class="textbutton"<?php endif; ?>>
 <?php if(!$this->user->hasLogin()): ?>
+<p class="textbutton">
 <input type="text" name="author" id="author" class="text" placeholder="称呼 *" value="<?php $this->remember('author'); ?>" required />
 <input type="email" name="mail" id="mail" class="text" placeholder="邮箱<?php if ($this->options->commentsRequireMail): ?> *<?php endif; ?>" value="<?php $this->remember('mail'); ?>"<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?> />
 <input type="url" name="url" id="url" class="text" placeholder="http://<?php if ($this->options->commentsRequireURL): ?> *<?php endif; ?>" value="<?php $this->remember('url'); ?>"<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?> />
 <?php endif; ?>
 <button type="submit" class="submit mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">提交评论</button>
+<?php if(!$this->user->hasLogin()): ?>
 </p>
+<?php endif; ?>
 </form>
 </div>
 <?php if ($this->options->commentsThreaded): ?>
-<script>(function(){window.TypechoComment={dom:function(id){return document.getElementById(id)},create:function(tag,attr){var el=document.createElement(tag);for(var key in attr){el.setAttribute(key,attr[key])}return el},reply:function(cid,coid){var comment=this.dom(cid),parent=comment.parentNode,response=this.dom('<?php $this->respondId(); ?>'),input=this.dom('comment-parent'),form='form'==response.tagName?response:response.getElementsByTagName('form')[0],textarea=response.getElementsByTagName('textarea')[0];if(null==input){input=this.create('input',{'type':'hidden','name':'parent','id':'comment-parent'});form.appendChild(input)}input.setAttribute('value',coid);if(null==this.dom('comment-form-place-holder')){var holder=this.create('div',{'id':'comment-form-place-holder'});response.parentNode.insertBefore(holder,response)}form.setAttribute('action', '<?php $this->commentUrl() ?>');<?php if($this->user->pass('editor', true)): ?>this.dom('response').innerHTML='发表评论';<?php endif; ?>comment.appendChild(response);this.dom('cancel-comment-reply-link').style.display='';if(null!=textarea&&'text'==textarea.name){textarea.focus()}return false},cancelReply:function(){var response=this.dom('<?php $this->respondId(); ?>'),holder=this.dom('comment-form-place-holder'),input=this.dom('comment-parent'),form='form'==response.tagName?response:response.getElementsByTagName('form')[0];if(null!=input){input.parentNode.removeChild(input)}if(null==holder){return true}this.dom('cancel-comment-reply-link').style.display='none';form.removeAttribute('action');<?php if($this->user->pass('editor', true)): ?>this.dom('response').innerHTML='发表轻语';<?php endif; ?>holder.parentNode.insertBefore(response,holder);return false}}})();</script>
+<script>(function(){window.TypechoComment={dom:function(id){return document.getElementById(id)},create:function(tag,attr){var el=document.createElement(tag);for(var key in attr){el.setAttribute(key,attr[key])}return el},reply:function(cid,coid){var comment=this.dom(cid),parent=comment.parentNode,response=this.dom('<?php $this->respondId(); ?>'),input=this.dom('comment-parent'),form='form'==response.tagName?response:response.getElementsByTagName('form')[0],textarea=response.getElementsByTagName('textarea')[0];if(null==input){input=this.create('input',{'type':'hidden','name':'parent','id':'comment-parent'});form.appendChild(input)}input.setAttribute('value',coid);if(null==this.dom('comment-form-place-holder')){var holder=this.create('div',{'id':'comment-form-place-holder'});response.parentNode.insertBefore(holder,response)}form.setAttribute('action', '<?php $this->commentUrl() ?>');<?php if($this->user->pass('editor', true)): ?>this.dom('response').innerHTML='发表评论';<?php endif; ?>comment.appendChild(response);this.dom('cancel-comment-reply-link').style.display='';if(null!=textarea&&'text'==textarea.name){textarea.focus()}response.style.paddingTop='8px';<?php if(!$this->user->hasLogin()): ?>comment.style.paddingBottom='5px';<?php endif; ?>return false},cancelReply:function(){var response=this.dom('<?php $this->respondId(); ?>'),holder=this.dom('comment-form-place-holder'),input=this.dom('comment-parent'),form='form'==response.tagName?response:response.getElementsByTagName('form')[0];if(null!=input){<?php if(!$this->user->hasLogin()): ?>input.parentNode.parentNode.parentNode.style.paddingBottom='10px';<?php endif; ?>input.parentNode.removeChild(input)}if(null==holder){return true}this.dom('cancel-comment-reply-link').style.display='none';form.removeAttribute('action');<?php if($this->user->pass('editor', true)): ?>this.dom('response').innerHTML='发表轻语';<?php endif; ?>holder.parentNode.insertBefore(response,holder);return false}}})();</script>
 <?php endif; ?>
 <?php endif; ?>
 </div>

diff --git a/style.css b/style.css
@@ -39,7 +39,7 @@ input, textarea, button {
 }
 input, textarea {
     padding:5px;
-    border:1px solid #eee;
+    border:none;
     width:100%;
     height:30px;
     border-radius:2px;
@@ -490,10 +490,6 @@ button, input[type=submit], .menu-parent a, .rewards a {
     font-weight:bold;
     font-style:normal
 }
-.comment-list .respond {
-    margin-top:15px;
-    border-top:1px solid #eee
-}
 .respond .cancel-comment-reply {
     float:right;
     margin-top:15px;