CodeForBaltimore · jbixon13 · Mar 18, 2020 · Mar 18, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "react-bootstrap": "^1.0.0-beta.17",
     "react-dom": "^16.13.0",
     "react-leaflet": "^2.6.3",
+    "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0"
   },

diff --git a/public/android-icon-144x144.png b/public/android-icon-144x144.png
diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png
diff --git a/public/android-icon-36x36.png b/public/android-icon-36x36.png
diff --git a/public/android-icon-48x48.png b/public/android-icon-48x48.png
diff --git a/public/android-icon-72x72.png b/public/android-icon-72x72.png
diff --git a/public/android-icon-96x96.png b/public/android-icon-96x96.png
diff --git a/public/apple-icon-114x114.png b/public/apple-icon-114x114.png
diff --git a/public/apple-icon-120x120.png b/public/apple-icon-120x120.png
diff --git a/public/apple-icon-144x144.png b/public/apple-icon-144x144.png
diff --git a/public/apple-icon-152x152.png b/public/apple-icon-152x152.png
diff --git a/public/apple-icon-180x180.png b/public/apple-icon-180x180.png
diff --git a/public/apple-icon-57x57.png b/public/apple-icon-57x57.png
diff --git a/public/apple-icon-60x60.png b/public/apple-icon-60x60.png
diff --git a/public/apple-icon-72x72.png b/public/apple-icon-72x72.png
diff --git a/public/apple-icon-76x76.png b/public/apple-icon-76x76.png
diff --git a/public/apple-icon-precomposed.png b/public/apple-icon-precomposed.png
diff --git a/public/apple-icon.png b/public/apple-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,10 +4,29 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="A collection of easy to navigate resources regarding the COVID-19 (Corona Virus) pandemic for the Greater Baltimore, Maryland area.">
+
+    <meta name="title" content="Code for Baltimore - COVID-19 Response">
+    <meta name="keywords" content="COVID-19, Corona Virus, Baltimore, Maryland, civic, help, resource">
+    <meta name="robots" content="index, follow">
+    <meta name="language" content="English">
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
@@ -18,7 +37,7 @@
       crossorigin=""
     />
 
-    <title>React App</title>
+    <title>COVID-19 Response App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -4,5 +4,43 @@
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#ffffff",
+  "icons": [
+    {
+     "src": "\/android-icon-36x36.png",
+     "sizes": "36x36",
+     "type": "image\/png",
+     "density": "0.75"
+    },
+    {
+     "src": "\/android-icon-48x48.png",
+     "sizes": "48x48",
+     "type": "image\/png",
+     "density": "1.0"
+    },
+    {
+     "src": "\/android-icon-72x72.png",
+     "sizes": "72x72",
+     "type": "image\/png",
+     "density": "1.5"
+    },
+    {
+     "src": "\/android-icon-96x96.png",
+     "sizes": "96x96",
+     "type": "image\/png",
+     "density": "2.0"
+    },
+    {
+     "src": "\/android-icon-144x144.png",
+     "sizes": "144x144",
+     "type": "image\/png",
+     "density": "3.0"
+    },
+    {
+     "src": "\/android-icon-192x192.png",
+     "sizes": "192x192",
+     "type": "image\/png",
+     "density": "4.0"
+    }
+   ]
 }
diff --git a/public/ms-icon-144x144.png b/public/ms-icon-144x144.png
diff --git a/public/ms-icon-150x150.png b/public/ms-icon-150x150.png
diff --git a/public/ms-icon-310x310.png b/public/ms-icon-310x310.png
diff --git a/public/ms-icon-70x70.png b/public/ms-icon-70x70.png
diff --git a/src/App.css b/src/App.css
@@ -1,14 +1,15 @@
+html, body, #root { min-height: 100vh; }
+
 .App {
-    height: 100vh;
+    background-color: rgb(245, 243, 243);
+    min-height: 100vh;
 }
 
