From 01cfbcfd490faf3fb4968965eb20de391fa98440 Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Fri, 11 May 2018 23:49:07 +0300
Subject: [PATCH] show mobile replying only for touch devices

---
 .../comment/_level/comment_level.scss         |  6 +--
 .../comment/_replying/comment_replying.scss   | 52 ++++++++-----------
 2 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/web/app/components/comment/_level/comment_level.scss b/web/app/components/comment/_level/comment_level.scss
index 2e9d6e69..8ba7a197 100644
--- a/web/app/components/comment/_level/comment_level.scss
+++ b/web/app/components/comment/_level/comment_level.scss
@@ -7,10 +7,8 @@ $step: 24px;
 
       &.comment_replying {
         .comment__input {
-          margin-left: -$i * $step;
-
-          @media (min-width: 768px) {
-            margin-left: 0;
+          @media (hover: none) and (max-width: 768px) {
+            margin-left: -$i * $step;
           }
         }
       }
diff --git a/web/app/components/comment/_replying/comment_replying.scss b/web/app/components/comment/_replying/comment_replying.scss
index e5844853..1235a983 100644
--- a/web/app/components/comment/_replying/comment_replying.scss
+++ b/web/app/components/comment/_replying/comment_replying.scss
@@ -1,38 +1,32 @@
 .comment_replying {
-  border: 8px solid #eee;
-  padding-bottom: 0;
-
-  @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;
-    border-top-width: 8px;
-
-    @media (min-width: 768px) {
-      border: 12px solid #eee;
-    }
+    border: 12px solid #eee;
   }
 
   .comment__score {
-    top: 12px;
-    right: 8px;
+    top: 4px;
+    right: 0;
+  }
 
-    @media (min-width: 768px) {
-      top: 4px;
-      right: 0;
+  // it isn't mobile first, but it's fine here
+  @media (hover: none) and (max-width: 768px) {
+    border: 8px solid #eee;
+    padding-bottom: 0;
+
+    .comment__body {
+      padding: 8px 8px 0;
+    }
+
+    .comment__input {
+      border-left-width: 0;
+      border-right-width: 0;
+      border-bottom-width: 0;
+      border-top-width: 8px;
+    }
+
+    .comment__score {
+      top: 12px;
+      right: 8px;
     }
   }
 }