improve mobile styles of replying form

2018-05-01 23:01:54 +03:00
parent 54615b0dff
commit 789fced894
7 changed files with 49 additions and 7 deletions
@@ -7,4 +7,8 @@
  &:hover {
    color: #06c5c5;
  }
+
+  &:focus {
+    outline: none;
+  }
 }
@@ -1,9 +1,19 @@
@import '../comment.vars';

-.comment_level {
-  @for $i from 1 through 5 {
+@for $i from 1 through 5 {
+  .comment_level {
    &_#{$i} {
-      margin-left: $i * ($avatarSize + $avatarOffset);
+      padding-left: $i * ($avatarSize + $avatarOffset);
+
+      &.comment_replying {
+        .comment__input {
+          margin-left: -$i * ($avatarSize + $avatarOffset);
+
+          @media (min-width: 768px) {
+            margin-left: 0;
+          }
+        }
+      }
    }
  }
 }
@@ -0,0 +1,28 @@
+.comment_replying {
+  border: 3px solid #eee;
+
+  @media (min-width: 768px) {
+    border: 0;
+    padding-top: 0;
+  }
+
+  .comment__body {
+    padding: 8px 8px 0;
+
+    @media (min-width: 768px) {
+      padding: 0;
+    }
+  }
+
+  .comment__input {
+    border-left-width: 0;
+    border-right-width: 0;
+    border-bottom-width: 0;
+    padding-left: 0;
+
+    @media (min-width: 768px) {
+      border: 3px solid #eee;
+      padding-left: 32px;
+    }
+  }
+}
@@ -22,9 +22,8 @@ require('./__vote/_type/_down/comment__vote_type_down.scss');
 require('./__vote/_type/_up/comment__vote_type_up.scss');

 require('./_level/comment_level.scss');
-
 require('./_pinned/comment_pinned.scss');
-
+require('./_replying/comment_replying.scss');
 require('./_useless/comment_useless.scss');

 require('./_view/_admin/comment_view_admin.scss');
@@ -1,5 +1,5 @@
 .input__button_type_preview {
-  &:hover {
+  &:hover, &:focus {
    box-shadow: inset 0 0 0 2px #0aa;
    color: #099;
  }
@@ -2,7 +2,7 @@
  background: #0aa;
  color: #fff;

-  &:hover {
+  &:hover, &:focus {
    background: #06c5c5;
  }
 }
@@ -59,6 +59,7 @@ export default class Input extends Component {
      <form className={b('input', props)} onSubmit={this.send}>
        <textarea
          className="input__field"
+          placeholder="Your comment here"
          onInput={this.autoResize}
          onKeyDown={this.onKeyDown}
          style={{ height }}