Scroll cards

src/components/AdminPage/AdminPage.js

@@ -5,8 +5,13 @@ import CardGrid from "./CardGrid";
 
 const AdminPage = ({ currentPosition }) => (
   <div className="admin-pane">
-    <CategoryList />
+
+    <div className="category-pane">
+      <CategoryList />
+    </div>
+
     <CardGrid currentPos={currentPosition} />
+
   </div>
 );
 

src/components/AdminPage/CardGrid.js

@@ -23,7 +23,7 @@ class CardGrid extends Component {
     super(props);
 
     this.state = {
-      dataSort: this.sortByAlphabet,
+      dataSort: this.sortByAlphabet
     };
   }
 
@@ -54,7 +54,7 @@ class CardGrid extends Component {
     if (this.state.dataSort !== newSort) {
       this.setState({
         // Set the dataSort variable to whichever sort function is chosen
-        dataSort: newSort,
+        dataSort: newSort
       });
     }
   };
@@ -65,8 +65,8 @@ class CardGrid extends Component {
       {
         key: "Distance",
         sort: this.sortByDistance,
-        disabled: !this.props.currentPos,
-      },
+        disabled: !this.props.currentPos
+      }
     ];
 
     // Render will be called every time this.props.data is updated, and every time handleSortChange
@@ -84,17 +84,24 @@ class CardGrid extends Component {
             sortOptions={sortOptions}
           />
         </div>
-        <div className="card-list">
-          {sortedData.map(resource => (
-            <OrganizationCard
-              key={resource.id}
-              index={resource.id}
-              organization={resource}
-              currentPos={this.props.currentPos}
-              saveItem={() => this.props.saveItem(resource)}
-              saveable
-            />
-          ))}
+
+        <div className="card-pane">
+
+          <div className="card-list">
+
+            {sortedData.map((resource, index) => (
+              <OrganizationCard
+                key={resource.id}
+                index={resource.id}
+                organization={resource}
+                currentPos={this.props.currentPos}
+                saveItem={() => this.props.saveItem(resource)}
+                saveable
+              />
+            ))}
+
+          </div>
+
         </div>
       </div>
     );

src/components/AdminPage/CategoryList.js

@@ -56,7 +56,7 @@ class CategoryList extends Component {
 
     return (
       <Form>
-        <Label>Filter by Category</Label>
+        <Label className="font-weight-bold">Filter by Category</Label>
         {categoryMenuItems}
       </Form>
     );

src/components/Common/SortBar.js

@@ -15,6 +15,7 @@ class SortBar extends React.Component {
     }
   };
 
+
   render() {
     return (
       <span>

src/components/MapPage/ResultList.js

@@ -72,6 +72,7 @@ class ResultList extends Component {
 
   render() {
     const sortOptions = [
+
       { key: "A-Z", sort: this.sortByAlphabet, disabled: false },
       {
         key: "Distance",

src/css/component-styles/Admin.scss

@@ -2,12 +2,25 @@
   display: grid;
   grid-template-columns: 200px auto;
   padding: $spacing-lg;
+  padding-bottom: 0;
   gap: $spacing-lg;
+  height: calc(100vh - 55px);
 }
 
 .card-grid {
   display: grid;
   grid-template-rows: $spacing-lg auto;
+  height: 100%;
+}
+
+.card-pane {
+  position: relative;
+  overflow: auto;
+  transform: translateY(2vh);
+}
+
+.category-pane {
+  overflow: auto;
 }
 
 .search-and-sort {
@@ -18,7 +31,25 @@
 
 .card-list {
   display: grid;
+  margin: 0px 10px;
   grid-template-columns: 1fr 1fr 1fr;
   gap: $spacing-lg;
   padding: $spacing-lg 0;
+  position: absolute;
+}
+
+@media (max-width: 768px){
+  .category-pane {
+    grid-template-columns: auto;
+  }
+  .admin-pane {
+    grid-template-columns: 1fr;
+    grid-template-rows: 35% 65%;
+    grid-gap: 2vh;
+    transform: translateY(30px);
 }
+  .viewport-header {
+    width: 100%;
+    height: 40px;
+  }
+}

src/css/component-styles/AppContainer.scss

@@ -20,7 +20,7 @@
   justify-content: center;
   position: fixed;
   left: 0px;
-  padding: 10px 30px 10px 10px;
+  padding: 10px;
   text-align: center;
   width: 100%;
   z-index: 999;