From a2dabcac0e5e63cbd4a66a966cf69f2a6a4ce26c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 11 Jul 2017 01:26:25 +0700
Subject: [PATCH] Hide action labels on mobile

---
 client/coral-embed-stream/style/default.css          | 11 -----------
 client/coral-plugin-replies/ReplyButton.css          |  5 +++++
 client/coral-plugin-replies/ReplyButton.js           |  9 ++++++---
 plugins/coral-plugin-like/client/LikeButton.js       |  4 +++-
 plugins/coral-plugin-like/client/styles.css          |  6 ++++++
 plugins/coral-plugin-love/client/LoveButton.js       |  4 +++-
 plugins/coral-plugin-love/client/styles.css          |  6 ++++++
 plugins/coral-plugin-respect/client/RespectButton.js |  4 ++--
 plugins/coral-plugin-respect/client/styles.css       |  6 ++++++
 9 files changed, 37 insertions(+), 18 deletions(-)
 create mode 100644 client/coral-plugin-replies/ReplyButton.css

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index bd56cb748..3038e0da4 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -459,14 +459,3 @@ button.comment__action-button[disabled],
   width: initial;
 }
 
-
-@media (min-device-width : 300px) and (max-device-width : 420px) {
-  .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button {
-    visibility: collapse;
-    margin-left: -30px;
-  }
-
-  .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button .coral-plugin-replies-icon {
-    visibility: visible;
-  }
-}
diff --git a/client/coral-plugin-replies/ReplyButton.css b/client/coral-plugin-replies/ReplyButton.css
new file mode 100644
index 000000000..4f71e6630
--- /dev/null
+++ b/client/coral-plugin-replies/ReplyButton.css
@@ -0,0 +1,5 @@
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}
diff --git a/client/coral-plugin-replies/ReplyButton.js b/client/coral-plugin-replies/ReplyButton.js
index a66e3c156..4641ae02d 100644
--- a/client/coral-plugin-replies/ReplyButton.js
+++ b/client/coral-plugin-replies/ReplyButton.js
@@ -2,16 +2,19 @@ import React, {PropTypes} from 'react';
 
 import t from 'coral-framework/services/i18n';
 
-import classnames from 'classnames';
+import cn from 'classnames';
+import styles from './ReplyButton.css';
 
 const name = 'coral-plugin-replies';
 
 const ReplyButton = ({onClick}) => {
   return (
     <button
-      className={classnames(`${name}-reply-button`)}
+      className={cn(`${name}-reply-button`)}
       onClick={onClick}>
-      {t('reply')}
+      <span className={cn(`${name}-label`, styles.label)}>
+        {t('reply')}
+      </span>
       <i className={`${name}-icon material-icons`}
         aria-hidden={true}>reply</i>
     </button>
diff --git a/plugins/coral-plugin-like/client/LikeButton.js b/plugins/coral-plugin-like/client/LikeButton.js
index 7d17ef056..34b5e40f2 100644
--- a/plugins/coral-plugin-like/client/LikeButton.js
+++ b/plugins/coral-plugin-like/client/LikeButton.js
@@ -45,7 +45,9 @@ class LikeButton extends React.Component {
           className={cn(styles.button, {[styles.liked]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
-          <span>{t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}</span>
+          <span className={cn(`${plugin}-label`, styles.label)}>
+            {t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}
+          </span>
           <Icon name="thumb_up" className={`${plugin}-icon`} />
           <span className={`${plugin}-count`}>{count > 0 && count}</span>
         </button>
diff --git a/plugins/coral-plugin-like/client/styles.css b/plugins/coral-plugin-like/client/styles.css
index cb372fa47..b44c170e3 100644
--- a/plugins/coral-plugin-like/client/styles.css
+++ b/plugins/coral-plugin-like/client/styles.css
@@ -23,3 +23,9 @@
     }
   }
 }
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}
diff --git a/plugins/coral-plugin-love/client/LoveButton.js b/plugins/coral-plugin-love/client/LoveButton.js
index 7450ad668..d67160773 100644
--- a/plugins/coral-plugin-love/client/LoveButton.js
+++ b/plugins/coral-plugin-love/client/LoveButton.js
@@ -45,7 +45,9 @@ class LoveButton extends React.Component {
           className={cn(styles.button, {[styles.loved]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
-          <span>{t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}</span>
+          <span className={cn(`${plugin}-label`, styles.label)}>
+            {t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}
+          </span>
           <Icon name="favorite" className={`${plugin}-icon`} />
           <span className={`${plugin}-count`}>{count > 0 && count}</span>
         </button>
diff --git a/plugins/coral-plugin-love/client/styles.css b/plugins/coral-plugin-love/client/styles.css
index e16e17ca4..ac5a86370 100644
--- a/plugins/coral-plugin-love/client/styles.css
+++ b/plugins/coral-plugin-love/client/styles.css
@@ -23,3 +23,9 @@
     }
   }
 }
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}
diff --git a/plugins/coral-plugin-respect/client/RespectButton.js b/plugins/coral-plugin-respect/client/RespectButton.js
index 9bc556b67..878525051 100644
--- a/plugins/coral-plugin-respect/client/RespectButton.js
+++ b/plugins/coral-plugin-respect/client/RespectButton.js
@@ -45,11 +45,11 @@ class RespectButton extends React.Component {
           className={cn(styles.button, {[styles.respected]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
-          <span className={`${plugin}-button-text`}>
+          <span className={cn(`${plugin}-label`, styles.label)}>
             {t(alreadyReacted ? 'coral-plugin-respect.respected' : 'coral-plugin-respect.respect')}
           </span>
           <Icon className={cn(styles.icon, `${plugin}-icon`)} />
-          <span className={cn(styles.icon, `${plugin}-count`)}>{count > 0 && count}</span>
+          <span className={cn(`${plugin}-count`)}>{count > 0 && count}</span>
         </button>
       </div>
     );
diff --git a/plugins/coral-plugin-respect/client/styles.css b/plugins/coral-plugin-respect/client/styles.css
index f0b780b86..d08d648c3 100644
--- a/plugins/coral-plugin-respect/client/styles.css
+++ b/plugins/coral-plugin-respect/client/styles.css
@@ -28,3 +28,9 @@
 .icon {
   padding: 0 5px;
 }
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}