imported loading gifs

new routes + loading
loading + notfound pages WIP
2020-03-08 17:40:44 +01:00 · 2020-03-08 17:12:11 +01:00 · 2020-01-14 21:46:12 +01:00 · 2020-01-14 20:37:37 +01:00 · 2020-01-14 19:37:12 +01:00 · 2020-01-14 19:34:28 +01:00
22 changed files with 275 additions and 35 deletions
--- a/public/index.html
+++ b/public/index.html
@ -3,7 +3,7 @@
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1" />
-        <title>MPBE</title>
+        <title>LORD//CHANNEL</title>
    </head>
    <body style="background-color: #343a40;">
        <div id="root"></div>
--- a/src/App.js
+++ b/src/App.js
@ -1,16 +1,41 @@
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import React, { Suspense, lazy } from 'react';
+import Loading from "./routes/Loading";

-const Home = lazy(() => import('./Home'));
-//const About = lazy(() => import('./About'));
+//const Home = lazy(() => import('./routes/Home'));
+const Home = lazy(() => {
+    return new Promise(resolve => {
+        setTimeout(() => resolve(import("./routes/Home")), 500);
+    });
+});
+const Film = lazy(() => import('./routes/Film'));
+const Anime = lazy(() => import('./routes/Anime'));
+const SerieTV = lazy(() => import('./routes/SerieTV'));
+const Immagini = lazy(() => import('./routes/Immagini'));
+const Musica = lazy(() => import('./routes/Musica'));
+const Giochi = lazy(() => import('./routes/Giochi'));
+const Programmi = lazy(() => import('./routes/Programmi'));
+const Pannocchiacattiva = lazy(() => import('./routes/Pannocchiacattiva'))
+
+const NotFound = lazy(() => import('./routes/NotFound'));

 class App extends React.Component {
    render() {
        return (
            <Router>
-                <Suspense fallback={<div>Loading...</div>}>
+                <Suspense fallback={<Loading />}>
                    <Switch>
                        <Route exact path="/" component={Home}/>
+                        <Route path="/Film" component={Film}/>
+                        <Route path="/Anime" component={Anime}/>
+                        <Route path="/SerieTV" component={SerieTV}/>
+                        <Route path="/Immagini" component={Immagini}/>
+                        <Route path="/Musica" component={Musica}/>
+                        <Route path="/Giochi" component={Giochi}/>
+                        <Route path="/Programmi" component={Programmi}/>
+                        <Route path="/Pannocchiacattiva" component={Pannocchiacattiva}/>
+
+                        <Route component={NotFound} />
                    </Switch>
                </Suspense>
            </Router>
--- a/src/Buttons.js
+++ b/src/Buttons.js
@ -1,22 +1,17 @@
-import React from 'react'
+import React from 'react';
+import {Link} from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
 import './Buttons.css';

-export default class NavButton extends React.Component {
+class NavButton extends React.Component {
    render() {
        return (
        <li className="nav-item">
-            <Button name={this.props.name} />
+            <Link to={this.props.lhref}><button className="btn1">{this.props.name}</button></Link>
        </li>
        );
    }
 }

-export class Button extends React.Component {
-    render() {
-        return (
-        <button className="btn1">{this.props.name}</button>
-        );
-    }
-}
+export default NavButton;
--- a/src/ModalButton.css
+++ b/src/ModalButton.css
@ -1,4 +1,4 @@
-.videoPlayer {
+.VideoPlayer {
    width: 100%;
    height: 250px;
    background-color: black;
--- a/src/ModalButton.js
+++ b/src/ModalButton.js
@ -1,7 +1,7 @@
 import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
-import Button from './Buttons';
+import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import './Buttons.css';
 import './ModalButton.css';
@ -11,16 +11,17 @@ function ModalButton() {
    
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
+
    return (
    <>
-        <Button className="btn1" name="view" onClick={handleShow} />
+        <Button className="btn1" onClick={handleShow} lhref="#">View</Button>

        <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
                <Modal.Title>Card Title</Modal.Title>
            </Modal.Header>
            <Modal.Body>
-                <VideoPlayer />
+                <div className="VideoPlayer"></div>
                Some quick example text to build on the card title and make up the bulk of the card's content.
            </Modal.Body>
        </Modal>
@ -28,12 +29,4 @@ function ModalButton() {
    );
 }

-class VideoPlayer extends React.Component {
-    render() {
-        return (
-            <div className="videoPlayer"></div>
-        );
-    }
-}
-
 export default ModalButton;
--- a/src/Navbar.js
+++ b/src/Navbar.js
@ -1,4 +1,5 @@
 import React from 'react';
+import {Link} from 'react-router-dom';
 import NavButton from './Buttons';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
@ -8,17 +9,24 @@ class Navbar extends React.Component {
    render() {
        return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
-            <span className="navbar-brand">{this.props.brand}</span>
+            <Link to="/"><span className="navbar-brand">LORD//{this.props.brand}</span></Link>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navButtons" aria-controls="navButtons" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse flex" id="navButtons">
                <ul className="navbar-nav nav-mod">
-                    <NavButton name="Home" />
-                    <NavButton name="Film" />
-                    <NavButton name="Series" />
-                    <NavButton name="About" />
+                    <NavButton name="Film" lhref="/Film" />
+                    <NavButton name="Anime" lhref="/Anime" />
+                    <NavButton name="Serie TV" lhref="/Serietv" />
+                    <NavButton name="Immagini" lhref="/Immagini" />
+                    <NavButton name="Musica" lhref="/Musica" />
+                    <NavButton name="Giochi" lhref="/Giochi" />
+                    <NavButton name="Programmi" lhref="/Programmi" />
                </ul>
+                <form className="form-inline my-2 my-lg-0">
+                    <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+                    <button className="btn1" type="submit">Search</button>
+                </form>
            </div>
        </nav>
        );
--- a/src/routes/Anime.js
+++ b/src/routes/Anime.js
@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Anime extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="ANIME" />
+            </>
+        );
+    }
+}
+
+export default Anime;
--- a/src/routes/Film.js
+++ b/src/routes/Film.js
@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Film extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="FILM" />
+            </>
+        );
+    }
+}
+
+export default Film;
--- a/src/routes/Giochi.js
+++ b/src/routes/Giochi.js
@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Giochi extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="GIOCHI" />
+            </>
+        );
+    }
+}
+
+export default Giochi;
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@ -1,13 +1,13 @@
 import React from 'react';
