diff --git a/src/components/AdminPage/AdminPage.js b/src/components/AdminPage/AdminPage.js index 07be3bcb..0ddc8b7e 100644 --- a/src/components/AdminPage/AdminPage.js +++ b/src/components/AdminPage/AdminPage.js @@ -5,8 +5,13 @@ import CardGrid from "./CardGrid"; const AdminPage = ({ currentPosition }) => (
- + +
+ +
+ +
); diff --git a/src/components/AdminPage/CardGrid.js b/src/components/AdminPage/CardGrid.js index 03e7af1b..a5648f1a 100644 --- a/src/components/AdminPage/CardGrid.js +++ b/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} /> -
- {sortedData.map(resource => ( - this.props.saveItem(resource)} - saveable - /> - ))} + +
+ +
+ + {sortedData.map((resource, index) => ( + this.props.saveItem(resource)} + saveable + /> + ))} + +
+
); diff --git a/src/components/AdminPage/CategoryList.js b/src/components/AdminPage/CategoryList.js index 093265c0..8ddef86e 100644 --- a/src/components/AdminPage/CategoryList.js +++ b/src/components/AdminPage/CategoryList.js @@ -56,7 +56,7 @@ class CategoryList extends Component { return (
- + {categoryMenuItems}
); diff --git a/src/components/Common/SortBar.js b/src/components/Common/SortBar.js index c50e0a37..9af80549 100644 --- a/src/components/Common/SortBar.js +++ b/src/components/Common/SortBar.js @@ -15,6 +15,7 @@ class SortBar extends React.Component { } }; + render() { return ( diff --git a/src/components/MapPage/ResultList.js b/src/components/MapPage/ResultList.js index 33a53659..06e51dc5 100644 --- a/src/components/MapPage/ResultList.js +++ b/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", diff --git a/src/css/component-styles/Admin.scss b/src/css/component-styles/Admin.scss index e3e5a24f..b3384ec3 100644 --- a/src/css/component-styles/Admin.scss +++ b/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; + } +} \ No newline at end of file diff --git a/src/css/component-styles/AppContainer.scss b/src/css/component-styles/AppContainer.scss index eb62392e..45e05e0f 100644 --- a/src/css/component-styles/AppContainer.scss +++ b/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;