Hide some listing actions on mobile devices

[MAILPOET-2780]

assets/css/src/generic/_helpers.scss

@@ -43,6 +43,12 @@ span.mailpoet-gap-half {
   touch-action: none;
 }
 
+.mailpoet-hide-on-mobile {
+  @include respond-to(small-screen) {
+    display: none !important;
+  }
+}
+
 // Media query helpers
 .small-screen {
   display: none;

assets/js/src/forms/list.jsx

@@ -115,6 +115,7 @@ function getFormPlacement(settings) {
 const itemActions = [
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('edit'),
     link: function link(item) {
       return (
@@ -124,6 +125,7 @@ const itemActions = [
   },
   {
     name: 'duplicate',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: function onClick(item, refresh) {
       return MailPoet.Ajax.post({
@@ -151,6 +153,7 @@ const itemActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 

assets/js/src/listing/listing_item.jsx

@@ -76,7 +76,10 @@ class ListingItem extends React.Component {
 
           if (action.name === 'trash') {
             customAction = (
-              <span key={`action-${action.name}`} className="trash">
+              <span
+                key={`action-${action.name}`}
+                className={classNames(action.name, action.className)}
+              >
                 <a
                   type="button"
                   href="#"
@@ -94,7 +97,7 @@ class ListingItem extends React.Component {
               <span
                 onClick={this.props.onRefreshItems}
                 key={`action-${action.name}`}
-                className={action.name}
+                className={classNames(action.name, action.className)}
                 role="button"
                 tabIndex={index}
                 onKeyDown={(event) => {
@@ -112,7 +115,7 @@ class ListingItem extends React.Component {
             customAction = (
               <span
                 key={`action-${action.name}`}
-                className={action.name}
+                className={classNames(action.name, action.className)}
               >
                 { action.link(this.props.item, this.props.location) }
               </span>
@@ -121,7 +124,7 @@ class ListingItem extends React.Component {
             customAction = (
               <span
                 key={`action-${action.name}`}
-                className={action.name}
+                className={classNames(action.name, action.className)}
               >
                 <a
                   href="#"

assets/js/src/newsletters/automatic_emails/listings.jsx

@@ -114,6 +114,7 @@ const newsletterActions = [
   },
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     link: function link(newsletter) {
       return (
         <a href={`?page=mailpoet-newsletter-editor&id=${newsletter.id}`}>
@@ -124,6 +125,7 @@ const newsletterActions = [
   },
   {
     name: 'duplicate',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: (newsletter, refresh) => MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
@@ -146,6 +148,7 @@ const newsletterActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 

assets/js/src/newsletters/listings/notification.jsx

@@ -122,6 +122,7 @@ const newsletterActions = [
   },
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     link: function link(newsletter) {
       return (
         <a href={`?page=mailpoet-newsletter-editor&id=${newsletter.id}`}>
@@ -132,6 +133,7 @@ const newsletterActions = [
   },
   {
     name: 'duplicate',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: function onClick(newsletter, refresh) {
       return MailPoet.Ajax.post({
@@ -160,6 +162,7 @@ const newsletterActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 

assets/js/src/newsletters/listings/notification_history.jsx

@@ -110,6 +110,7 @@ const newsletterActions = addStatsCTAAction([
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ]);
 

assets/js/src/newsletters/listings/standard.jsx

@@ -133,11 +133,13 @@ let newsletterActions = [
   },
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('edit'),
     onClick: confirmEdit,
   },
   {
     name: 'duplicate',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: function onClick(newsletter, refresh) {
       return MailPoet.Ajax.post({
@@ -166,6 +168,7 @@ let newsletterActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 newsletterActions = addStatsCTAAction(newsletterActions);

assets/js/src/newsletters/listings/welcome.jsx

@@ -120,6 +120,7 @@ let newsletterActions = [
   },
   {
     name: 'duplicate',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: (newsletter, refresh) => MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
@@ -142,6 +143,7 @@ let newsletterActions = [
   },
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     link: function link(newsletter) {
       return (
         <a href={`?page=mailpoet-newsletter-editor&id=${newsletter.id}`}>
@@ -152,6 +154,7 @@ let newsletterActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 newsletterActions = addStatsCTAAction(newsletterActions);

assets/js/src/segments/dynamic_segments_list.jsx

@@ -85,6 +85,7 @@ const messages = {
 const itemActions = [
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     link: (item) => (
       <Link to={`/edit-segment/${item.id}`}>
         {MailPoet.I18n.t('edit')}
@@ -101,6 +102,7 @@ const itemActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 

assets/js/src/segments/list.jsx

@@ -108,6 +108,7 @@ const bulkActions = [
 const itemActions = [
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     link: function link(item) {
       return (
         <Link to={`/edit/${item.id}`}>{MailPoet.I18n.t('edit')}</Link>
@@ -119,6 +120,7 @@ const itemActions = [
   },
   {
     name: 'duplicate_segment',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: (item, refresh) => MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
@@ -144,6 +146,7 @@ const itemActions = [
   },
   {
     name: 'read_more',
+    className: 'mailpoet-hide-on-mobile',
     link: function link() {
       return (
         <a
@@ -203,12 +206,14 @@ const itemActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
     display: function display(segment) {
       return !isSpecialSegment(segment) && segment.automated_emails_subjects.length === 0;
     },
   },
   {
     name: 'delete',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('moveToTrash'),
     onClick: function onClick(segment) {
       MailPoet.Notice.error(

assets/js/src/subscribers/list.jsx

@@ -266,6 +266,7 @@ const itemActions = [
   },
   {
     name: 'sendConfirmationEmail',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('resendConfirmationEmail'),
     display: function display(subscriber) {
       return subscriber.status === 'unconfirmed' && subscriber.count_confirmations < window.mailpoet_max_confirmation_emails;
@@ -285,6 +286,7 @@ const itemActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];