sco/tecnologiabanana
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

show video info on left with scroll on > 992px width devices, without scroll otherwise

Browse Source
This commit is contained in:
matteo
2018-12-13 02:18:03 +01:00
parent 434d506271
commit 12afdad684
6 changed files with 207 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+32 -16
View File
@@ -1,7 +1,7 @@
import React from 'react';
import { Route, Switch, Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
import 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars
import { Row, Col, Button } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
import { Row, Col, Button, Collapse } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
@@ -9,29 +9,45 @@ import VideoInfo from './VideoInfo';
import './css/App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isInfoToggled: false
};
}
render() {
return (
<React.Fragment>
<Row>
<TopBar />
<TopBar />
</Row>
<Row className="bg-black px-2">
<Col xs="12" sm={{ span: 6, order: 6}} className="pt-2 p-0 p-sm-0">
<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
<Row className="upperSection px-2">
<Col xs="12" lg={this.state.isInfoToggled ? { span: 6, offset: 1, order: 2 } : { span: 6, offset: 0, order: 2 }} className="align-content-center pt-2 p-1 pr-2">
<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
</Col>
<Col xs="12" sm="6" className="w-75 pt-2 p-0 p-sm-0">
<Button variant="outline-light" className="w-100 align-content-center d-sm-none">Info</Button>
<p className="text-white">Qui andrebbero le informazioni video,
in modalità telefono questo spazio è sotto il video e si potrebbe
fare a scomparsa con un pulsante, lasciando un label cliccabile per aprire e chiudere
la scheda</p>
<Col xs="12" lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }} style={{ overflow: "auto" }} className="w-75 h-100 py-2 p-0 p-sm-0">
<div className='d-flex justify-content-center pt-2'>
<Button variant="outline-light"
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
className="w-75 align-content-center"
aria-controls="infovideo-collapse"
aria-expanded={this.state.isInfoToggled}>
{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
</Button>
</div>
<Collapse in={this.state.isInfoToggled}>
<div className="pt-2" id="infovideo-collapse">
<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
</div>
</Collapse>
</Col>
</Row>
<Row className='scrollable'>
<Switch>
<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
<Route exact path='/' component={VideoList} />
<Route render={() => <div>URL not found</div>}/>
<Row className='downSection'>
<Switch>
{/* */}
<Route exact path='/' component={VideoList} />
<Route render={() => <div>URL not found</div>} />
</Switch>
</Row>
</React.Fragment>