From c5ead503e8696a863bfc048299e173f1e740ca2f Mon Sep 17 00:00:00 2001
From: wxa <wxa@users.noreply.github.com>
Date: Wed, 8 Jul 2020 15:02:02 +0300
Subject: [PATCH] Redesign listing mobile version [MAILPOET-2778]

---
 .../_feature-announcement.scss                |  5 +++
 .../_listing-newsletters.scss                 |  6 +++
 .../css/src/components-plugin/_listing.scss   | 45 +++++++++++++++++--
 assets/css/src/components/_tabs.scss          | 13 +++---
 assets/js/src/listing/listing.jsx             | 40 +++++++++--------
 .../js/src/newsletters/listings/heading.jsx   |  2 +-
 6 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/assets/css/src/components-plugin/_feature-announcement.scss b/assets/css/src/components-plugin/_feature-announcement.scss
index b865ca1726..eed2e483c9 100644
--- a/assets/css/src/components-plugin/_feature-announcement.scss
+++ b/assets/css/src/components-plugin/_feature-announcement.scss
@@ -4,8 +4,13 @@
 
 .button.mailpoet_feature_announcement_button {
   height: 28px;
+  min-height: auto;
   padding: 0 5px 1px;
   position: relative;
+
+  @include respond-to(small-screen) {
+    margin-top: 10px;
+  }
 }
 
 .mailpoet_feature_announcement_icon {
diff --git a/assets/css/src/components-plugin/_listing-newsletters.scss b/assets/css/src/components-plugin/_listing-newsletters.scss
index 710fe0f686..eeba065961 100644
--- a/assets/css/src/components-plugin/_listing-newsletters.scss
+++ b/assets/css/src/components-plugin/_listing-newsletters.scss
@@ -153,3 +153,9 @@ h1.title.mailpoet-newsletter-listing-heading {
   stroke: $color-secondary;
   stroke-width: 2px;
 }
+
+@include respond-to(small-screen) {
+  .mailpoet-newsletter-listing-heading-wrapper {
+    float: left;
+  }
+}
diff --git a/assets/css/src/components-plugin/_listing.scss b/assets/css/src/components-plugin/_listing.scss
index a7ce1bcbad..6ad0132d5e 100644
--- a/assets/css/src/components-plugin/_listing.scss
+++ b/assets/css/src/components-plugin/_listing.scss
@@ -251,8 +251,47 @@ div.mailpoet-listing-bulk-actions-container {
   }
 }
 
-.mailpoet-listing-mobile-search-holder {
-  @include respond-to(small-screen) {
-    height: 100px;
+.mailpoet-listing-footer {
+  background-color: $color-white;
+}
+
+@include respond-to(small-screen) {
+  .mailpoet-listing {
+    padding: 0;
+  }
+
+  .mailpoet-listing-header {
+    display: none;
+  }
+
+  .mailpoet-listing-pages {
+    float: none;
+    text-align: center;
+  }
+
+  tr.mailpoet-listing-actions-and-select-all-row {
+    display: none;
+  }
+
+  .mailpoet-listing-table {
+    .mailpoet-listing & {
+      border-top: 0;
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+
+    thead,
+    .mailpoet-listing-check-column {
+      display: none;
+    }
+  }
+
+  .mailpoet-listing-footer {
+    margin: 0 0 - $grid-gap;
+    padding-top: $grid-gap;
+  }
+
+  .mailpoet-listing-mobile-search-holder {
+    display: none;
   }
 }
diff --git a/assets/css/src/components/_tabs.scss b/assets/css/src/components/_tabs.scss
index 7c728d3278..2270634e1e 100644
--- a/assets/css/src/components/_tabs.scss
+++ b/assets/css/src/components/_tabs.scss
@@ -2,13 +2,6 @@
   clear: both;
   position: relative;
   z-index: 1;
-
-  @include respond-to(small-screen) {
-    p.search-box {
-      left: $grid-gap;
-      width: calc(100% - 2 * #{$grid-gap});
-    }
-  }
 }
 
 .mailpoet-tabs-is-open {
@@ -106,6 +99,11 @@
 }
 
 @include respond-to(small-screen) {
+  .mailpoet-tabs {
+    margin-left: -10px;
+    margin-right: -12px;
+  }
+
   .mailpoet-tabs-title {
     background: $color-white;
     border: 1px solid $color-tertiary-light;
@@ -154,5 +152,6 @@
 
   .mailpoet-tab-content {
     border-radius: 0;
+    padding-top: 0;
   }
 }
diff --git a/assets/js/src/listing/listing.jsx b/assets/js/src/listing/listing.jsx
index c6c357aac6..fbcf4482b6 100644
--- a/assets/js/src/listing/listing.jsx
+++ b/assets/js/src/listing/listing.jsx
@@ -593,24 +593,26 @@ class Listing extends React.Component {
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         { this.state.meta.mta_method && <MailerError {...this.state.meta} /> }
         <div className="mailpoet-listing">
-          { groups }
-          <div>
-            { search }
-            <ListingFilters
-              filters={this.state.filters}
-              filter={this.state.filter}
-              group={this.state.group}
-              onBeforeSelectFilter={this.props.onBeforeSelectFilter || null}
-              onSelectFilter={this.handleFilter}
-              onEmptyTrash={this.handleEmptyTrash}
-            />
-            {extraActions}
-            <ListingPages
-              count={this.state.count}
-              page={this.state.page}
-              limit={this.state.limit}
-              onSetPage={this.handleSetPage}
-            />
+          <div className="mailpoet-listing-header">
+            { groups }
+            <div>
+              { search }
+              <ListingFilters
+                filters={this.state.filters}
+                filter={this.state.filter}
+                group={this.state.group}
+                onBeforeSelectFilter={this.props.onBeforeSelectFilter || null}
+                onSelectFilter={this.handleFilter}
+                onEmptyTrash={this.handleEmptyTrash}
+              />
+              {extraActions}
+              <ListingPages
+                count={this.state.count}
+                page={this.state.page}
+                limit={this.state.limit}
+                onSetPage={this.handleSetPage}
+              />
+            </div>
           </div>
           <table className={tableClasses}>
             <thead>
@@ -651,7 +653,7 @@ class Listing extends React.Component {
             />
 
           </table>
-          <div className="tablenav bottom clearfix">
+          <div className="mailpoet-listing-footer clearfix">
             <ListingPages
               count={this.state.count}
               page={this.state.page}
diff --git a/assets/js/src/newsletters/listings/heading.jsx b/assets/js/src/newsletters/listings/heading.jsx
index 2632ef63ee..a34dbc4082 100644
--- a/assets/js/src/newsletters/listings/heading.jsx
+++ b/assets/js/src/newsletters/listings/heading.jsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import MailPoet from 'mailpoet';
 
 const ListingHeading = () => (
-  <div>
+  <div className="mailpoet-newsletter-listing-heading-wrapper">
     <h1 className="mailpoet-newsletter-listing-heading title">
       {MailPoet.I18n.t('pageTitle')}
       <Link