Merge pull request #186 from natgeosociety/EP-2920-visual-bugfixes

fix: Multiple visual bugs on Org Switcher, Spinner
natgeosociety · Oct 2, 2020 · a708017 · a708017
2 parents c2ac57a + cef71a6
commit a708017
Show file tree

Hide file tree

Showing 15 changed files with 96 additions and 92 deletions.
diff --git a/packages/earth-admin/src/components/sidebar-select/sidebar-select/styles.scss b/packages/earth-admin/src/components/sidebar-select/sidebar-select/styles.scss
@@ -18,7 +18,6 @@
 */
 
 .ng-select {
-  z-index: 10;
   .ng-icon-directionup {
     margin-left: auto;
   }

diff --git a/packages/earth-map/src/components/filter-by/FilterBy.tsx b/packages/earth-map/src/components/filter-by/FilterBy.tsx
@@ -56,7 +56,7 @@ const FilterBy = (props: IProps) => {
   const openToggle = () => onOpenToggle(!open);
 
   return (
-    <div className="marapp-qa-filterby ng-padding-vertical ng-padding-medium-horizontal ng-ep-background-dark ng-padding-top-remove ng-overflow-hidden">
+    <div className="ng-filter-by marapp-qa-filterby ng-padding-vertical ng-padding-medium-horizontal ng-ep-background-dark ng-padding-top-remove ng-overflow-hidden">
       <div className="ng-flex search-title">
         <h2
           className="marapp-qa-filterbyopen ng-text-display-s ng-body-color ng-margin-bottom ng-margin-small-right ng-c-cursor-pointer"

diff --git a/packages/earth-map/src/components/filter-by/styles.scss b/packages/earth-map/src/components/filter-by/styles.scss
@@ -20,6 +20,10 @@
 @import '~styles/config';
 @import '~styles/mixins';
 
+.ng-filter-by {
+  flex: 0 0 auto;
+}
+
 .with-count {
   display: flex;
 

diff --git a/packages/earth-map/src/components/layers/Layers.tsx b/packages/earth-map/src/components/layers/Layers.tsx
@@ -138,8 +138,6 @@ const Layers = (props: IProps) => {
 
   return (
     <SidebarLayoutSearch
-      panel={panel}
-      setSidebarPanel={setSidebarPanel}
       fixedContent={
         <>
           <SearchBox

diff --git a/packages/earth-map/src/components/places/Places.tsx b/packages/earth-map/src/components/places/Places.tsx
@@ -24,7 +24,6 @@ interface IProps {
   locationOrganization?: string;
   lastViewedPlace?: IPlace;
   nextPlacesPage?: () => void;
-  setSidebarPanel?: (value: any) => void;
   setSidebarPanelExpanded?: (value: boolean) => void;
   resetMap?: () => {};
   resetPlace?: (value: any) => {};
@@ -50,7 +49,6 @@ const Places = (props: IProps) => {
     resetMap,
     setIndexesSelected,
     setPlacesSearch,
-    setSidebarPanel,
     setSidebarPanelExpanded,
     setPlacesSearchOpen,
   } = props;
@@ -86,8 +84,6 @@ const Places = (props: IProps) => {
 
   return (
     <SidebarLayoutSearch
-      panel={panel}
-      setSidebarPanel={setSidebarPanel}
       fixedContent={
         <>
           <SearchBox

diff --git a/packages/earth-map/src/components/places/index.ts b/packages/earth-map/src/components/places/index.ts
@@ -27,7 +27,6 @@ export default connect(
     resetPlace,
     setPlacesSearch,
     setIndexesSelected,
-    setSidebarPanel,
     nextPlacesPage,
     setSidebarPanelExpanded,
     setPlacesSearchOpen,

diff --git a/packages/earth-map/src/components/sidebar/sidebar-layout-search/component.tsx b/packages/earth-map/src/components/sidebar/sidebar-layout-search/component.tsx
@@ -1,30 +1,17 @@
-import { Tab, Tabs } from 'components/tabs';
 import React from 'react';
 
 import './styles.scss';
 
 interface IProps {
   fixedContent: React.ReactElement;
   children: React.ReactElement;
-  panel: string;
-  setSidebarPanel: (value: any) => void;
 }
 
 const SidebarLayoutSearch = (props: IProps) => (
-  <div style={{ height: '100%', overflow: 'auto' }}>
-    <div className="ng-sticky-top ng-margin-bottom">
-      <Tabs
-        value={props.panel}
-        onChange={props.setSidebarPanel}
-        className="ng-padding-medium-horizontal ng-padding-bottom ng-ep-background-dark"
-      >
-        <Tab label="Places" value="places" />
-        <Tab label="Layers" value="layers" />
-      </Tabs>
-      {props.fixedContent}
-    </div>
-    {props.children}
-  </div>
+  <>
+    {props.fixedContent}
+    <div className="scroll-container">{props.children}</div>
+  </>
 );
 
 export default SidebarLayoutSearch;
diff --git a/packages/earth-map/src/components/sidebar/sidebar-layout-search/styles.scss b/packages/earth-map/src/components/sidebar/sidebar-layout-search/styles.scss
@@ -24,6 +24,11 @@
     line-height: 100%;
   }
 
+  .scroll-container {
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+
   .ng-c-text-body {
     font-family: $marapp-secondary-font, Helvetica, Arial, sans-serif;
     font-size: 16px;
@@ -37,11 +42,4 @@
       border-color: $marapp-gray-0;
     }
   }
-
-  .ng-sticky-top {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    box-shadow: $shadow-large;
-  }
 }
diff --git a/packages/earth-map/src/components/sidebar/styles.scss b/packages/earth-map/src/components/sidebar/styles.scss
@@ -22,7 +22,8 @@
 .c-sidebar {
   box-shadow: 0 0 5px 0 $marapp-gray-9;
   position: absolute;
-  display: block;
+  display: flex;
+  flex-direction: column;
   width: 375px;
   top: 0;
   bottom: 0;

diff --git a/packages/earth-map/src/pages/earth/component.tsx b/packages/earth-map/src/pages/earth/component.tsx
@@ -18,6 +18,7 @@
 */
 import React from 'react';
 
+import { Tab, Tabs } from 'components/tabs';
 import Header from 'components/header';
 import Fullscreen from 'components/fullscreen';
 import Layers from 'components/layers';
@@ -34,6 +35,7 @@ import { URL_PROPS } from './url';
 interface IEarth {
   setFullscreen?: (p: { data: {}; open: boolean }) => void;
   setMapInteractions?: (p: {}) => void;
+  setSidebarPanel?: () => void;
   panel?: EPanels;
   page?: string;
   layersPanel?: boolean;
@@ -42,7 +44,7 @@ interface IEarth {
 
 class EarthPage extends React.Component<IEarth> {
   public render() {
-    const { setFullscreen, setMapInteractions, selected, panel } = this.props;
+    const { setFullscreen, setMapInteractions, setSidebarPanel, selected, panel } = this.props;
 
     return (
       <main className="l-page marapp-qa-pageearth" role="main">
@@ -59,6 +61,14 @@ class EarthPage extends React.Component<IEarth> {
 
         <Sidebar>
           <Header />
+          <Tabs
+            value={panel}
+            onChange={setSidebarPanel}
+            className="ng-padding-medium-horizontal ng-padding-bottom ng-ep-background-dark"
+          >
+            <Tab label="Places" value="places" />
+            <Tab label="Layers" value="layers" />
+          </Tabs>
           {panel === EPanels.PLACES && <Places selected={!!selected} />}
           {panel === EPanels.LAYERS && <Layers selected={!!selected} />}
         </Sidebar>

diff --git a/packages/earth-map/src/pages/earth/index.tsx b/packages/earth-map/src/pages/earth/index.tsx
@@ -19,6 +19,7 @@
 
 import { setFullscreen } from 'modules/fullscreen/actions';
 import { setMapInteractions } from 'modules/map/actions';
+import { setSidebarPanel } from 'modules/sidebar/actions';
 import { connect } from 'react-redux';
 
 import EarthComponent from './component';
@@ -28,5 +29,9 @@ export default connect(
     ...state.indexes,
     ...state.sidebar,
   }),
-  { setMapInteractions, setFullscreen }
+  {
+    setMapInteractions,
+    setFullscreen,
+    setSidebarPanel,
+  }
 )(EarthComponent);
diff --git a/packages/earth-shared/src/components/app-context-switcher/AppContextSwitcher.tsx b/packages/earth-shared/src/components/app-context-switcher/AppContextSwitcher.tsx
@@ -58,62 +58,64 @@ const AppContextSwitcher = (props: IProps) => {
   return (
     <div
       ref={closeOnClickOutside}
-      className="marapp-qa-context-switcher ng-app-context-switcher ng-padding-medium-horizontal ng-flex ng-position-relative ng-padding-small-top"
+      className="marapp-qa-context-switcher ng-app-context-switcher  ng-position-relative"
     >
-      {logo && (
-        <div className="logo-container marapp-qa-logo" onClick={closeDropdown}>
-          {logo}
-          {renderDropdown && <span className="ng-margin-small-horizontal ng-color-white">|</span>}
-        </div>
-      )}
-
-      {renderDropdown && (
-        <>
-          <div
-            onClick={toggleDropdown}
-            className="ng-c-cursor-pointer ng-flex ng-flex-middle ng-padding-horizontal ng-position-relative"
-          >
-            <div className="ng-text-display-s ng-text-weight-regular ng-color-white ng-margin-remove ng-org-name ng-padding-right">
-              {label}
-            </div>
-            <i
-              className={classnames({
-                'ng-icon ng-color-white': true,
-                'ng-icon-directionup': isOpen,
-                'ng-icon-directiondown': !isOpen,
-              })}
-            />
-            {checkedCount > 0 && <span className="ng-org-badge">{checkedCount}</span>}
+      <div className="ng-flex ng-padding-medium-horizontal ng-padding-small-top">
+        {logo && (
+          <div className="logo-container marapp-qa-logo" onClick={closeDropdown}>
+            {logo}
+            {renderDropdown && <span className="ng-margin-small-horizontal ng-color-white">|</span>}
           </div>
-
-          {isOpen && (
-            <>
-              <div className="overlay" onClick={closeDropdown} />
-              <ul className="marapp-qa-dropdown ng-ep-dropdown">
-                {Children.map(children, (child: any) => {
-                  if (!child) {
-                    return;
-                  }
-                  const isOptionElement = child.props.value;
-                  const selected = child.props.value === selectedValue;
-                  return isOptionElement
-                    ? cloneElement(child, {
-                        selected,
-                        onClick: (value: any) => {
-                          if (!selected) {
-                            setSelectedValue(value);
-                            onChange(value);
-                          }
-                          closeDropdown();
-                        },
-                      })
-                    : child;
+        )}
+
+        {renderDropdown && (
+          <>
+            <div
+              onClick={toggleDropdown}
+              className="ng-c-cursor-pointer ng-flex ng-flex-middle ng-padding-horizontal ng-position-relative"
+            >
+              <div className="ng-text-display-s ng-text-weight-regular ng-color-white ng-margin-remove ng-org-name ng-padding-right">
+                {label}
+              </div>
+              <i
+                className={classnames({
+                  'ng-icon ng-color-white': true,
+                  'ng-icon-directionup': isOpen,
+                  'ng-icon-directiondown': !isOpen,
                 })}
-              </ul>
-            </>
-          )}
-        </>
-      )}
+              />
+              {checkedCount > 0 && <span className="ng-org-badge">{checkedCount}</span>}
+            </div>
+
+            {isOpen && (
+              <>
+                <div className="overlay" onClick={closeDropdown} />
+                <ul className="marapp-qa-dropdown ng-ep-dropdown">
+                  {Children.map(children, (child: any) => {
+                    if (!child) {
+                      return;
+                    }
+                    const isOptionElement = child.props.value;
+                    const selected = child.props.value === selectedValue;
+                    return isOptionElement
+                      ? cloneElement(child, {
+                          selected,
+                          onClick: (value: any) => {
+                            if (!selected) {
+                              setSelectedValue(value);
+                              onChange(value);
+                            }
+                            closeDropdown();
+                          },
+                        })
+                      : child;
+                  })}
+                </ul>
+              </>
+            )}
+          </>
+        )}
+      </div>
     </div>
   );
 };

diff --git a/packages/earth-shared/src/components/app-context-switcher/styles.scss b/packages/earth-shared/src/components/app-context-switcher/styles.scss
@@ -21,7 +21,11 @@
 
 .ng-app-context-switcher {
   user-select: none;
-  background-color: $marapp-gray-7;
+  z-index: 2;
+
+  > div {
+    background-color: $marapp-gray-7;
+  }
 
   .logo-container {
     height: 50px;
@@ -65,6 +69,8 @@
     background-color: $marapp-gray-7;
     padding: 0 !important;
     margin: 0;
+    max-height: calc(100vh - 55px);
+    overflow: auto;
   }
 
   .ng-option {

diff --git a/packages/earth-shared/src/components/spinner/styles.scss b/packages/earth-shared/src/components/spinner/styles.scss
@@ -40,7 +40,6 @@ $sizes: (
   left: 0;
   visibility: visible;
   opacity: 1;
-  z-index: 1000;
   padding: 10px;
 
   .spinner-border {

diff --git a/packages/earth-shared/src/hooks/index.ts b/packages/earth-shared/src/hooks/index.ts
@@ -19,7 +19,7 @@
 
 import { useEffect, useRef } from 'react';
 
-export function useDomWatcher(callback: () => {}, skip?: boolean): React.RefObject<any> {
+export function useDomWatcher(callback: () => any, skip?: boolean): React.RefObject<any> {
   const ref: React.RefObject<any> = useRef();
 
   useEffect(() => {