-/* Container for each page */
-.Content-Container {
+.flex {
     display: flex;
+    flex-direction: column;
     justify-content: center;
-    height: 100%;
-    width: 100%;
-    background-color: rgb(245, 243, 243);
+    align-items: center;
 }
 
 /* Bootstrap NavBar additional CSS */

diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,40 @@
 import React from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import './App.css';
 import NaviBar from './Components/NavBar';
 import Home from './Components/Home';
 import About from './Components/About';
-import Resources from './Components/Resources';
-import MapComponent from './Components/MapComponent';
-import SomePage from './Components/SomePage';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import FoodCategory from './Components/FoodNavigation';
+import FoodDistribution from './Components/FoodCategory/FoodDistribution';
+import RestarauntInfo from './Components/FoodCategory/RestaurantInfo';
+import CovidCategory from './Components/CovidNavigation';
+import TestingCenters from './Components/CovidCategory/TestingCenters';
+import SomeNavigation from './Components/SomeNavigation';
 
 function App() {
   return (
-    <BrowserRouter>
       <div className="App">
         <NaviBar />
-        <Route exact path="/" component={Home} />
-        <Route path="/about" component={About} />
-        <Route path="/resources" component={Resources} />
-        <Route path="/map" component={MapComponent} />
-        <Route path="/somepage" component={SomePage} />
+        <Switch>
+          <Route exact path="/" component={Home} />
+          <Route exact path="/about" component={About} />
+          <Route exact path="/food-resources" component={FoodCategory} />
+          <Route exact path="/covid-resources" component={CovidCategory} />
+          <Route exact path="/some-resources" component={SomeNavigation} />
+        </Switch>
+
+      {/* FoodNavigation */}
+        <Switch>
+          <Route exact path="/food-resources/food-distribution" component={FoodDistribution} />
+          <Route exact path="/food-resources/restaurant-info" component={RestarauntInfo} />
+        </Switch>
+      {/* CovidNavigation */}
+        <Switch>
+          <Route exact path="/covid-resources/testing-centers" component={TestingCenters} />
+        </Switch>
+      {/* SomeNavigation */}
       </div>
-    </BrowserRouter>
   );
 }
 

diff --git a/src/Components/About.js b/src/Components/About.js
@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
+import { Container } from 'react-bootstrap';
 
 class About extends Component {
     render() {
         return (
-            <div className='Content-Container'>
+            <Container className='flex'>
                 <h1>I'm also page.</h1>
-            </div>
+            </Container>
         );
     }
 }

diff --git a/src/Components/CategoryCard.js b/src/Components/CategoryCard.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { Card, Button } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+
+class CategoryCard extends Component {
+    render() {
+        const { heading, title, description, link } = this.props;
+        return (
+                <Card 
+                    className="text-center" 
+                    border='secondary' 
+                    style={{ 
+                        width: '18rem',
+                        margin: '2rem'
+                    }}>
+                    <Card.Header 
+                        style={{fontSize:'20px'}}>
+                            {heading}
+                    </Card.Header>
+                    <Card.Body className='d-flex flex-column'>
+                        <Card.Title>{title}</Card.Title>
+                        <Card.Text>
+                            {description}
+                        </Card.Text>
+                        {/* The LinkContainer is what actually needs CSS applied to be moved/placed at the bottom of the card.
+                        The LinkContainer wraps the bootstrap button to make it function as a Link from React-Router. */}
+                        <LinkContainer to={link} className='mt-auto'>
+                            <Button>Go!</Button>
+                        </LinkContainer>
+                    </Card.Body>
+                </Card>
+        );
+    }
+}
+
+export default CategoryCard;
diff --git a/src/Components/CovidCategory/TestingCenters.js b/src/Components/CovidCategory/TestingCenters.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { Container } from 'react-bootstrap';
+
+class TestingCenters extends Component {
+    render() {
+        return (
+            <Container className='flex'>
+                <h1>Information about testing center locations.</h1>
+            </Container>
+        );
+    }
+}
+
+export default TestingCenters;
diff --git a/src/Components/CovidNavigation.js b/src/Components/CovidNavigation.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import CategoryCard from './CategoryCard';
+import { Container, CardColumns } from 'react-bootstrap';
+
+class CovidCategory extends Component {
+    render() {
+        return (
+            <Container className='flex'>
+                <CardColumns style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        flexWrap: 'wrap',
+                        justifyContent: 'center',
+
+                    }}>
+                    <CategoryCard 
+                        heading='COVID-19 Testing Sites'
+                        title='Places where COVID-19 Testing is done'
+                        description='Placeholder text: List of locations and facilities that perform testing for COVID-19'
+                        link='/covid-resources/testing-centers'
+                    />
+
+                </CardColumns>
+            </Container>
+        );
+    }
+}
+
+export default CovidCategory;
diff --git a/src/Components/FoodCategory/FoodDistribution.js b/src/Components/FoodCategory/FoodDistribution.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { Container } from 'react-bootstrap';
+
+class FoodDistribution extends Component {
+    render() {
+        return (
+            <Container className='flex'>
+                <h1>Information about food distribution sites.</h1>
+            </Container>
+        );
+    }
+}
+
+export default FoodDistribution;
diff --git a/src/Components/FoodCategory/RestaurantInfo.js b/src/Components/FoodCategory/RestaurantInfo.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { Container } from 'react-bootstrap';
+
+class RestarauntInfo extends Component {
+    render() {
+        return (
+            <Container className='flex'>
+                <h1>Information about restaurants.</h1>
+            </Container>
+        );
+    }
+}
+
+export default RestarauntInfo;
diff --git a/src/Components/FoodNavigation.js b/src/Components/FoodNavigation.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import CategoryCard from './CategoryCard';
+import { Container, CardColumns } from 'react-bootstrap';
+
+class FoodNavigation extends Component {
+    render() {
+        return (
+            <Container className='flex'>
+                <CardColumns style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        flexWrap: 'wrap',
+                        justifyContent: 'center',
+
+                    }}>
+                    <CategoryCard 
+                        heading='Food Distribution Sites'
+                        title='Places where food is distributed.'
+                        description='Placeholder text: Need to find somewhere for food distribution? Here is a list and location 
+                            of places where food is being distributed.'
+                        link='/food-resources/food-distribution'
+                    />
+
+                    <CategoryCard 
+                        heading='Restaurants'
+                        title='Restaraunts offering services.'
+                        description='Placeholder text: List of restaurants that are still operating, 
+                        including offering take out and/or delivery.'
+                        link='/food-resources/restaurant-info'
+                    />
+
+                </CardColumns>
+            </Container>
+        );
+    }
+}
+
+export default FoodNavigation;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<?xml version="1.0" encoding="utf-8"?>
		<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>