From 9722fe3a6f824701fe6bfbd13b42d0415b4b93dc Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Thu, 6 Aug 2020 00:00:28 -0500
Subject: [PATCH] Added ExploreLayout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Added:
- ExploreLayout
---
 .../gabsocial/layouts/explore_layout.js       | 97 +++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 app/javascript/gabsocial/layouts/explore_layout.js

diff --git a/app/javascript/gabsocial/layouts/explore_layout.js b/app/javascript/gabsocial/layouts/explore_layout.js
new file mode 100644
index 00000000..7bc3ebd1
--- /dev/null
+++ b/app/javascript/gabsocial/layouts/explore_layout.js
@@ -0,0 +1,97 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import Sticky from 'react-stickynode'
+import { BREAKPOINT_EXTRA_SMALL } from '../constants'
+import Layout from './layout'
+import TrendsPanel from '../components/panel/trends_panel'
+import GroupSidebarPanel from '../components/panel/groups_panel'
+import SignUpLogInPanel from '../components/panel/sign_up_log_in_panel'
+import SidebarPanelGroup from '../components/sidebar_panel_group'
+import Responsive from '../features/ui/util/responsive_component'
+import Heading from '../components/heading'
+import GroupSortBlock from '../components/group_sort_block'
+
+export default class GroupLayout extends ImmutablePureComponent {
+
+  static propTypes = {
+    actions: PropTypes.array,
+    children: PropTypes.node,
+    group: ImmutablePropTypes.map,
+    groupId: PropTypes.string,
+    layout: PropTypes.object,
+    relationships: ImmutablePropTypes.map,
+    title: PropTypes.string,
+  }
+
+  render() {
+    const { children, title } = this.props
+
+    const pageTitleBlock = (
+      <div className={[_s.default, _s.pl15, _s.py10].join(' ')}>
+        <Heading size='h2'>Popular posts across Gab</Heading>
+      </div>
+    )
+
+    return (
+      <Layout
+        showGlobalFooter
+        noRightSidebar
+        showLinkFooterInSidebar
+        page='explore'
+        title={title}
+      >
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+          <div className={[_s.default, _s.width100PC].join(' ')}>
+
+            <div className={[_s.default, _s.width100PC, _s.z1].join(' ')}>
+              <div className={[_s.default, _s.mt15, _s.px10].join(' ')}>
+                <SignUpLogInPanel key='explore-page-signup-login-panel' isXS />
+              </div>
+
+              {pageTitleBlock}
+
+              <GroupSortBlock />
+
+              {children}
+            </div>
+
+          </div>
+        </Responsive>
+
+        <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+          <div className={[_s.default, _s.width100PC, _s.pl15].join(' ')}>
+
+            <div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentEnd].join(' ')}>
+              <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>  
+
+                <div className={_s.default}>
+                  {pageTitleBlock}
+
+                  <GroupSortBlock />
+
+                  {children}
+                </div>
+              </div>
+
+              <div className={[_s.default, _s.ml15, _s.width340PX].join(' ')}>
+                <Sticky top={73} enabled>
+                  <div className={[_s.default, _s.width340PX].join(' ')}>
+                    <SidebarPanelGroup
+                      page='explore'
+                      layout={[
+                        <SignUpLogInPanel key='explore-page-signup-login-panel' />,
+                        <GroupSidebarPanel groupType='featured' key='explore-page-group-panel' />,
+                        <TrendsPanel key='explore-page-trends-panel' />,
+                      ]}
+                    />
+                  </div>
+                </Sticky>
+              </div>
+            </div>
+          </div>
+        </Responsive>
+      </Layout>
+    )
+  }
+
+}