lordcommander
/
lordfrontend
forked from Enri1196/lordfrontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

merge into: lordcommander:master
Branches Tags
lordcommander:master
Enri1196:master
...
pull from: Enri1196:master
Branches Tags
Enri1196:master
lordcommander:master

10 Commits
master ... master

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
Mick877 7c725a62fa Aggiornato Titolo index.html 2020-01-12 14:22:18 +01:00
24 changed files with 272 additions and 71 deletions
Show Stats Expand all files Collapse all files

2
public/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1" /> <meta name="viewport" content="initial-scale=1" />
<title>MPBE</title> <title>LORD//CHANNEL</title>
</head> </head>
<body style="background-color: #343a40;"> <body style="background-color: #343a40;">
<div id="root"></div> <div id="root"></div>

14
src/About.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import Navbar from './Navbar';
class About extends React.Component {
render() {
return (
<>
<Navbar brand="LORDNABBO" />
</>
);
}
}
export default About;

32
src/App.js
View File

@ -1,21 +1,41 @@
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react'; import React, { Suspense, lazy } from 'react';
import Loading from "./routes/Loading";
const Home = lazy(() => import('./Home')); //const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./About')); const Home = lazy(() => {
const Notfound = lazy(() => import('./notfound')); 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 { class App extends React.Component {
render() { render() {
return ( return (
<Router> <Router>
<Suspense fallback={<div>Loading...</div>}> <Suspense fallback={<Loading />}>
<Switch> <Switch>
<Route exact path="/" component={Home}/> <Route exact path="/" component={Home}/>
<Route path="/About" component={About}/> <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} /> <Route component={NotFound} />
</Switch> </Switch>
</Suspense> </Suspense>
</Router> </Router>

16
src/Buttons.js
View File

@ -1,23 +1,17 @@
import React from 'react' import React from 'react';
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js'; import 'bootstrap/dist/js/bootstrap.min.js';
import './Buttons.css'; import './Buttons.css';
export default class NavButton extends React.Component { class NavButton extends React.Component {
render() { render() {
return ( return (
<li className="nav-item"> <li className="nav-item">
<Button name={this.props.name} /> <Link to={this.props.lhref}><button className="btn1">{this.props.name}</button></Link>
</li> </li>
); );
} }
} }
export class Button extends React.Component { export default NavButton;
render() {
return (
<button className="btn1" type="button"><Link to="/About">{this.props.name}</Link></button>
);
}
}

2
src/ModalButton.css
View File

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

15
src/ModalButton.js
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js'; import 'bootstrap/dist/js/bootstrap.min.js';
import Button from './Buttons'; import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal'; import Modal from 'react-bootstrap/Modal';
import './Buttons.css'; import './Buttons.css';
import './ModalButton.css'; import './ModalButton.css';
@ -11,16 +11,17 @@ function ModalButton() {
const handleClose = () => setShow(false); const handleClose = () => setShow(false);
const handleShow = () => setShow(true); const handleShow = () => setShow(true);
return ( return (
<> <>
<Button className="btn1" name="view" onClick={handleShow} /> <Button className="btn1" onClick={handleShow} lhref="#">View</Button>
<Modal show={show} onHide={handleClose}> <Modal show={show} onHide={handleClose}>
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title>Card Title</Modal.Title> <Modal.Title>Card Title</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <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. Some quick example text to build on the card title and make up the bulk of the card's content.
</Modal.Body> </Modal.Body>
</Modal> </Modal>
@ -28,12 +29,4 @@ function ModalButton() {
); );
} }
class VideoPlayer extends React.Component {
render() {
return (
<div className="videoPlayer"></div>
);
}
}
export default ModalButton; export default ModalButton;

20
src/Navbar.js
View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import {Link} from 'react-router-dom';
import NavButton from './Buttons'; import NavButton from './Buttons';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js'; import 'bootstrap/dist/js/bootstrap.min.js';
@ -8,20 +9,23 @@ class Navbar extends React.Component {
render() { render() {
return ( return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark"> <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"> <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> <span className="navbar-toggler-icon"></span>
</button> </button>
<div className="collapse navbar-collapse flex" id="navButtons"> <div className="collapse navbar-collapse flex" id="navButtons">
<ul className="navbar-nav nav-mod"> <ul className="navbar-nav nav-mod">
<NavButton name="Home" lhref="/" /> <NavButton name="Film" lhref="/Film" />
<NavButton name="Film" /> <NavButton name="Anime" lhref="/Anime" />
<NavButton name="Series" /> <NavButton name="Serie TV" lhref="/Serietv" />
<NavButton name="About" lhref="/About" /> <NavButton name="Immagini" lhref="/Immagini" />
<NavButton name="Musica" lhref="/Musica" />
<NavButton name="Giochi" lhref="/Giochi" />
<NavButton name="Programmi" lhref="/Programmi" />
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form className="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn1" type="submit">Search</button> <button className="btn1" type="submit">Search</button>
</form> </form>
</div> </div>
</nav> </nav>

15
src/notfound.js
View File

@ -1,15 +0,0 @@
import React from 'react';
import Navbar from './Navbar';
class NotFound extends React.Component {
render() {
return (
<>
<Navbar brand="LORDNABBO" />
<div><h1>I MEME 404</h1></div>
</>
);
}
}
export default NotFound;

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;

8
src/Home.js → src/routes/Home.js
View File

@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import Navbar from './Navbar'; import Navbar from '../Navbar';
import Parallax from './Parallax'; import Parallax from '../Parallax';
import CardContainer from './CardContainer'; import CardContainer from '../CardContainer';
class Home extends React.Component { class Home extends React.Component {
render() { render() {
return ( return (
<> <>
<Navbar brand="LORDNABBO" /> <Navbar brand="CHANNEL" />
<Parallax /> <Parallax />
<CardContainer sectionTitle="Latest Uploads" /> <CardContainer sectionTitle="Latest Uploads" />
<CardContainer sectionTitle="Random" /> <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;

46
src/routes/Pannocchiacattiva.js Normal file
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;

15
src/routes/centercontainer.css Normal file
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;
}

BIN
src/routes/loadinggifs/loading1.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
src/routes/loadinggifs/loading2.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 679 KiB

BIN
src/routes/loadinggifs/loading3.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
src/routes/loadinggifs/loading4.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB