Improve comment style (#85)

<img width="312" alt="スクリーンショット 2019-03-17 19 49 10" src="https://user-images.githubusercontent.com/35331195/54489306-37f91d80-48ee-11e9-90e8-af64483e730b.png">


Co-authored-by: bsky <[email protected]>
Co-authored-by: nzws <[email protected]>

assets/scss/page/live.scss

@@ -18,7 +18,8 @@ html[data-page='live'] {
     overflow-x: hidden;
     display: flex;
     flex-direction: column-reverse;
-    height: calc(100vh - 130px);
+    height: calc(100vh - 155px);
+    margin: 10px -8px 0 0;
   }
 
   .disable_reverse#comments {
@@ -89,6 +90,7 @@ html[data-page='live'] {
   .comment {
     display: block;
     background-color: #393f4f;
+    z-index: -1;
   }
 
   .comment .avatar {
@@ -160,8 +162,9 @@ html[data-page='live'] {
     margin-top: 0.1rem;
   }
 
-  .live-info {
-    margin-right: 15px;
+  .box-sizing {
+    margin: 0;
+    cursor: pointer;
   }
 
   .comment-option {

browserslist

@@ -1 +1 @@
-last 1 version
+last 2 version

include/live/comment.php

@@ -19,4 +19,4 @@
     </span>
   </p>
 </div>
-<div id="comments" class="comment_block mt-1<?=!empty($my["misc"]["comment_classic"]) ? " disable_reverse" : null?>"></div>
+<div id="comments" class="comment_block<?=!empty($my["misc"]["comment_classic"]) ? " disable_reverse" : null?>"></div>

public/live.php

@@ -186,15 +186,29 @@
       <?php include "../include/footer.php"; ?>
     </div>
     <div class="col-xl-3 col-lg-4" id="comment">
-      <div>
-        <span class="text-secondary"><?=i("clock")?></span> <span class="live-info" id="time"></span>
-        <span class="live-info"><span class="text-secondary"><?=i("hat-wizard")?></span> <b class="point_count"><?=$live["point_count"]?></b>KP</span>
-        <span class="live-info"><span class="text-secondary"><?=i("comments")?></span> <b id="comment_count"><?=s($live["comment_count"])?></b></span>
-        <span id="count_open">
-          <span class="text-secondary"><?=i("users")?></span> <b class="count"><?=$live["viewers_count"]?></b> / <span class="max"><?=$live["viewers_max"]?></span>
+      <div class="row text-left justify-content-md-center box-sizing bg-dark border border-dark rounded">
+        <span class="col-6" data-tooltip="1" title="配信時間">
+          <span class="text-secondary ml-3"><?=i("clock")?></span>
+          <span id="time"></span>
         </span>
-        <span id="count_end" class="invisible">
-          <span class="text-secondary"><?=i("users")?></span> <span id="max_c"><?=$live["viewers_max_concurrent"]?></span> / <span class="max"><?=$live["viewers_max"]?></span>
+        <span class="col-6" data-tooltip="1" title="使用されたKP">
+          <span class="text-secondary ml-3"><?=i("hat-wizard")?> </span>
+          <span class="point_count"><?=$live["point_count"]?></span>KP
+        </span>
+        <div class="col-11 border-bottom"></div>
+        <span class="col-6" data-tooltip="1" title="コメント数">
+          <span class="text-secondary ml-3"><?=i("comments")?> </span>
+          <span id="comment_count"><?=s($live["comment_count"])?></span>
+        </span>
+        <span class="col-6" data-tooltip="1" title="視聴中 / 累計">
+          <span id="count_open">
+            <span class="text-secondary ml-3"><?=i("users")?> </span>
+            <span class="count"><?=$live["viewers_count"]?></span> / <span class="max"><?=$live["viewers_max"]?></span>
+          </span>
+          <span id="count_end" class="invisible">
+            <span class="text-secondary ml-3"><?=i("users")?> </span>
+            <span id="max_c"><?=$live["viewers_max_concurrent"]?></span> / <span class="max"><?=$live["viewers_max"]?></span>
+          </span>
         </span>
       </div>