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 (
);
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;