From 7fccd151c307438bcb7a908dfcb0151c71c2b4aa Mon Sep 17 00:00:00 2001
From: Riba <mrp19@inf.ufpr.br>
Date: Wed, 23 Oct 2019 12:01:04 -0300
Subject: [PATCH] =?UTF-8?q?Aplicando=20o=20carousel=20na=20se=C3=A7=C3=A3o?=
=?UTF-8?q?=201=20do=20site?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Components/Carrossel.js | 52 ++++++++++++++++++++++
src/Components/Modal.js | 88 +++++++++++++++++++++++--------------
src/Pages/UserTerms.js | 5 +--
3 files changed, 108 insertions(+), 37 deletions(-)
diff --git a/src/Components/Carrossel.js b/src/Components/Carrossel.js
index e69de29b..28b8c133 100644
--- a/src/Components/Carrossel.js
+++ b/src/Components/Carrossel.js
@@ -0,0 +1,52 @@
+/*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 {Component} from 'react';
+import { Carousel } from 'react-responsive-carousel';
+
+const areaStyle={
+ paddingTop: "5px",
+ fontSize: "16px",
+ textAlign:"left",
+ backgroundColor: "inherit",
+ width: "700px",
+ padding: "20px",
+ minHeight: "150px"
+}
+export default class CarouselTermosResumidos extends Component {
+
+ constructor(props){
+ super(props);
+
+ };
+ render(){
+ return(
+ <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <div>TESTE</div>
+ <div>DO</div>
+ <div>CAROUSEL</div>
+ <div>AGORA</div>
+ <div>VAI</div>
+ <div>POR</div>
+ <div>FAVOR</div>
+ </Carousel>
+ );
+
+
+ }
+}
diff --git a/src/Components/Modal.js b/src/Components/Modal.js
index c8ced25d..19f923af 100644
--- a/src/Components/Modal.js
+++ b/src/Components/Modal.js
@@ -1,37 +1,48 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Modal from '@material-ui/core/Modal';
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
-function rand() {
- return Math.round(Math.random() * 20) - 10;
-}
+This file is part of Plataforma Integrada MEC.
-function getModalStyle() {
- const top = 50 + rand();
- const left = 50 + rand();
+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.
- return {
- top: `${top}%`,
- left: `${left}%`,
- transform: `translate(-${top}%, -${left}%)`,
- };
-}
+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 { makeStyles } from '@material-ui/styles';
+import Modal from '@material-ui/core/Modal';
+import { Carousel } from 'react-responsive-carousel';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
const useStyles = makeStyles(theme => ({
+ modal: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center"
+ },
paper: {
- position: 'absolute',
- width: 400,
- backgroundColor: theme.palette.background.paper,
+ backgroundColor:"blue",
border: '2px solid #000',
- boxShadow: theme.shadows[5],
- padding: theme.spacing(2, 4, 3),
+ boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
},
+ carousel: {
+ background:"blue",
+ width: "750px",
+ height:"370px"
+ }
}));
-export default function SimpleModal() {
+export default function TransitionsModal() {
const classes = useStyles();
- // getModalStyle is not a pure function, we roll the style only on the first render
- const [modalStyle] = React.useState(getModalStyle);
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
@@ -44,23 +55,32 @@ export default function SimpleModal() {
return (
<div>
- <p>Click to get the full Modal experience!</p>
<button type="button" onClick={handleOpen}>
- Open Modal
+ react-transition-group
</button>
<Modal
- aria-labelledby="simple-modal-title"
- aria-describedby="simple-modal-description"
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ className={classes.modal}
open={open}
onClose={handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
>
- <div style={modalStyle} className={classes.paper}>
- <h2 id="simple-modal-title">Text in a modal</h2>
- <p id="simple-modal-description">
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- </p>
- <SimpleModal />
- </div>
+ <Fade in={open}>
+ <Carousel className={classes.carousel} showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <div>TESTE</div>
+ <div>DO</div>
+ <div>CAROUSEL</div>
+ <div>AGORA</div>
+ <div>VAI</div>
+ <div>POR</div>
+ <div>FAVOR</div>
+ </Carousel>
+ </Fade>
</Modal>
</div>
);
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 31279b33..50086f44 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -20,7 +20,6 @@ import React, {Component} from 'react';
import ExpansionPanels from '../Components/ExpansionPanels'
import Grid from '@material-ui/core/Grid';
import Banner1 from "../img/termos/banner.jpg";
-import { AutoRotatingCarousel } from 'material-auto-rotating-carousel'
import Modal from '../Components/Modal'
@@ -63,8 +62,8 @@ class UserTerms extends Component {
<div>
<div style = {bannerStyle}>
- <h2 style={{width: "100%", height:"370px",textAlign: "center",marginTop:"0px", paddingTop:"9rem",fontSize:"52px"}}>TERMOS DE USO</h2>
- <div><Modal/></div>
+ <h2 style={{width: "100%",textAlign: "center",marginTop:"0px", paddingTop:"9rem",fontSize:"52px"}}>TERMOS DE USO</h2>
+ <Modal/>
</div>
<div style= {secao2}>
--
GitLab