Compare commits

..

12 Commits

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
22 changed files with 275 additions and 35 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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;

View File

@ -1,4 +1,4 @@
.videoPlayer {
.VideoPlayer {
width: 100%;
height: 250px;
background-color: black;

View File

@ -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;

View File

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

14
src/routes/Anime.js Normal file
View File

@ -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;

14
src/routes/Film.js Normal file
View File

@ -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;

14
src/routes/Giochi.js Normal file
View File

@ -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;

View File

@ -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" />

14
src/routes/Immagini.js Normal file
View File

@ -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;

38
src/routes/Loading.js Normal file
View File

@ -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;

14
src/routes/Musica.js Normal file
View File

@ -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;

22
src/routes/NotFound.js Normal file
View File

@ -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;

View File

@ -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;

14
src/routes/Programmi.js Normal file
View File

@ -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;

14
src/routes/SerieTV.js Normal file
View File

@ -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;

View File

@ -0,0 +1,15 @@
.centered {
height: 93vh;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
}
img {
height: 30vh;
width: auto;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 679 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB