Merge pull request #374 from developmentseed/Update-map-bounds-checkbox

Update map bounds checkbox

Author: LanesGood

cypress/e2e/teams/index.cy.js

@@ -13,6 +13,11 @@ const TEAMS_COUNT = 35
 const teams = generateSequenceArray(TEAMS_COUNT, 1).map((i) => ({
   id: i,
   name: `Team ${addZeroPadding(i, 3)}`,
+  location: {
+    type: 'Point',
+    // Fake coords under 30 degrees
+    coordinates: [(30 / TEAMS_COUNT) * i, (30 / TEAMS_COUNT) * i],
+  },
 }))
 
 describe('Teams page', () => {

src/components/layout.js

@@ -30,21 +30,15 @@ export const globalStyles = css.global`
     min-width: ${theme.layout.rowMinWidth};
   }
 
-  .app-container {
-    overflow: hidden;
-  }
-
   .page-layout {
     display: grid;
     position: relative;
     grid-template-rows: 4rem 1fr;
     grid-template-columns: 100%;
     grid-template-areas:
       'sidebar'
-      'main'
-      'footer';
-    height: 100vh;
-    overflow: auto;
+      'main';
+    min-height: 100vh;
   }
 
   @media screen and (min-width: ${theme.mediaRanges.small}) {
@@ -70,8 +64,9 @@ export const globalStyles = css.global`
 
   .inner.page {
     grid-area: main;
-    margin-top: calc(${theme.layout.globalSpacing} * 4);
-    margin-bottom: calc(${theme.layout.globalSpacing} * 4);
+    margin-top: calc(${theme.layout.globalSpacing} * 2);
+    margin-bottom: calc(${theme.layout.globalSpacing} * 2);
+    overflow: auto;
   }
 
   .inner.page section {

src/pages/teams/index.js

@@ -189,21 +189,31 @@ export default class TeamList extends Component {
         {this.renderMap()}
         <fieldset>
           <input
+            name='map-bounds-filter'
+            id='map-bounds-filter'
             type='checkbox'
             checked={searchOnMapMove}
             onChange={(e) => this.setSearchOnMapMove(e)}
           />
-          <span>Filter teams using map bounds</span>
+          <label for='map-bounds-filter'>Filter teams by map</label>
         </fieldset>
         <Section>{this.renderTeams()}</Section>
         <style jsx>
           {`
             fieldset {
               display: inline-block;
-              margin: 1rem 0 2rem;
-              padding: 1.5rem;
+              padding: 0.5rem;
               background: white;
               border-color: ${theme.colors.primaryColor};
+              border-color: #384a9e;
+              position: relative;
+              top: -4rem;
+              left: 1rem;
+              z-index: 1000;
+            }
+            fieldset input,
+            fieldset label {
+              cursor: pointer;
             }
 
             fieldset input[type='checkbox'] {