-import Navbar from './Navbar';
-import Parallax from './Parallax';
-import CardContainer from './CardContainer';
+import Navbar from '../Navbar';
+import Parallax from '../Parallax';
+import CardContainer from '../CardContainer';

 class Home extends React.Component {
    render() {
        return (
            <>
-                <Navbar brand="LORDNABBO" />
+                <Navbar brand="CHANNEL" />
                <Parallax />
                <CardContainer sectionTitle="Latest Uploads" />
                <CardContainer sectionTitle="Random" />
--- a/src/routes/Immagini.js
+++ b/src/routes/Immagini.js
@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Immagini extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="IMMAGINI" />
+            </>
+        );
+    }
+}
+
+export default Immagini;
--- a/src/routes/Loading.js
+++ b/src/routes/Loading.js
@ -0,0 +1,38 @@
+import React from 'react';
+import Navbar from '../Navbar';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min.js';
+import "./centercontainer.css";
+import loading1 from "./loadinggifs/loading1.gif";
+import loading2 from "./loadinggifs/loading2.gif";
+import loading3 from "./loadinggifs/loading3.gif";
+import loading4 from "./loadinggifs/loading4.gif";
+
+class Loading extends React.Component {
+    render() {
+
+        let randInt = () => {
+            return Math.round(Math.random() * 4);
+        };
+
+        let randomGif = () => {
+            let images = [loading1, loading2, loading3, loading4]
+            return images[randInt()];
+        };
+
+        console.log(randomGif())
+
+        return (
+            <>
+                <Navbar brand="LOADING" />
+                <div className="centered">
+                    <div className="row">
+                        <img alt="Loading..." src={randomGif()} />
+                    </div>
+                </div>
+            </>
+        );
+    }
+}
+
+export default Loading;
--- a/src/routes/Musica.js
+++ b/src/routes/Musica.js
@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Musica extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="MUSICA" />
+            </>
+        );
+    }
+}
+
+export default Musica;
--- a/src/routes/NotFound.js
+++ b/src/routes/NotFound.js
@ -0,0 +1,22 @@
+import React from 'react';
+import Navbar from '../Navbar';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min.js';
+import "./centercontainer.css"
+
+class NotFound extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="404" />
+                <div className="centered">
+                    <div className="row">
+                        <img alt="Loading..." src="https://i.pinimg.com/originals/8f/c3/21/8fc32146cbf72ae17430e05ecc8b61be.gif" />
+                    </div>
+                </div>
+            </>
+        );
+    }
+}
+
+export default NotFound;
--- a/src/routes/Pannocchiacattiva.js
+++ b/src/routes/Pannocchiacattiva.js
@ -0,0 +1,46 @@
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min.js';
+import Form from 'react-bootstrap/Form';
+import Col from 'react-bootstrap/Col';
+import '../Buttons.css';
+import Navbar from '../Navbar';
+
+class Pannocchiacattiva extends React.Component {
+    render() {
+        const shiroTexto = {
+            color: 'white'
+        }
+        return (
+            <>
+                <Navbar brand="PANNOCCHIA" />
+                <div className="centered" style={shiroTexto}>
+                    <Form>
+                        <Form.Group controlId="exampleForm.ControlInput1">
+                            <Form.Control type="text" placeholder="Titolo Anime" />
+                        </Form.Group>
+                        <Form.Group controlId="exampleForm.ControlTextarea1">
+                            <Form.Control type="text" placeholder="Trama" as="textarea" rows="3" />
+                        </Form.Group>
+                        <Form.Row>
+                            <Form.Group as={Col} controlId="formGridCity">
+                                <Form.Control type="text" placeholder="Durata" />
+                            </Form.Group>
+
+                            <Form.Group as={Col} controlId="formGridState">
+                                <Form.Control type="text" placeholder="Voto" />
+                            </Form.Group>
+
+                            <Form.Group as={Col} controlId="formGridZip">
+                                <Form.Control type="text" placeholder="Lingua" />
+                            </Form.Group>
+                        </Form.Row>
+                        <button className="btn1">Submit</button>
+                    </Form>
+                </div>
+            </>
+        );
+    }
+}
+
+export default Pannocchiacattiva;
--- a/src/routes/Programmi.js
+++ b/src/routes/Programmi.js
@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Programmi extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="PROGRAMMI" />
+            </>
+        );
+    }
+}
+
+export default Programmi;
--- a/src/routes/SerieTV.js
+++ b/src/routes/SerieTV.js
@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class SerieTV extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="SERIETV" />
+            </>
+        );
+    }
+}
+
+export default SerieTV;
--- a/src/routes/centercontainer.css
+++ b/src/routes/centercontainer.css
@ -0,0 +1,15 @@
+.centered {
+    height: 93vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.row {
+    width: auto;
+}
+
+img {
+    height: 30vh;
+    width: auto;
+}
--- a/src/routes/loadinggifs/loading1.gif
+++ b/src/routes/loadinggifs/loading1.gif
--- a/src/routes/loadinggifs/loading2.gif
+++ b/src/routes/loadinggifs/loading2.gif
--- a/src/routes/loadinggifs/loading3.gif
+++ b/src/routes/loadinggifs/loading3.gif
--- a/src/routes/loadinggifs/loading4.gif
+++ b/src/routes/loadinggifs/loading4.gif
Author	SHA1	Message	Date
Enri1196	4f6b0652a6	imported loading gifs	2020-03-08 17:40:44 +01:00
Enri1196	a30540059b	new routes + loading	2020-03-08 17:12:11 +01:00
enrico	ed01ae22c7	loading + notfound pages WIP	2020-01-14 21:46:12 +01:00
enrico	1a31ace453	Modal Fixed!!!	2020-01-14 20:37:37 +01:00
enrico	edfbf242f0	typo fix	2020-01-14 19:37:12 +01:00
enrico	0ae333e7aa	ADDED all routes	2020-01-14 19:34:28 +01:00
enrico	22154d1953	FIX: routing, links, nav buttons, dynamic title	2020-01-13 21:48:51 +01:00
Enri1196	dc57b6b096	Merge pull request 'creazione routing notfound e About' (#3 ) from lordcommander/master into master Ottime modifiche, verranno accettate con onore!! 👍	2020-01-12 17:18:07 +00:00
Enri1196	4645211658	Merge pull request 'Aggiornato Titolo index.html' (#2 ) from MickSlash/master into master Accettata con onore	2020-01-12 17:15:32 +00:00
lordcommander	07e5183266	creazione routing notfound e About	2020-01-12 18:08:48 +01:00
Mick877	7c725a62fa	Aggiornato Titolo index.html	2020-01-12 14:22:18 +01:00
Enri1196	341163fed2	Merge pull request 'Modificata Navbar Brand in LORDNABBO' (#1 ) from Mick877/master into master	2020-01-12 10:55:21 +00:00