From 393884683a62045dd8c0cc5a9c2bcdeb1aec57b3 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Mon, 9 Nov 2020 13:47:46 -0600
Subject: [PATCH] Updated News page panel ordering for mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Updated:
- News page panel ordering for mobile
---
 app/javascript/gabsocial/features/news.js | 38 ++++++++++++++++-------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/app/javascript/gabsocial/features/news.js b/app/javascript/gabsocial/features/news.js
index f6e26933..f2934fc2 100644
--- a/app/javascript/gabsocial/features/news.js
+++ b/app/javascript/gabsocial/features/news.js
@@ -9,6 +9,7 @@ import Text from '../components/text'
 import TrendsItem from '../components/trends_item'
 import PreviewCardItem from '../components/preview_card_item'
 import ResponsiveClassesComponent from './ui/util/responsive_classes_component'
+import Responsive from './ui/util/responsive_component'
 import WrappedBundle from './ui/util/wrapped_bundle'
 import {
   GabNewsPanel,
@@ -58,7 +59,7 @@ class News extends React.PureComponent {
     const { children } = this.props
     const { lazyLoaded } = this.state
 
-    // const orderXS = ['headlines', 'trending_links', 'breaking', 'latest_from_gab', 'gab_news', '...']
+    // const orderXS = ['headlines', 'breaking', 'trending_links', 'latest_from_gab', 'gab_news', 'trends_feeds']
 
     return (
       <div className={[_s.d, _s.w100PC].join(' ')}>
@@ -72,19 +73,32 @@ class News extends React.PureComponent {
             classNames={[_s.d, _s.pr15, _s.w50PC].join(' ')}
             classNamesXS={[_s.d, _s.w100PC].join(' ')}
           >
-            <WrappedBundle component={TrendsHeadlinesPanel} />
-            <WrappedBundle component={TrendsBreakingPanel} componentParams={{ hideReadMore: 1 }} />
-            <WrappedBundle component={LatestFromGabPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
+            { /* DESKTOP */ }
+            <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+              <WrappedBundle component={TrendsHeadlinesPanel} />
+              <WrappedBundle component={TrendsBreakingPanel} componentParams={{ hideReadMore: 1 }} />
+              <WrappedBundle component={LatestFromGabPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
+            </Responsive>
+            { /* MOBILE */ }
+            <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+              <WrappedBundle component={TrendsHeadlinesPanel} />
+              <WrappedBundle component={TrendsBreakingPanel} componentParams={{ hideReadMore: 1 }} />
+              <WrappedBundle component={PopularLinksPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
+              <WrappedBundle component={LatestFromGabPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
+              <WrappedBundle component={GabNewsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
+              <WrappedBundle component={TrendsFeedsPanel} />
+            </Responsive>
           </ResponsiveClassesComponent>
           
-          <ResponsiveClassesComponent
-            classNames={[_s.d, _s.w50PC].join(' ')}
-            classNamesXS={[_s.d, _s.w100PC].join(' ')}
-          >
-            <WrappedBundle component={PopularLinksPanel} />
-            <WrappedBundle component={TrendsFeedsPanel} />
-            <WrappedBundle component={GabNewsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
-          </ResponsiveClassesComponent>
+          
+          { /* DESKTOP */ }
+          <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+            <div classNames={[_s.d, _s.w50PC].join(' ')}>
+              <WrappedBundle component={PopularLinksPanel} />
+              <WrappedBundle component={TrendsFeedsPanel} />
+              <WrappedBundle component={GabNewsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
+            </div>
+          </Responsive>
 
         </ResponsiveClassesComponent>