diff --git a/src/Components/ModalVideoApresentacao.js b/src/Components/ModalVideoApresentacao.js new file mode 100644 index 0000000000000000000000000000000000000000..709ea57b6042a9058a209a8667e91e9a45fd22be --- /dev/null +++ b/src/Components/ModalVideoApresentacao.js @@ -0,0 +1,78 @@ +/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre +Departamento de Informatica - Universidade Federal do Parana + +This file is part of Plataforma Integrada MEC. + +Plataforma Integrada MEC is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +Plataforma Integrada MEC is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ + +import React from 'react'; +import Modal from '@material-ui/core/Modal'; +import Backdrop from '@material-ui/core/Backdrop'; +import Fade from '@material-ui/core/Fade'; +import styled from 'styled-components'; + +export default function ModalVideoApresentacao (props) { + + return ( + <StyledModal + aria-labelledby="transition-modal-title" + aria-describedby="transition-modal-description" + open={props.open} + centered="true" + onClose={props.handleClose} + closeAfterTransition + BackdropComponent={Backdrop} + BackdropProps={{ + timeout: 500, + }} + > + <Fade in={props.open}> + <VideoContainer> + <iframe + src="https://www.youtube.com/embed/gejBqyfJr9A" width="560" height="315" + frameBorder="0" allowFullScreen className="video" + /> + </VideoContainer> + </Fade> + </StyledModal> + ) +} + +const VideoContainer = styled.div` + position : relative; + width : 100%; + height : 0; + padding-bottom : 56.25%; + + .video { + width : 100%; + height : 100%; + position : absolute; + top : 0; + left : 0; + } +` + +const StyledModal = styled(Modal)` + .djXaxP{ + margin : 0 !important; + } + display : flex; + align-items: center; + justify-content : center; + text-align : center; + padding : 10px !important; + max-width : none; + max-height : none; +` diff --git a/src/Components/SearchSection.js b/src/Components/SearchSection.js index c82035cc368fb52601ce32dc3ebb4cae30d5a9c5..fac1acb0fc1bbf0423cc56a59eb93d6b4d4ca957 100644 --- a/src/Components/SearchSection.js +++ b/src/Components/SearchSection.js @@ -16,13 +16,14 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, {Component} from 'react'; +import React, {Component} from 'react'; import '../App.css'; import banner from '../img/bannerBusca.jpg'; // import SearchBar from './SearchBar'; import {Row} from 'react-grid-system'; import {MdInfoOutline} from "react-icons/md" import { FaRegPlayCircle} from "react-icons/fa"; +import ModalVideoApresentacao from "./ModalVideoApresentacao.js" const bannerStyle={ width: "100%", @@ -55,12 +56,18 @@ class SearchSection extends Component{ constructor(props){ super(props); this.state={ - color: "#ff7f00" + color: "#ff7f00", + modalOpen : false };} + toggleModal = () => { + this.setState({modalOpen : !this.state.modalOpen}) + } render(){ return( + <React.Fragment> + <ModalVideoApresentacao open={this.state.modalOpen} handleClose={this.toggleModal}/> <div style={bannerStyle}> <div style={titleStyle}> <h2>Plataforma MEC de Recursos Educacionais Digitais</h2> @@ -72,8 +79,10 @@ class SearchSection extends Component{ <SearchBar/> </Container> */} <div style={{paddingBottom: "100px", color: "white"}}> - <a href="sobre" style={{color:"#fff",textDecoration: "none", outline:"none"}}><MdInfoOutline size="24px" style={{verticalAlign: "middle"}} />SOBRE A PLATAFORMA</a> - <a href="#apresentacao" style={{color:"#fff",textDecoration: "none"}}> <FaRegPlayCircle size="20px" style={{verticalAlign: "middle"}} />VÃDEO DE APRESENTAÇÃO</a> + <a href="sobre" style={{color:"#fff",textDecoration: "none", outline:"none", paddingRight : "10px"}}><MdInfoOutline size="24px" style={{verticalAlign: "middle", paddingRight : "5px"}} />SOBRE A PLATAFORMA</a> + <span onClick={this.toggleModal} style={{cursor : "pointer"}}> + <FaRegPlayCircle size="20px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>VÃDEO DE APRESENTAÇÃO + </span> </div> <Row justify="center"> <button style={{...buttonStyle, ...{backgroundColor: "#ff7f00",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Recursos")}}>Recursos Educacionais Digitais</button> @@ -81,6 +90,7 @@ class SearchSection extends Component{ <button style={{...buttonStyle, ...{backgroundColor: "#673ab7",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Colecoes")}}>Coleções dos Usuários</button> </Row> </div> + </React.Fragment> ); } }