From 9cb7ed14e604b64d2c15b3c3621a008c91d3c823 Mon Sep 17 00:00:00 2001 From: Sophia Date: Sun, 4 Aug 2019 15:31:00 -0400 Subject: [PATCH 1/7] adding a new div called CardWrapper to encompass the card grid and allow for overflow:auto --- src/components/AdminPage/AdminPage.js | 5 ++++- src/components/AdminPage/CardGrid.js | 2 ++ src/css/component-styles/Admin.scss | 13 +++++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/AdminPage/AdminPage.js b/src/components/AdminPage/AdminPage.js index 62fe9eec..414191f5 100644 --- a/src/components/AdminPage/AdminPage.js +++ b/src/components/AdminPage/AdminPage.js @@ -4,7 +4,10 @@ import CardGrid from './CardGrid'; const AdminPage = ({ currentPosition }) => (
- +
+ +
+
); diff --git a/src/components/AdminPage/CardGrid.js b/src/components/AdminPage/CardGrid.js index a312085a..063c8917 100644 --- a/src/components/AdminPage/CardGrid.js +++ b/src/components/AdminPage/CardGrid.js @@ -72,6 +72,7 @@ export class CardGrid extends Component { sortOptions={sortOptions} /> +
{sortedData.map((resource, index) => ( ))}
+
); } diff --git a/src/css/component-styles/Admin.scss b/src/css/component-styles/Admin.scss index e3e5a24f..d7f653a7 100644 --- a/src/css/component-styles/Admin.scss +++ b/src/css/component-styles/Admin.scss @@ -10,6 +10,18 @@ grid-template-rows: $spacing-lg auto; } +.card-pane { + position: relative; + overflow: auto; + padding: 10px; + +} + +.category-pane { + height: 90%; + overflow: auto; +} + .search-and-sort { display: grid; grid-template-columns: auto auto; @@ -21,4 +33,5 @@ grid-template-columns: 1fr 1fr 1fr; gap: $spacing-lg; padding: $spacing-lg 0; + position: absolute; } From 762dffea48ee536b347d75fafad1b5da1716e940 Mon Sep 17 00:00:00 2001 From: Sophia Date: Tue, 6 Aug 2019 19:24:17 -0400 Subject: [PATCH 2/7] adding a new div called CardWrapper to encompass the card grid and allow for overflow:auto --- src/css/component-styles/Admin.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/css/component-styles/Admin.scss b/src/css/component-styles/Admin.scss index d7f653a7..b4b5c31f 100644 --- a/src/css/component-styles/Admin.scss +++ b/src/css/component-styles/Admin.scss @@ -13,8 +13,6 @@ .card-pane { position: relative; overflow: auto; - padding: 10px; - } .category-pane { From 4ffc3e910a7d55bd34ff361dff71ec3e092e2141 Mon Sep 17 00:00:00 2001 From: Sophia Date: Tue, 6 Aug 2019 20:20:04 -0400 Subject: [PATCH 3/7] making the search bar stay at the top and fixing the spacing --- src/components/AdminPage/CardGrid.js | 89 +++++++++++----------- src/css/component-styles/Admin.scss | 5 +- src/css/component-styles/AppContainer.scss | 2 +- 3 files changed, 51 insertions(+), 45 deletions(-) diff --git a/src/components/AdminPage/CardGrid.js b/src/components/AdminPage/CardGrid.js index 063c8917..3bdc4e40 100644 --- a/src/components/AdminPage/CardGrid.js +++ b/src/components/AdminPage/CardGrid.js @@ -1,60 +1,63 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import OrganizationCard from '../Common/OrganizationCard'; -import { SortBar } from '../Common/SortBar.js'; -import SearchBar from '../Header/SearchBar'; -import { getDistance } from '../../utils/distance.js'; +import React, { Component } from "react"; +import { connect } from "react-redux"; +import OrganizationCard from "../Common/OrganizationCard"; +import { SortBar } from "../Common/SortBar.js"; +import SearchBar from "../Header/SearchBar"; +import { getDistance } from "../../utils/distance.js"; export class CardGrid extends Component { constructor(props) { super(props); this.state = { - dataSort: this.sortByAlphabet, + dataSort: this.sortByAlphabet }; } - getCloserResource = (a, b) => { - if ( - getDistance(a, this.props.currentPos) > - getDistance(b, this.props.currentPos) - ) { - return 1; - } - - return -1; - }; - - getCloserName = (a, b) => { - if (a.name > b.name) return 1; - else if (a.name < b.name) return -1; - else return 0; - }; - sortByAlphabet = () => { - return this.props.resource.slice().sort(this.getCloserName); + const getCloserName = (a, b) => { + if (a.name > b.name) { + return 1; + } else if (a.name < b.name) { + return -1; + } else { + return 0; + } + }; + + return this.props.resource.sort(getCloserName); }; sortByDistance = () => { - return this.props.resource.slice().sort(this.getCloserResource); + const getCloserResource = (a, b) => { + if ( + getDistance(a, this.props.currentPos) > + getDistance(b, this.props.currentPos) + ) { + return 1; + } + + return -1; + }; + return this.props.resource.sort(getCloserResource); }; handleSortChange = newSort => { if (this.state.dataSort !== newSort) this.setState({ // Set the dataSort variable to whichever sort function is chosen - dataSort: newSort, + dataSort: newSort }); }; render() { const sortOptions = [ - { key: 'A-Z', sort: this.sortByAlphabet, disabled: false }, + { key: "A-Z", sort: this.sortByAlphabet, disabled: false }, { - key: 'Distance', + 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 @@ -73,18 +76,18 @@ export class CardGrid extends Component { />
-
- {sortedData.map((resource, index) => ( - this.props.saveItem(resource)} - saveable={true} - /> - ))} -
+
+ {sortedData.map((resource, index) => ( + this.props.saveItem(resource)} + saveable={true} + /> + ))} +
); diff --git a/src/css/component-styles/Admin.scss b/src/css/component-styles/Admin.scss index b4b5c31f..cfc3e85c 100644 --- a/src/css/component-styles/Admin.scss +++ b/src/css/component-styles/Admin.scss @@ -2,12 +2,15 @@ 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 { @@ -16,7 +19,6 @@ } .category-pane { - height: 90%; overflow: auto; } @@ -28,6 +30,7 @@ .card-list { display: grid; + margin: 0px 10px; grid-template-columns: 1fr 1fr 1fr; gap: $spacing-lg; padding: $spacing-lg 0; diff --git a/src/css/component-styles/AppContainer.scss b/src/css/component-styles/AppContainer.scss index 92e09b42..0be4b518 100644 --- a/src/css/component-styles/AppContainer.scss +++ b/src/css/component-styles/AppContainer.scss @@ -25,7 +25,7 @@ justify-content: center; position: fixed; left: 0px; - padding: 10px 30px 10px 10px; + padding: 10px; text-align: center; width: 100%; z-index: 999; From 75d8473b057461b00547b6b32dd3306538324e49 Mon Sep 17 00:00:00 2001 From: Sophia Date: Tue, 6 Aug 2019 20:31:37 -0400 Subject: [PATCH 4/7] making the filter by category title bold --- src/components/AdminPage/CategoryList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AdminPage/CategoryList.js b/src/components/AdminPage/CategoryList.js index bf2760d5..e07f7226 100644 --- a/src/components/AdminPage/CategoryList.js +++ b/src/components/AdminPage/CategoryList.js @@ -45,7 +45,7 @@ export class CategoryList extends Component { return (
- + {categoryMenuItems}
); From 847cef590e1af51c02bd7b2d465a19c996b72e48 Mon Sep 17 00:00:00 2001 From: Sophia Date: Mon, 12 Aug 2019 20:49:17 -0400 Subject: [PATCH 5/7] redoing the mobile view so the cards can be seen comfortably --- src/css/component-styles/Admin.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/css/component-styles/Admin.scss b/src/css/component-styles/Admin.scss index cfc3e85c..b3384ec3 100644 --- a/src/css/component-styles/Admin.scss +++ b/src/css/component-styles/Admin.scss @@ -16,6 +16,7 @@ .card-pane { position: relative; overflow: auto; + transform: translateY(2vh); } .category-pane { @@ -36,3 +37,19 @@ 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; + } +} \ No newline at end of file From 047f932dc1a3a828781e6deacd459d497871df38 Mon Sep 17 00:00:00 2001 From: Sophia Date: Tue, 13 Aug 2019 20:23:27 -0400 Subject: [PATCH 6/7] fixing spacing --- src/components/AdminPage/AdminPage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/AdminPage/AdminPage.js b/src/components/AdminPage/AdminPage.js index 414191f5..0a5eb69a 100644 --- a/src/components/AdminPage/AdminPage.js +++ b/src/components/AdminPage/AdminPage.js @@ -4,11 +4,13 @@ import CardGrid from './CardGrid'; const AdminPage = ({ currentPosition }) => (
+
+
); From c70b1565d805241d35d768eca5e4aaf974315247 Mon Sep 17 00:00:00 2001 From: Sophia Date: Tue, 13 Aug 2019 20:39:24 -0400 Subject: [PATCH 7/7] fixing merge conflicts, merging development into my forked scrollCards branch --- src/components/Common/SortBar.js | 5 +---- src/components/MapPage/ResultList.js | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/Common/SortBar.js b/src/components/Common/SortBar.js index 508969e5..9af80549 100644 --- a/src/components/Common/SortBar.js +++ b/src/components/Common/SortBar.js @@ -15,11 +15,8 @@ class SortBar extends React.Component { } }; -<<<<<<< HEAD - render () { -======= + render() { ->>>>>>> ea3247dc923b7d54bec104e2a526901f3f0c59d6 return ( Sort by: diff --git a/src/components/MapPage/ResultList.js b/src/components/MapPage/ResultList.js index 8dd9ad6d..06e51dc5 100644 --- a/src/components/MapPage/ResultList.js +++ b/src/components/MapPage/ResultList.js @@ -72,11 +72,8 @@ class ResultList extends Component { render() { const sortOptions = [ -<<<<<<< HEAD - { key: 'A-Z', sort: this.sortByAlphabet, disabled: false }, -======= + { key: "A-Z", sort: this.sortByAlphabet, disabled: false }, ->>>>>>> ea3247dc923b7d54bec104e2a526901f3f0c59d6 { key: "Distance", sort: this.sortByDistance,