Redesign listing mobile version [MAILPOET-2778]

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 {

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;
+  }
+}

assets/css/src/components-plugin/_listing.scss

@@ -251,8 +251,47 @@ div.mailpoet-listing-bulk-actions-container {
   }
 }
 
-.mailpoet-listing-mobile-search-holder {
+.mailpoet-listing-footer {
-  @include respond-to(small-screen) {
+  background-color: $color-white;
-    height: 100px;
+}
+
+@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;
   }
 }

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;
   }
 }

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 className="mailpoet-listing-header">
-          <div>
+            { groups }
-            { search }
+            <div>
-            <ListingFilters
+              { search }
-              filters={this.state.filters}
+              <ListingFilters
-              filter={this.state.filter}
+                filters={this.state.filters}
-              group={this.state.group}
+                filter={this.state.filter}
-              onBeforeSelectFilter={this.props.onBeforeSelectFilter || null}
+                group={this.state.group}
-              onSelectFilter={this.handleFilter}
+                onBeforeSelectFilter={this.props.onBeforeSelectFilter || null}
-              onEmptyTrash={this.handleEmptyTrash}
+                onSelectFilter={this.handleFilter}
-            />
+                onEmptyTrash={this.handleEmptyTrash}
-            {extraActions}
+              />
-            <ListingPages
+              {extraActions}
-              count={this.state.count}
+              <ListingPages
-              page={this.state.page}
+                count={this.state.count}
-              limit={this.state.limit}
+                page={this.state.page}
-              onSetPage={this.handleSetPage}
+                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}

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