make comment actions less anxious, move them to bottom and paint to gray

2018-02-24 21:40:38 +02:00
parent 19ee942ea0
commit 3b0ec756e5
7 changed files with 20 additions and 25 deletions
@@ -1,4 +1,10 @@
 .comment__action {
-  margin-left: 8px;
+  color: #777;
+  font-weight: 700;
+  margin-right: 12px;
  cursor: pointer;
+
+  &:hover {
+    color: #06c5c5;
+  }
 }
@@ -1,3 +1,6 @@
 .comment__controls_view_admin {
-  color: #ff4700;
+  &::before {
+    content: '•';
+    margin-right: 12px;
+  }
 }
@@ -1,12 +1,5 @@
 .comment__controls {
  display: inline-block;
-  color: #06c5c5;
+  font-size: 12px;
  user-select: none;
-
-  @media (hover: hover) {
-    margin-left: 0;
-    transition: transform .2s .1s ease-out, opacity .2s .1s ease-out;
-    font-weight: 700;
-    opacity: 0;
-  }
 }
@@ -1,4 +1,4 @@
 .comment__input {
-  padding-left: 56px;
+  padding-left: 32px;
  margin-top: 8px;
 }
@@ -1,4 +1,6 @@
 .comment__text {
+  margin-bottom: 4px;
+
  p {
    margin: 0;

@@ -140,7 +140,7 @@ export default class Comment extends Component {

  render(props, { userBlocked, pinned, score, scoreIncreased, scoreDecreased, isInputVisible }) {
    const { data, mix, mods = {} } = props;
-    const isAdmin = store.get('user').admin;
+    const isAdmin = !store.get('user').admin;

    const time = new Date(data.time);
    // TODO: which format for datetime should we choose?
@@ -193,7 +193,11 @@ export default class Comment extends Component {
              </span>

              <span className="comment__time">{o.time}</span>
+            </div>

+            <div className="comment__text" dangerouslySetInnerHTML={{ __html: o.text }}/>
+
+            <div className="comment__actions">
              {
                !mods.disabled && (
                  <span className="comment__controls">
@@ -236,8 +240,6 @@ export default class Comment extends Component {
                )
              }
            </div>
-
-            <div className="comment__text" dangerouslySetInnerHTML={{ __html: o.text }}/>
          </div>
        </div>

@@ -6,15 +6,4 @@
  margin-bottom: $offset;
  font-size: 16px;
  line-height: 1.2;
-
-  &:hover {
-    .comment__controls {
-      font-weight: 700;
-
-      @media (hover: hover) {
-        transform: translateX(8px);
-        opacity: 1;
-      }
-    }
-  }
 }