Changes to navbar and imagelist etc.

package.json

@@ -6,7 +6,12 @@
     "@material-ui/core": "^4.5.0",
     "bootstrap": "^4.3.1",
     "react": "^16.10.2",
+    "react-bootstrap": "^1.0.0-beta.14",
     "react-dom": "^16.10.2",
+    "react-gesture-gallery": "^1.1.0",
+    "react-gesture-responder": "^2.1.0",
+    "react-image-lightbox": "^5.1.0",
+    "react-multiple-image-grid": "^0.1.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0"
   },

src/App.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import 'bootstrap/dist/css/bootstrap.min.css';
-import Navigator from './Components/Navigator';
+import Navigator2 from './Components/Navigator2';
 import './App.css';
 import Home from './Components/Home';
 import Plants from './Components/Plants';
@@ -13,7 +13,7 @@ export default function App() {
   return (
     <Router>
       <div>
-        <Navigator />
+        <Navigator2 />
           <Switch>
           <Route path="/system" component={Sysinfo}/>
           <Route path="/plants" component={Plants}/>

src/Components/Home.js

@@ -1,17 +1,32 @@
 import React from 'react';
 //import ModalList from './ModalList';
-import ModalGrid from './ModalGrid';
+//import ModalGrid from './ModalGrid';
+//import ImageGallery from './ImageGallery';
+import MultipleGridImages from 'react-multiple-image-grid'
+
 
 // TODO fix modallist to display right item
 
 const Home = () => {
     return (
         <div>
-            <div className="wrapper">
-                <h1 style={{padding:10, fontSize:45}}>Welcome to TinyForest</h1>
-                <ModalGrid />
+            <div style={{width: '60%'}}>
+                <MultipleGridImages images={[
+                "../Photos/kokous1.jpeg",
+                "../photos/kolvaus1.jpeg",
+                "../photos/kolvaus2.jpg",
+                "../photos/kolvaus3.jpg",
+                "../photos/kolvaus4.jpg",
+                "../photos/konstaRpi.jpeg",
+                "../photos/rpiMoist.jpeg",
+                "../photos/rpiPek.jpeg",
+                "../photos/rpiTemp.jpeg",
+                "../photos/valkosipulivk1.jpeg",
+                "../photos/valkosipulivk2.jpg",
+                "../photos/valkosipulivk3.jpg"]}/>
             </div>
         </div>
+
     );
 };
 

src/Components/ImageGallery.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import {Gallery, GalleryImage} from 'react-gesture-gallery';
+
+const ImageGallery = props => {
+
+    const images = [
+        "../photos/kokous1.jpeg",
+        "../photos/kolvaus1.jpeg",
+        "../photos/kolvaus2.jpg",
+        "../photos/kolvaus3.jpg",
+        "../photos/kolvaus4.jpg",
+        "../photos/konstaRpi.jpeg",
+        "../photos/rpiMoist.jpeg",
+        "../photos/rpiPek.jpeg",
+        "../photos/rpiTemp.jpeg",
+        "../photos/valkosipulivk1.jpeg",
+        "../photos/valkosipulivk2.jpg",
+        "../photos/valkosipulivk3.jpg"]
+
+    const [index, setIndex] = useState(0)
+
+    return (
+            <Gallery
+                style={{
+                    height: '50vh',
+                    width: '60vw',
+                    background: 'black'
+                }}
+                index={index}
+                onRequestChange={i => {
+                    setIndex(i);
+                }}
+            >
+                {images.map(image => (
+                    <GalleryImage objectFit="fit" src={image} />
+                ))}
+            </Gallery>
+    );
+};
+
+
+export default ImageGallery;

src/Components/ModalList.js

@@ -36,7 +36,7 @@ const ModalList = () => {
                 {imageList.map((item, index) =>
                 <div key={index}>
                     <button type="button" onClick={handleOpen}>
-                        <img id="imageIndex" alt="Broken" src={item.url} width="250"></img>
+                        <img id="imageIndex" alt="Broken" src={item.url} width="70%"></img>
                     </button>
 
                     <Modal
@@ -44,7 +44,7 @@ const ModalList = () => {
                         onClose={handleClose}
                     >
                         <div  className="Modaldiv">
-                            <img id={index} alt="Broken" src={item.url} width="400" ></img>
+                            <img id={index} alt="Broken" src={item.url} width='600px'></img>
                             <Typography variant="body1">{item.desc}</Typography>
                         </div>
                     </Modal>

src/Components/Modalbox1.js

@@ -17,7 +17,7 @@ const Modalbox1 = () => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/kolvaus1.jpeg' width="250"></img>
+                <img alt="Broken" src='../Photos/kolvaus1.jpeg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox10.js

@@ -17,7 +17,7 @@ const Modalbox10 = props => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/kolvaus3.jpg' width="250"></img>
+                <img alt="Broken" src='../Photos/kolvaus3.jpg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox11.js

@@ -17,7 +17,7 @@ const Modalbox11 = props => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/kolvaus4.jpg' width="250"></img>
+                <img alt="Broken" src='../Photos/kolvaus4.jpg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox12.js

@@ -17,7 +17,7 @@ const Modalbox12 = props => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/valkosipulivk3.jpg' width="250"></img>
+                <img alt="Broken" src='../Photos/valkosipulivk3.jpg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox2.js

@@ -17,7 +17,7 @@ const Modalbox2 = () => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/kokous1.jpeg' width="250"></img>
+                <img alt="Broken" src='../Photos/kokous1.jpeg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox3.js

@@ -17,7 +17,7 @@ const Modalbox3 = () => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/konstaRpi.jpeg' width="250"></img>
+                <img alt="Broken" src='../Photos/konstaRpi.jpeg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox4.js

@@ -17,7 +17,7 @@ const Modalbox4 = () => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/rpiMoist.jpeg' width="250"></img>
+                <img alt="Broken" src='../Photos/rpiMoist.jpeg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox5.js

@@ -17,7 +17,7 @@ const Modalbox5 = () => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/rpiPek.jpeg' width="250"></img>
+                <img alt="Broken" src='../Photos/rpiPek.jpeg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox6.js

@@ -17,7 +17,7 @@ const Modalbox6 = props => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/rpiTemp.jpeg' width="250"></img>
+                <img alt="Broken" src='../Photos/rpiTemp.jpeg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox7.js

@@ -17,7 +17,7 @@ const Modalbox7 = props => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/valkosipulivk1.jpeg' width="250"></img>
+                <img alt="Broken" src='../Photos/valkosipulivk1.jpeg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox8.js

@@ -17,7 +17,7 @@ const Modalbox8 = props => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/valkosipulivk2.jpg' height="300" width="250"></img>
+                <img alt="Broken" src='../Photos/valkosipulivk2.jpg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Modalbox9.js

@@ -17,7 +17,7 @@ const Modalbox9 = props => {
     return (
         <div>
             <button type="button" onClick={handleOpen}>
-                <img alt="Broken" src='../Photos/kolvaus2.jpg' width="250"></img>
+                <img alt="Broken" src='../Photos/kolvaus2.jpg' width='80%'></img>
             </button>
             <Modal
                 open={open}

src/Components/Navigator.js

@@ -8,12 +8,14 @@ const Navigator = () => {
         <div>
             <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                 <Link className="navbar-brand" to ="/" >TinyForest</Link>
-                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+                <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
+                    data-target="#navigationbar" aria-controls="navigationbar" aria-expanded="false" aria-label="Toggle navigation">
                     <span className="navbar-toggler-icon"></span>
                 </button>
-                <div className="collapse navbar-collapse" id="navbarText">
+               
+                <div className="collapse navbar-collapse" id="navigationbar">
                 <ul className="navbar-nav mr-auto">
-                    <li className="nav-itemactive">
+                    <li className="nav-item active">
                         <Link className="nav-link" to="/">Home</Link>
                     </li>
                     <li className="nav-item">

src/Components/Navigator2.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../App.css';
+import {Navbar, Nav} from 'react-bootstrap';
+
+const Navigator2 = () => {
+    return (
+        <div>
+            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
+                <Link className="navbar-brand" to="/">TinyForest</Link>
+                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+                <Navbar.Collapse id="responsive-navbar-nav">
+                    <Nav className="mr-auto">
+                    <Link className="nav-link" to="/">Home</Link>
+                    <Link className="nav-link" to="/system">System Information</Link>
+                    <Link className="nav-link" to="/plants">My Plants</Link>
+                    </Nav>
+                </Navbar.Collapse>
+            </Navbar>
+        </div>
+    );
+};
+
+export default Navigator2;