diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 074fd927a6a295f87908e5fb8304b152fff42655..b71f4f602d715acffc06644ce42739ec1fd03300 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -16,195 +16,263 @@ 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 axios from 'axios';
-import {apiUrl} from '../env';
-import './carousel.css';
-import {Col,Row, Container, Hidden, Visible} from 'react-grid-system';
-import ResourceCard from './ResourceCard';
-import MaterialCard from './MaterialCard';
-import CollectionCard from './CollectionCard';
+import React, { Component } from "react";
+import axios from "axios";
+import { apiUrl } from "../env";
+import "./carousel.css";
+import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
+import ResourceCard from "./ResourceCard";
+import MaterialCard from "./MaterialCard";
+import CollectionCard from "./CollectionCard";
import "react-responsive-carousel/lib/styles/carousel.min.css";
-import { Carousel } from 'react-responsive-carousel';
+import { Carousel } from "react-responsive-carousel";
import recursos from "../img/ilustra_recursos_digitais.png";
import materiais from "../img/ilustra_materiais.png";
import colecoes from "../img/ilustra_colecoes.png";
-import Grid from '@material-ui/core/Grid';
+import Grid from "@material-ui/core/Grid";
-const areaStyle={
+const areaStyle = {
paddingTop: "5px",
fontSize: "16px",
- textAlign:"left",
+ textAlign: "left",
backgroundColor: "inherit",
width: "1000px",
margin: "auto",
padding: "20px",
minHeight: "190px"
-}
+};
-class ReqResources extends Component{
- constructor(props){
+class ReqResources extends Component {
+ constructor(props) {
super(props);
this.state = {
- resources: [],
+ resources: []
};
}
- componentDidMount(){
- axios.get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)
- .then(res=> {
- this.setState({resources: res.data});
- console.log(res.data);
- });
+ componentDidMount() {
+ axios
+ .get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)
+ .then(res => {
+ this.setState({ resources: res.data });
+ console.log(res.data);
+ });
}
- render(){
- var row1 = this.state.resources.slice(0, 4);
- var row2 = this.state.resources.slice(4, 8);
- var row3 = this.state.resources.slice(8, 13);
- return(
+ render() {
+ var row1 = this.state.resources.slice(0, 4);
+ var row2 = this.state.resources.slice(4, 8);
+ var row3 = this.state.resources.slice(8, 13);
+ return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- <Row style={{paddingBottom: "5px"}}>
- {row1.map(card => <Col md={3} sm={6} key={card.id}>
- <ResourceCard name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
- thumbnail={card.thumbnail}
- author={card.author}
- avatar={card.publisher.avatar}
- /></Col>)}
- </Row>
- <Row>
- {row2.map(card => <Col md={3} sm={6} key={card.id}>
- <ResourceCard name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
- thumbnail={card.thumbnail}
- author={card.author}
- avatar={card.publisher.avatar}
- /></Col>)}
- </Row>
- <Row>
- {row3.map(card => <Col md={3} sm={6} key={card.id}>
- <ResourceCard name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
- thumbnail={card.thumbnail}
- author={card.author}
- avatar={card.publisher.avatar}
- /></Col>)}
- </Row>
- </Carousel>
- )
+ <Row style={{ paddingBottom: "5px" }}>
+ {row1.map(card => (
+ <Col md={3} sm={6} key={card.id}>
+ <ResourceCard
+ name={card.name}
+ rating={card.score}
+ type={card.object_type}
+ description={card.description}
+ thumbnail={card.thumbnail}
+ author={card.author}
+ avatar={card.publisher.avatar}
+ />
+ </Col>
+ ))}
+ </Row>
+ <Row>
+ {row2.map(card => (
+ <Col md={3} sm={6} key={card.id}>
+ <ResourceCard
+ name={card.name}
+ rating={card.score}
+ type={card.object_type}
+ description={card.description}
+ thumbnail={card.thumbnail}
+ author={card.author}
+ avatar={card.publisher.avatar}
+ />
+ </Col>
+ ))}
+ </Row>
+ <Row>
+ {row3.map(card => (
+ <Col md={3} sm={6} key={card.id}>
+ <ResourceCard
+ name={card.name}
+ rating={card.score}
+ type={card.object_type}
+ description={card.description}
+ thumbnail={card.thumbnail}
+ author={card.author}
+ avatar={card.publisher.avatar}
+ />
+ </Col>
+ ))}
+ </Row>
+ </Carousel>
+ );
}
}
-class ReqCollections extends Component{
- constructor(props){
+class ReqCollections extends Component {
+ constructor(props) {
super(props);
- this.state ={
- collections: [],
+ this.state = {
+ collections: []
};
}
- componentDidMount(){
- axios.get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)
- .then(res=>{this.setState({collections: res.data});
- console.log(res.data);
- });
+ componentDidMount() {
+ axios
+ .get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)
+ .then(res => {
+ this.setState({ collections: res.data });
+ console.log(res.data);
+ });
}
- render(){
- var row1 = this.state.collections.slice(0, 4);
- var row2 = this.state.collections.slice(4, 8);
- var row3 = this.state.collections.slice(8, 13);
- return(
+ render() {
+ var row1 = this.state.collections.slice(0, 4);
+ var row2 = this.state.collections.slice(4, 8);
+ var row3 = this.state.collections.slice(8, 13);
+ return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- <Row style={{paddingBottom: "5px"}}>
- {row1.map(card => <Col md={3} sm={6} key={card.id}>
- <CollectionCard name={card.name}
- rating={card.score}
- author={card.owner.name}
- description={card.description}
- thumbnail={card.items_thumbnails}
- avatar={card.owner.avatar}/></Col>)}
- </Row>
- <Row>
- {row2.map(card => <Col md={3} sm={6} key={card.id}>
- <CollectionCard name={card.name}
- rating={card.score}
- author={card.owner.name}
- description={card.description}
- thumbnail={card.items_thumbnails}
- avatar={card.owner.avatar}/></Col>)}
- </Row>
- <Row>
- {row3.map(card => <Col md={3} sm={6} key={card.id}>
- <CollectionCard name={card.name}
- rating={card.score}
- author={card.owner.name}
- description={card.description}
- thumbnail={card.items_thumbnails}
- avatar={card.owner.avatar}/></Col>)}
- </Row>
- </Carousel>
- )
+ <Row style={{ paddingBottom: "5px" }}>
+ {row1.map(card => (
+ <Col md={3} sm={6} key={card.id}>
+ <CollectionCard
+ name={card.name}
+ rating={card.score}
+ author={card.owner.name}
+ description={card.description}
+ thumbnail={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ />
+ </Col>
+ ))}
+ </Row>
+ <Row>
+ {row2.map(card => (
+ <Col md={3} sm={6} key={card.id}>
+ <CollectionCard
+ name={card.name}
+ rating={card.score}
+ author={card.owner.name}
+ description={card.description}
+ thumbnail={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ />
+ </Col>
+ ))}
+ </Row>
+ <Row>
+ {row3.map(card => (
+ <Col md={3} sm={6} key={card.id}>
+ <CollectionCard
+ name={card.name}
+ rating={card.score}
+ author={card.owner.name}
+ description={card.description}
+ thumbnail={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ />
+ </Col>
+ ))}
+ </Row>
+ </Carousel>
+ );
}
}
-class SubPages extends Component{
- areaRender(){
- switch(this.props.banner){
- case "Recursos":
- return(
- <React.Fragment>
- <div style={{backgroundColor: "#ff7f00"}}>
+class SubPages extends Component {
+ areaRender() {
+ switch (this.props.banner) {
+ case "Recursos":
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#ff7f00" }}>
<Container style={areaStyle}>
- <Grid container style={{display:"flex"}} spacing={5}>
- <Grid item xs={3} >
- <img src={recursos} alt="aba recursos" height="155" style={{float: "right"}}/>
+ <Grid container style={{ display: "flex" }} spacing={5}>
+ <Grid item xs={3}>
+ <img
+ src={recursos}
+ alt="aba recursos"
+ height="155"
+ style={{ float: "right" }}
+ />
</Grid>
<Grid item xs={9}>
- <p style={{textAlign: "justify", color:"#fff"}}>
- Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é,
- a vÃdeos, animações e a outros recursos destinados à educação. São Recursos
- de portais parceiros do MEC e de professores que, como você, atuam na
- Educação Básica!
+ <p style={{ textAlign: "justify", color: "#fff" }}>
+ Nesta área, você tem acesso a Recursos Educacionais
+ Digitais, isto é, a vÃdeos, animações e a outros recursos
+ destinados à educação. São Recursos de portais parceiros
+ do MEC e de professores que, como você, atuam na Educação
+ Básica!
</p>
</Grid>
</Grid>
</Container>
</div>
- <Container style={{padding:"20px"}}>
- <p style={{paddingBottom:"5px", borderBottom: "1px solid #ff7f00", color: "#ff7f00"}}>
- Recursos mais recentes </p>
+ <Container style={{ padding: "20px" }}>
+ <p
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #ff7f00",
+ color: "#ff7f00"
+ }}
+ >
+ Recursos mais recentes{" "}
+ </p>
<Hidden sm xs>
- <ReqResources/>
+ <ReqResources />
</Hidden>
<Visible sm xs>
- <ReqResources/>
+ <ReqResources />
</Visible>
</Container>
</React.Fragment>
- );
- case "Materiais":
- return (
- <React.Fragment>
- <div style={{backgroundColor: "#e81f4f"}}>
- <Container style={areaStyle}>
-
- <img src={materiais} alt="aba materiais" height="165" style={{float: "right"}}/>
- <p>Nesta área, você acessa livremente materiais completos de formação,
- como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos
- elaborados por equipes multidisciplinares e de autoria de pesquisadores
- e educadores renomados nas áreas.</p>
- </Container>
- </div>
- <Container style={{padding:"20px"}}>
- <p style={{paddingBottom:"5px", borderBottom: "1px solid #e81f4f", color: "#e81f4f"}}>
- Materiais mais recentes </p>
+ );
+ case "Materiais":
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#e81f4f" }}>
+ <Container style={areaStyle}>
+ <Grid container spacing={5}>
+ <Grid item xs={3}>
+ <img
+ src={materiais}
+ alt="aba materiais"
+ height="165"
+ style={{ float: "right" }}
+ />
+ </Grid>
+ <Grid item xs={9}>
+ <p style={{ textAlign: "justify", color: "#fff" }}>
+ Nesta área, você acessa livremente materiais completos de
+ formação, como cursos já oferecidos pelo MEC e seus
+ parceiros. São conteúdos elaborados por equipes
+ multidisciplinares e de autoria de pesquisadores e
+ educadores renomados nas áreas.
+ </p>
+ </Grid>
+ </Grid>
+ </Container>
+ </div>
+ <Container style={{ padding: "20px" }}>
+ <p
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #e81f4f",
+ color: "#e81f4f"
+ }}
+ >
+ Materiais mais recentes{" "}
+ </p>
- <Carousel style={{padding: "20px"}}showThumbs={false} infiniteLoop={true} showStatus={false}>
- <Row>
+ <Carousel
+ style={{ padding: "20px" }}
+ showThumbs={false}
+ infiniteLoop={true}
+ showStatus={false}
+ >
+ <Row>
<Col md={3}>
<MaterialCard name="oioi" />
</Col>
@@ -217,40 +285,57 @@ class SubPages extends Component{
<Col md={3}>
<MaterialCard name="oioi" />
</Col>
- </Row>
- </Carousel>
- </Container>
- </React.Fragment>
- );
- case "Colecoes":
- return (
- <React.Fragment>
- <div style={{backgroundColor: "#673ab7"}}>
+ </Row>
+ </Carousel>
+ </Container>
+ </React.Fragment>
+ );
+ case "Colecoes":
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#673ab7" }}>
<Container style={areaStyle}>
- <img src={colecoes} alt="aba coleções" height="100" style={{float: "left"}}/>
- <p>Nesta área, você tem acesso às coleções criadas e organizadas
- pelos usuários da plataforma. É mais uma possibilidade de buscar
- recursos educacionais para sua aula!</p>
+ <Grid container spacing={5}>
+ <Grid item xs={3}>
+ <img
+ src={colecoes}
+ alt="aba coleções"
+ width="180"
+ style={{ float: "right" }}
+ />
+ </Grid>
+ <Grid item xs={9}>
+ <p style={{ textAlign: "justify", color: "#fff" }}>
+ Nesta área, você tem acesso às coleções criadas e
+ organizadas pelos usuários da plataforma. É mais uma
+ possibilidade de buscar recursos educacionais para sua
+ aula!
+ </p>
+ </Grid>
+ </Grid>
</Container>
</div>
- <Container style={{padding:"20px"}}>
- <p style={{paddingBottom:"5px", borderBottom: "1px solid #673ab7", color: "#673ab7"}}>
- Coleções mais recentes </p>
- <ReqCollections/>
+ <Container style={{ padding: "20px" }}>
+ <p
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #673ab7",
+ color: "#673ab7"
+ }}
+ >
+ Coleções mais recentes{" "}
+ </p>
+ <ReqCollections />
</Container>
- </React.Fragment>
- );
- default:
- return null
+ </React.Fragment>
+ );
+ default:
+ return null;
}
}
- render(){
- return(
- <div>
- {this.areaRender()}
- </div>
- );
-}
+ render() {
+ return <div>{this.areaRender()}</div>;
+ }
}
export default SubPages;
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index 9bd68cf418050c0bb5641150a21278da22c45a56..e5cc2981d7e31e78fc002e5bf9943672b0a1e15c 100644
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -18,8 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { Component, useState, useEffect } from 'react';
import styled from 'styled-components';
-import Banner1 from '../img/banner-sobre.jpg';
-import { TextField } from '@material-ui/core';
import FormInput from "../Components/FormInput.js"
import axios from 'axios'
import {apiUrl} from '../env';
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 1b1a64aac071528700c2bc26c3dc3b19da5a472c..334b5b04259179b7ae5191f0afffddf8c7e180e1 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -16,64 +16,55 @@ 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 styled from 'styled-components'
-import TextField from '@material-ui/core/TextField';
-
+import React from "react";
+import { makeStyles } from "@material-ui/styles";
+import styled from "styled-components";
+import TextField from "@material-ui/core/TextField";
const StyledTextField = styled(TextField)`
- max-width: 100%;
- font-size : 15px;
- font-weight : lighter;
- color : inherit;
- width : 100% !important;
- full-width : 100% !important;
-`
+ max-width: 100%;
+ font-size: 15px;
+ font-weight: lighter;
+ color: inherit;
+ width: 100% !important;
+ full-width: 100% !important;
+`;
const useStyles = makeStyles(theme => ({
container: {
- display: 'flex',
- flexWrap: 'wrap',
- padding: '2px',
+ display: "flex",
+ flexWrap: "wrap",
+ padding: "2px"
},
textField: {
-
- maxWidth: '100%',
- fontSize : '15px',
- fontWeight : 'lighter',
- color : '#00bcd4',
- width : '100%',
- },
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "inherit",
+ width: "100%"
+ }
}));
export default function FormInput(props) {
const classes = useStyles();
return (
-
- <StyledTextField
- id="standard-basic"
- label={props.placeholder}
- margin="normal"
- id = {props.name}
- name = {props.name}
- type = {props.inputType}
- value = {props.value}
- onChange = {props.handleChange}
- helperText = {props.help}
- rows = {props.rows}
- error = {props.error}
- rowsMax = {props.rowsMax}
- InputProps={{className: classes.input}}
- required = {props.required}
- error = {props.error}
- helperText ={props.help}
- style={{width:"100%"}}
- mask={props.mask}
- multiline={props.multi}
- rows={props.rows}
- rowsMax={props.rowMax}
- />
+ <StyledTextField
+ id="standard-basic"
+ label={props.placeholder}
+ margin="normal"
+ id={props.name}
+ name={props.name}
+ type={props.inputType}
+ value={props.value}
+ onChange={props.handleChange}
+ helperText={props.help}
+ rows={props.rows}
+ error={props.error}
+ rowsMax={props.rowsMax}
+ InputProps={{ className: classes.input }}
+ style={{ width: "100%" }}
+ multiline={props.multi}
+ />
);
}
diff --git a/src/Components/HelpCenter/Cards/CardEncontrando.js b/src/Components/HelpCenter/Cards/CardEncontrando.js
index 1de399ab8bea5e76bb6a48622bff0a7f9954b1d1..f1c2db1bc0ab81db242f04baf4facc0bc40425b2 100644
--- a/src/Components/HelpCenter/Cards/CardEncontrando.js
+++ b/src/Components/HelpCenter/Cards/CardEncontrando.js
@@ -16,42 +16,57 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import EncontrandoRecurso from '../../../img/ajuda/Encontrando_recursos.png';
-
-import { Link } from 'react-router-dom';
+import React from "react";
+import styled from "styled-components";
+import EncontrandoRecurso from "../../../img/ajuda/Encontrando_recursos.png";
+import { Link } from "react-router-dom";
export default function CardEncontrando(props) {
- return(
+ return (
<CardAjuda>
<div className="card">
<img src={EncontrandoRecurso} alt="" />
<h3>Encontrando Recursos</h3>
- <hr/>
- <Link to={{
- pathname : 'encontrando-recurso',
- state : {value : '0'}
- }}>Como fazer uma busca?</Link>
- <br/>
- <Link to={{
- pathname : 'encontrando-recurso',
- state : {value : '1'}
- }}>Como filtrar os resultados?</Link>
+ <hr />
+ <Link
+ to={{
+ pathname: "encontrando-recurso",
+ state: { value: "0" }
+ }}
+ >
+ Como fazer uma busca?
+ </Link>
+ <br />
+ <Link
+ to={{
+ pathname: "encontrando-recurso",
+ state: { value: "1" }
+ }}
+ >
+ Como filtrar os resultados?
+ </Link>
<a></a>
- <br/>
- <Link to={{
- pathname : 'encontrando-recurso',
- state : {value : '2'}
- }}>Como os recursos são ranqueados?</Link>
- <br/>
+ <br />
+ <Link
+ to={{
+ pathname: "encontrando-recurso",
+ state: { value: "2" }
+ }}
+ >
+ Como os recursos são ranqueados?
+ </Link>
+ <br />
</div>
<div className="card-rodape">
- <Link to={{
- pathname : 'encontrando-recurso',
- state : {value : '0'}
- }}>VER MAIS</Link>
+ <Link
+ to={{
+ pathname: "encontrando-recurso",
+ state: { value: "0" }
+ }}
+ >
+ VER MAIS
+ </Link>
</div>
</CardAjuda>
);
@@ -60,7 +75,7 @@ export default function CardEncontrando(props) {
const CardAjuda = styled.div`
height: 360px;
- margin-bottom: 20px
+ margin-bottom: 20px;
.card {
@@ -72,7 +87,7 @@ const CardAjuda = styled.div`
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
h3 {
- font-size: 24px;
+ font-size: 23px;
font-weight: 400;
color: #666;
margin-top: 20px;
@@ -138,4 +153,4 @@ const CardAjuda = styled.div`
}
-`
\ No newline at end of file
+`;
diff --git a/src/Components/HelpCenter/Cards/CardGerenciando.js b/src/Components/HelpCenter/Cards/CardGerenciando.js
index 8cf2a1882e2075073869b2dfa27b58ec380136d9..3cc9506ab3f75de0f0ee1d8298fa714e6a07f6c4 100644
--- a/src/Components/HelpCenter/Cards/CardGerenciando.js
+++ b/src/Components/HelpCenter/Cards/CardGerenciando.js
@@ -16,51 +16,74 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import GerenciandoConta from '../../../img/ajuda/Gerenciando_a_conta.png';
-
-import { Link } from 'react-router-dom';
+import React from "react";
+import styled from "styled-components";
+import GerenciandoConta from "../../../img/ajuda/Gerenciando_a_conta.png";
+import { Link } from "react-router-dom";
export default function CardGerenciando(props) {
- return(
+ return (
<CardAjuda>
<div className="card">
<img src={GerenciandoConta} alt="" />
<h3>Gerenciando Conta</h3>
- <hr/>
- <Link to={{
- pathname : 'gerenciando-conta',
- state : {value : '0'}
- }}>Por que me cadastrar?</Link>
- <br/>
- <Link to={{
- pathname : 'gerenciando-conta',
- state : {value : '1'}
- }}>Como fazer meu cadastro?</Link>
- <br/>
- <Link to={{
- pathname : 'gerenciando-conta',
- state : {value : '2'}
- }}>Como alterar minha senha?</Link>
- <br/>
- <Link to={{
- pathname : 'gerenciando-conta',
- state : {value : '3'}
- }}>Como acessar a conta?</Link>
- <br/>
- <Link to={{
- pathname : 'gerenciando-conta',
- state : {value : '4'}
- }}>Esqueci minha senha. O que fazer?</Link>
- <br/>
+ <hr />
+ <Link
+ to={{
+ pathname: "gerenciando-conta",
+ state: { value: "0" }
+ }}
+ >
+ Por que me cadastrar?
+ </Link>
+ <br />
+ <Link
+ to={{
+ pathname: "gerenciando-conta",
+ state: { value: "1" }
+ }}
+ >
+ Como fazer meu cadastro?
+ </Link>
+ <br />
+ <Link
+ to={{
+ pathname: "gerenciando-conta",
+ state: { value: "2" }
+ }}
+ >
+ Como alterar minha senha?
+ </Link>
+ <br />
+ <Link
+ to={{
+ pathname: "gerenciando-conta",
+ state: { value: "3" }
+ }}
+ >
+ Como acessar a conta?
+ </Link>
+ <br />
+ <Link
+ to={{
+ pathname: "gerenciando-conta",
+ state: { value: "4" }
+ }}
+ >
+ Esqueci minha senha. O que fazer?
+ </Link>
+ <br />
</div>
<div className="card-rodape">
- <Link to={{
- pathname : 'gerenciando-conta',
- state : {value : '0'}
- }}>VER MAIS</Link>
+ <Link
+ to={{
+ pathname: "gerenciando-conta",
+ state: { value: "0" }
+ }}
+ >
+ VER MAIS
+ </Link>
</div>
</CardAjuda>
);
@@ -69,7 +92,7 @@ export default function CardGerenciando(props) {
const CardAjuda = styled.div`
height: 360px;
- margin-bottom: 20px
+ margin-bottom: 20px;
.card {
@@ -81,7 +104,7 @@ const CardAjuda = styled.div`
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
h3 {
- font-size: 24px;
+ font-size: 23px;
font-weight: 400;
color: #666;
margin-top: 20px;
@@ -147,4 +170,4 @@ const CardAjuda = styled.div`
}
-`
\ No newline at end of file
+`;
diff --git a/src/Components/HelpCenter/Cards/CardParticipando.js b/src/Components/HelpCenter/Cards/CardParticipando.js
index 955fb287e9605ce736a831622dacfc1bd10da204..9dfdbf1a8c0553adc760fc14bf3fd27dcd76f1d0 100644
--- a/src/Components/HelpCenter/Cards/CardParticipando.js
+++ b/src/Components/HelpCenter/Cards/CardParticipando.js
@@ -16,36 +16,47 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import ParticipandoRede from '../../../img/ajuda/Participando_da_rede.png';
-
-import { Link } from 'react-router-dom';
+import React from "react";
+import styled from "styled-components";
+import ParticipandoRede from "../../../img/ajuda/Participando_da_rede.png";
+import { Link } from "react-router-dom";
export default function CardParticipando(props) {
- return(
+ return (
<CardAjuda>
<div className="card">
<img src={ParticipandoRede} alt="" />
<h3>Participando da Rede</h3>
- <hr/>
- <Link to={{
- pathname : 'participando-da-rede',
- state : {value : '0'}
- }}>Comentanto os recursos</Link>
- <br/>
- <Link to={{
- pathname : 'participando-da-rede',
- state : {value : '1'}
- }}>Como relatar uma experiência ou avaliar um recurso?</Link>
- <br/>
+ <hr />
+ <Link
+ to={{
+ pathname: "participando-da-rede",
+ state: { value: "0" }
+ }}
+ >
+ Comentanto os recursos
+ </Link>
+ <br />
+ <Link
+ to={{
+ pathname: "participando-da-rede",
+ state: { value: "1" }
+ }}
+ >
+ Como relatar uma experiência ou avaliar um recurso?
+ </Link>
+ <br />
</div>
<div className="card-rodape">
- <Link to={{
- pathname : 'participando-da-rede',
- state : {value : '0'}
- }}>VER MAIS</Link>
+ <Link
+ to={{
+ pathname: "participando-da-rede",
+ state: { value: "0" }
+ }}
+ >
+ VER MAIS
+ </Link>
</div>
</CardAjuda>
);
@@ -54,7 +65,7 @@ export default function CardParticipando(props) {
const CardAjuda = styled.div`
height: 360px;
- margin-bottom: 20px
+ margin-bottom: 20px;
.card {
@@ -66,7 +77,7 @@ const CardAjuda = styled.div`
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
h3 {
- font-size: 24px;
+ font-size: 23px;
font-weight: 400;
color: #666;
margin-top: 20px;
@@ -132,4 +143,4 @@ const CardAjuda = styled.div`
}
-`
\ No newline at end of file
+`;
diff --git a/src/Components/HelpCenter/Cards/CardPublicando.js b/src/Components/HelpCenter/Cards/CardPublicando.js
index 81b4086ca87c9916ff54f87283ed8b11d8337ea6..673c7d153a5ae2fe6e75f0fd21b3739d17a5cba3 100644
--- a/src/Components/HelpCenter/Cards/CardPublicando.js
+++ b/src/Components/HelpCenter/Cards/CardPublicando.js
@@ -16,49 +16,64 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import PublicandoRecursos from '../../../img/ajuda/Publicando_recursos.png';
-import { Link } from 'react-router-dom';
-
+import React from "react";
+import styled from "styled-components";
+import PublicandoRecursos from "../../../img/ajuda/Publicando_recursos.png";
+import { Link } from "react-router-dom";
export default function CardPublicando(props) {
-return(
- <CardAjuda>
- <div className="card">
- <img src={PublicandoRecursos} alt="" />
- <h3>Publicando Recursos</h3>
- <hr/>
- <Link to={{
- pathname : 'publicando-recurso',
- state : {value : '0'}
- }}>Por que enviar um recurso?</Link>
- <br/>
- <Link to={{
- pathname : 'publicando-recurso',
- state : {value : '1'}
- }}>Como publicar um recurso?</Link>
- <br/>
- <Link to={{
- pathname : 'publicando-recurso',
- state : {value : '2'}
- }}>Quais tipos de recurso e formatos a plataforma aceita?</Link>
- <br/>
- </div>
- <div className="card-rodape">
- <Link to={{
- pathname : 'publicando-recurso',
- state : {value : '0'}
- }}>VER MAIS</Link>
- </div>
- </CardAjuda>
-);
+ return (
+ <CardAjuda>
+ <div className="card">
+ <img src={PublicandoRecursos} alt="" />
+ <h3>Publicando Recursos</h3>
+ <hr />
+ <Link
+ to={{
+ pathname: "publicando-recurso",
+ state: { value: "0" }
+ }}
+ >
+ Por que enviar um recurso?
+ </Link>
+ <br />
+ <Link
+ to={{
+ pathname: "publicando-recurso",
+ state: { value: "1" }
+ }}
+ >
+ Como publicar um recurso?
+ </Link>
+ <br />
+ <Link
+ to={{
+ pathname: "publicando-recurso",
+ state: { value: "2" }
+ }}
+ >
+ Quais tipos de recurso e formatos a plataforma aceita?
+ </Link>
+ <br />
+ </div>
+ <div className="card-rodape">
+ <Link
+ to={{
+ pathname: "publicando-recurso",
+ state: { value: "0" }
+ }}
+ >
+ VER MAIS
+ </Link>
+ </div>
+ </CardAjuda>
+ );
}
const CardAjuda = styled.div`
height: 360px;
-margin-bottom: 20px
+margin-bottom: 20px;
.card {
@@ -70,7 +85,7 @@ margin-bottom: 20px
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
h3 {
- font-size: 24px;
+ font-size: 23px;
font-weight: 400;
color: #666;
margin-top: 20px;
@@ -136,4 +151,4 @@ margin-bottom: 20px
}
-`
\ No newline at end of file
+`;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/How.js b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
index f98d20b989d6695dd10466da16adcf1320cfe8df..930476c1bb6525271e503dc7d40e508b15836d51 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/How.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
@@ -16,31 +16,29 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-
-
-
-
+import React from "react";
+import styled from "styled-components";
export default function How(props) {
- return(
+ return (
<Card>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+ rel="stylesheet"
+ />
+ <div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
- <div style ={{width:"640px", height: "360px" }}>
- <iframe width="640"
- height="360"
- src="https://www.youtube.com/embed/CRW5h2pHugM"
- frameborder="0"
- allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
- allowfullscreen
- >
-
- </iframe>
- </div>
+ <div style={{ width: "640px", height: "360px" }}>
+ <iframe
+ width="640"
+ height="360"
+ src="https://www.youtube.com/embed/CRW5h2pHugM"
+ frameborder="0"
+ allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+ allowfullscreen
+ ></iframe>
+ </div>
</Card>
);
}
@@ -48,7 +46,7 @@ export default function How(props) {
const Card = styled.div`
margin-bottom: 5px;
background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 30px;
color: #666;
span {
@@ -64,8 +62,6 @@ const Card = styled.div`
}
}
-
-
ul {
padding-left: 0 !important;
margin-top: 0;
@@ -82,7 +78,4 @@ const Card = styled.div`
margin: 0 0 10px;
font-size: 15px;
}
-
-
-
-`
\ No newline at end of file
+`;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
index e805416f047205c4443861420310c045530df224..9da4c8bddb9a5659b3755d965572926698d3aea7 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
@@ -16,60 +16,118 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-
-
+import React from "react";
+import styled from "styled-components";
const softwares = [
- { recursos : "Google Chrome" , texto : "Navegador web." , link : "https://ninite.com/chrome/" },
- { recursos : "Java" , texto : "Necessário para a execução de sites que utilizem sua linguagem de programação java." , link : "http://javadl.oracle.com/webapps/download/AutoDL?BundleId=225355_090f390dda5b47b9b721c7dfaa008135NINITE: https://ninite.com/java8/" },
- { recursos : "Adobe Flash Player" , texto : "plugin que reproduz multimÃdia na internet de forma mais eficiente." , link : "https://get.adobe.com/br/flashplayer/download/?installer=FP_27_for_Opera_and_Chromium_-_PPAPI&os=Windows%207&browser_type=KHTML&browser_dist=Chrome&dualoffer=false&mdualoffer=true&stype=6703&d=McAfee_Security_Scan_Plus&d=McAfee_Safe_Connect" },
- { recursos : "Adobe Air" , texto : "Plugin para execução de códigos para aplicações nativas e jogos para computadores desktop com Windows e Mac OS bem como dispositivos iOS e Android." , link : "https://ninite.com/air/" },
- { recursos : "Net Framework" , texto : "O .NET Framework é um ambiente de execução de tempo de execução que gerencia os aplicativos destinados ao .NET Framework." , link : "https://ninite.com/.net4.7/" },
- { recursos : "Acrobat Reader DC" , texto : "Abrir documento no formato PDF" , link : "https://ninite.com/foxit/" },
- { recursos : "Video LAN" , texto : "REPRODUTOR DE VÃDEO." , link : "http://download.winzip.com/gl/nkln/winzip21_downwz.exe" },
- { recursos : "Winzip" , texto : "WinZip: abrir arquivos compactados." , link : "http://download.winzip.com/gl/nkln/winzip21_downwz.exe" },
- { recursos : "K-Lite Codec" , texto : "Software que ajuda na reprodução de arquivos multimÃdia no computador." , link : "https://ninite.com/libreoffice/" },
- { recursos : "Libre Office" , texto : "Software gratuito para visualização e edição de documentos, planilhas e apresentações." , link : "https://ninite.com/libreoffice/" },
- { recursos : "Swiff Player" , texto : "reprodutor de mÃdia do formato swf" , link : "https://www.w3schools.com/html/" }
-
-]
+ {
+ recursos: "Google Chrome",
+ texto: "Navegador web.",
+ link: "https://ninite.com/chrome/"
+ },
+ {
+ recursos: "Java",
+ texto:
+ "Necessário para a execução de sites que utilizem sua linguagem de programação java.",
+ link:
+ "http://javadl.oracle.com/webapps/download/AutoDL?BundleId=225355_090f390dda5b47b9b721c7dfaa008135NINITE: https://ninite.com/java8/"
+ },
+ {
+ recursos: "Adobe Flash Player",
+ texto:
+ "plugin que reproduz multimÃdia na internet de forma mais eficiente.",
+ link:
+ "https://get.adobe.com/br/flashplayer/download/?installer=FP_27_for_Opera_and_Chromium_-_PPAPI&os=Windows%207&browser_type=KHTML&browser_dist=Chrome&dualoffer=false&mdualoffer=true&stype=6703&d=McAfee_Security_Scan_Plus&d=McAfee_Safe_Connect"
+ },
+ {
+ recursos: "Adobe Air",
+ texto:
+ "Plugin para execução de códigos para aplicações nativas e jogos para computadores desktop com Windows e Mac OS bem como dispositivos iOS e Android.",
+ link: "https://ninite.com/air/"
+ },
+ {
+ recursos: "Net Framework",
+ texto:
+ "O .NET Framework é um ambiente de execução de tempo de execução que gerencia os aplicativos destinados ao .NET Framework.",
+ link: "https://ninite.com/.net4.7/"
+ },
+ {
+ recursos: "Acrobat Reader DC",
+ texto: "Abrir documento no formato PDF",
+ link: "https://ninite.com/foxit/"
+ },
+ {
+ recursos: "Video LAN",
+ texto: "REPRODUTOR DE VÃDEO.",
+ link: "http://download.winzip.com/gl/nkln/winzip21_downwz.exe"
+ },
+ {
+ recursos: "Winzip",
+ texto: "WinZip: abrir arquivos compactados.",
+ link: "http://download.winzip.com/gl/nkln/winzip21_downwz.exe"
+ },
+ {
+ recursos: "K-Lite Codec",
+ texto:
+ "Software que ajuda na reprodução de arquivos multimÃdia no computador.",
+ link: "https://ninite.com/libreoffice/"
+ },
+ {
+ recursos: "Libre Office",
+ texto:
+ "Software gratuito para visualização e edição de documentos, planilhas e apresentações.",
+ link: "https://ninite.com/libreoffice/"
+ },
+ {
+ recursos: "Swiff Player",
+ texto: "reprodutor de mÃdia do formato swf",
+ link: "https://www.w3schools.com/html/"
+ }
+];
export default function Software(props) {
- return(
+ return (
<Card>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+ rel="stylesheet"
+ />
+ <div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
<p>
- Todo e qualquer recurso digital precisa de um programa ou aplicativo para
- ser visualizado. Por exemplo, grande parte dos recursos são arquivos
- compactados que servem para ocupar menos espaço de armazenamento, recebendo
- a extensão .zip ou .rar, para utilizá-lo, você precisa ter instalado um
- descompactador de arquivos, como o <a href="http://download.winzip.com/gl/nkln/winzip21_downwz.exe">Winzip</a> ou <a href="https://ninite.com/winrar/">Winrar</a>.
+ Todo e qualquer recurso digital precisa de um programa ou aplicativo
+ para ser visualizado. Por exemplo, grande parte dos recursos são
+ arquivos compactados que servem para ocupar menos espaço de
+ armazenamento, recebendo a extensão .zip ou .rar, para utilizá-lo, você
+ precisa ter instalado um descompactador de arquivos, como o{" "}
+ <a href="http://download.winzip.com/gl/nkln/winzip21_downwz.exe">
+ Winzip
+ </a>{" "}
+ ou <a href="https://ninite.com/winrar/">Winrar</a>.
</p>
<p>
- Alguns destes programas são bem comuns, e provavelmente, você já deve ter
- instalado em seu computador, como processador de texto para formato .docx,
- o Microsoft Word (para Sistema Operacional Windows) ou LibreOffice
- (nas distribuições Linux). Porém, existem outros programas que não são tão
- comuns assim, mas que são fáceis de instalar em seu computador. A seguir,
- vamos apresentar umas informações que podem guiar a utilização dos recursos
- em suas aulas.
+ Alguns destes programas são bem comuns, e provavelmente, você já deve
+ ter instalado em seu computador, como processador de texto para formato
+ .docx, o Microsoft Word (para Sistema Operacional Windows) ou
+ LibreOffice (nas distribuições Linux). Porém, existem outros programas
+ que não são tão comuns assim, mas que são fáceis de instalar em seu
+ computador. A seguir, vamos apresentar umas informações que podem guiar
+ a utilização dos recursos em suas aulas.
</p>
<p>
- Você precisa ficar atento as siglas que terminação do recurso que dizem
- de qual formato ele é. DaÃ, qual programa pode ser utilizado para abrir
- o Recursos Educacionais Digitais em seu computador? Fizemos uma lista de
+ Você precisa ficar atento as siglas que terminação do recurso que dizem
+ de qual formato ele é. DaÃ, qual programa pode ser utilizado para abrir
+ o Recursos Educacionais Digitais em seu computador? Fizemos uma lista de
softwares que você poderá precisar de acordo com o tipo de recurso:
</p>
<ul>
- {softwares.map((item)=>
- <li><a href={item.link} >{item.recursos}</a> - {item.texto} <br/><br/> </li>
- )}
-
+ {softwares.map(item => (
+ <li>
+ <a href={item.link}>{item.recursos}</a> - {item.texto} <br />
+ <br />{" "}
+ </li>
+ ))}
</ul>
</Card>
);
@@ -78,7 +136,7 @@ export default function Software(props) {
const Card = styled.div`
margin-bottom: 5px;
background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 30px;
color: #666;
span {
@@ -94,8 +152,6 @@ const Card = styled.div`
}
}
-
-
ul {
padding-left: 0 !important;
margin-top: 0;
@@ -112,7 +168,4 @@ const Card = styled.div`
margin: 0 0 10px;
font-size: 15px;
}
-
-
-
-`
\ No newline at end of file
+`;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
index 579536965240c02c7a73d7bd1343795770d91162..1d30662b8f79b6741a0708cd906fb57c38d3547e 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
@@ -16,42 +16,42 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-
-
+import React from "react";
+import styled from "styled-components";
const tipos = [
- {recursos:"- áudios;"},
- {recursos:"- imagens;"},
- {recursos:"- mapas;"},
- {recursos:"- softwares educacionais"},
- {recursos:"- textos;"},
- {recursos:"- vÃdeos"}
-]
+ { recursos: "- áudios;" },
+ { recursos: "- imagens;" },
+ { recursos: "- mapas;" },
+ { recursos: "- softwares educacionais" },
+ { recursos: "- textos;" },
+ { recursos: "- vÃdeos" }
+];
export default function Types(props) {
- return(
+ return (
<Card>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+ rel="stylesheet"
+ />
+ <div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
<p>
- A plataforma integra os Recursos Educacionais Digitais dos principais portais abertos. Conheça alguns deles:
+ A plataforma integra os Recursos Educacionais Digitais dos principais
+ portais abertos. Conheça alguns deles:
</p>
<ul>
- {tipos.map((item)=>
+ {tipos.map(item => (
<li>{item.recursos}</li>
-
- )}
-
+ ))}
</ul>
<p>
- E ainda, nesta plataforma são organizados pelos diferentes componentes curriculares (matemática, artes, etc.) e
- etapas de ensino (Ensino Médio, Fundamental, Anos Iniciais, etc.) onde podem ser aplicados.
+ E ainda, nesta plataforma são organizados pelos diferentes componentes
+ curriculares (matemática, artes, etc.) e etapas de ensino (Ensino Médio,
+ Fundamental, Anos Iniciais, etc.) onde podem ser aplicados.
</p>
-
</Card>
);
}
@@ -59,7 +59,7 @@ export default function Types(props) {
const Card = styled.div`
margin-bottom: 5px;
background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 30px;
color: #666;
span {
@@ -67,8 +67,6 @@ const Card = styled.div`
font-weight: bold;
}
-
-
ul {
padding-left: 0 !important;
margin-top: 0;
@@ -85,7 +83,4 @@ const Card = styled.div`
margin: 0 0 10px;
font-size: 15px;
}
-
-
-
-`
\ No newline at end of file
+`;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
index 644afb9807b8519ad91f35bab7397a923ce77392..4696bce01ce19794d4adf4f827f263e65f2bc488 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
@@ -16,45 +16,44 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-
-
-
+import React from "react";
+import styled from "styled-components";
export default function Understand(props) {
- return(
+ return (
<Card>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+ rel="stylesheet"
+ />
+ <div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
<p>
<strong>Ãrea de Recursos Educacionais Digitais</strong>
- <br/>
- Recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel. Uma licença
- que permite que o recurso possa ser utilizado, alterado e manipulado sem
- restrições. Adicionalmente, um recurso aberto pode utilizar um formato
- aberto, um formato de arquivo que permite a fácil edição por terceiros.
- Nenhum controle (como cadastro e senha) deve existir para acesso a recursos abertos.
+ <br />
+ Recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel. Uma
+ licença que permite que o recurso possa ser utilizado, alterado e
+ manipulado sem restrições. Adicionalmente, um recurso aberto pode
+ utilizar um formato aberto, um formato de arquivo que permite a fácil
+ edição por terceiros. Nenhum controle (como cadastro e senha) deve
+ existir para acesso a recursos abertos.
</p>
<p>
<strong>Ãrea de Materiais de Formação</strong>
- <br/>
- Nesta área, você acessa livremente materiais completos de formação, como
- cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados
- por equipes multidisciplinares e de autoria de pesquisadores e educadores
- renomados nas áreas.
+ <br />
+ Nesta área, você acessa livremente materiais completos de formação, como
+ cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados
+ por equipes multidisciplinares e de autoria de pesquisadores e
+ educadores renomados nas áreas.
</p>
<p>
<strong>Ãrea de Coleções de Usuários</strong>
- <br/>
- Nesta área, você tem acesso às coleções criadas e organizadas pelos
- usuários da plataforma. É mais uma possibilidade de buscar recursos
+ <br />
+ Nesta área, você tem acesso às coleções criadas e organizadas pelos
+ usuários da plataforma. É mais uma possibilidade de buscar recursos
educacionais para sua aula!
</p>
-
-
</Card>
);
}
@@ -62,7 +61,7 @@ export default function Understand(props) {
const Card = styled.div`
margin-bottom: 5px;
background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 30px;
color: #666;
span {
@@ -74,7 +73,4 @@ const Card = styled.div`
margin: 0 0 10px;
font-size: 15px;
}
-
-
-
-`
\ No newline at end of file
+`;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/What.js b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
index b9d143c7b8ea0aea81d8d174025410213a88cf39..8bab746bc3418efd516b158125a50a366cabfa0d 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/What.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
@@ -16,67 +16,76 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-
-
-
+import React from "react";
+import styled from "styled-components";
export default function What(props) {
- return(
+ return (
<Card>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+ rel="stylesheet"
+ />
+ <div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
- <p>Bem-vindo(a) à Plataforma MEC, uma iniciativa do Ministério da Educação!</p>
<p>
- A Plataforma MEC é parte do processo de implementação do Compromisso 6
- do 3º Plano de Ação da Parceria Governo Aberto (OGP-Brasil), que tem por
- objetivo “incorporar na polÃtica educacional o potencial da cultura digital,
- de modo a fomentar a autonomia para uso, reuso e adaptação de recursos
- educacionais digitais, valorizando a pluralidade e a diversidade da educação
- brasileiraâ€. O documento completo pode ser consultado <a href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" >aqui</a>.
- </p>
+ Bem-vindo(a) à Plataforma MEC, uma iniciativa do Ministério da Educação!
+ </p>
+ <p>
+ A Plataforma MEC é parte do processo de implementação do Compromisso 6
+ do 3º Plano de Ação da Parceria Governo Aberto (OGP-Brasil), que tem por
+ objetivo “incorporar na polÃtica educacional o potencial da cultura
+ digital, de modo a fomentar a autonomia para uso, reuso e adaptação de
+ recursos educacionais digitais, valorizando a pluralidade e a
+ diversidade da educação brasileiraâ€. O documento completo pode ser
+ consultado{" "}
+ <a href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto">
+ aqui
+ </a>
+ .
+ </p>
<p>
<strong>Abertos</strong>
- <br/>
- Recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel. Uma licença
- que permite que o recurso possa ser utilizado, alterado e manipulado sem
- restrições. Adicionalmente, um recurso aberto pode utilizar um formato
- aberto, um formato de arquivo que permite a fácil edição por terceiros.
- Nenhum controle (como cadastro e senha) deve existir para acesso a recursos abertos.
+ <br />
+ Recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel. Uma
+ licença que permite que o recurso possa ser utilizado, alterado e
+ manipulado sem restrições. Adicionalmente, um recurso aberto pode
+ utilizar um formato aberto, um formato de arquivo que permite a fácil
+ edição por terceiros. Nenhum controle (como cadastro e senha) deve
+ existir para acesso a recursos abertos.
</p>
<p>
<strong>Grátis</strong>
- <br/>
- Recursos para os quais os usuários não têm que fazer qualquer desembolso
- monetário, mas que exibem certas restrições: usualmente não podem ser
- baixados ou alterados. E, muitas vezes, como os recursos fechados, é
+ <br />
+ Recursos para os quais os usuários não têm que fazer qualquer desembolso
+ monetário, mas que exibem certas restrições: usualmente não podem ser
+ baixados ou alterados. E, muitas vezes, como os recursos fechados, é
necessário cadastro ou troca de informações pessoais para seu uso.
</p>
<p>
<strong>Fechados</strong>
- <br/>
- Recursos que criam restrições ao seu acesso, uso ou reuso. Como exemplo,
- podemos mencionar recursos que só são acessÃveis mediante cadastro, que
- são pagos, ou que têm licenças restritivas (como “todos os direitos
+ <br />
+ Recursos que criam restrições ao seu acesso, uso ou reuso. Como exemplo,
+ podemos mencionar recursos que só são acessÃveis mediante cadastro, que
+ são pagos, ou que têm licenças restritivas (como “todos os direitos
reservadosâ€, o sÃmbolo ©).
</p>
<p>
- O Plano Nacional de Educação (2014-2024) enfatiza, nas metas 5 e 7, a
- importância dos recursos educacionais abertos para fomentar a qualidade da
- educação básica.
+ O Plano Nacional de Educação (2014-2024) enfatiza, nas metas 5 e 7, a
+ importância dos recursos educacionais abertos para fomentar a qualidade
+ da educação básica.
</p>
<p>
- A Resolução CNE/CES nº 1, de 11 de março de 2016, também enfatiza a importância
- dos recursos educacionais abertos para as instituições de educação superior
- e para as atividades de educação a distância, promovendo “a criação,
- disponibilização, uso e gestão de tecnologias e recursos educacionais abertos,
- por meio de licenças livres, que facilitem o uso, a revisão, a tradução, a
- adaptação, a recombinação, a distribuição e o compartilhamento gratuito pelo
- cidadão, resguardados os direitos autorais pertinentes.â€
+ A Resolução CNE/CES nº 1, de 11 de março de 2016, também enfatiza a
+ importância dos recursos educacionais abertos para as instituições de
+ educação superior e para as atividades de educação a distância,
+ promovendo “a criação, disponibilização, uso e gestão de tecnologias e
+ recursos educacionais abertos, por meio de licenças livres, que
+ facilitem o uso, a revisão, a tradução, a adaptação, a recombinação, a
+ distribuição e o compartilhamento gratuito pelo cidadão, resguardados os
+ direitos autorais pertinentes.â€
</p>
</Card>
);
@@ -85,7 +94,7 @@ export default function What(props) {
const Card = styled.div`
margin-bottom: 5px;
background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 30px;
color: #666;
span {
@@ -105,7 +114,4 @@ const Card = styled.div`
margin: 0 0 10px;
font-size: 15px;
}
-
-
-
-`
\ No newline at end of file
+`;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
index 5c29e884bca59f0998009f46bf7db48020b82f5f..b1fe77ed63697519fb011663dbcce423708ef1c7 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
@@ -16,36 +16,35 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-
-
+import React from "react";
+import styled from "styled-components";
const parcas = [
- {parceiro: "- Portal do Profesor"},
- {parceiro:"- DomÃnio Público;"},
- {parceiro: "- Banco internacional de objetos educacionais;"},
- {parceiro:"- TV Escola;"}
-]
+ { parceiro: "- Portal do Profesor" },
+ { parceiro: "- DomÃnio Público;" },
+ { parceiro: "- Banco internacional de objetos educacionais;" },
+ { parceiro: "- TV Escola;" }
+];
export default function Which(props) {
- return(
+ return (
<Card>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+ rel="stylesheet"
+ />
+ <div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
<p>
- A plataforma integra os Recursos Educacionais Digitais dos principais portais abertos. Conheça alguns deles:
+ A plataforma integra os Recursos Educacionais Digitais dos principais
+ portais abertos. Conheça alguns deles:
</p>
<ul>
- {parcas.map((item)=>
+ {parcas.map(item => (
<li>{item.parceiro}</li>
-
- )}
-
+ ))}
</ul>
-
</Card>
);
}
@@ -53,7 +52,7 @@ export default function Which(props) {
const Card = styled.div`
margin-bottom: 5px;
background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 30px;
color: #666;
span {
@@ -61,8 +60,6 @@ const Card = styled.div`
font-weight: bold;
}
-
-
ul {
padding-left: 0 !important;
margin-top: 0;
@@ -79,7 +76,4 @@ const Card = styled.div`
margin: 0 0 10px;
font-size: 15px;
}
-
-
-
-`
\ No newline at end of file
+`;
diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js
index 481cb111f53f90be585a02fd70806784f05c1e30..2fd0010dc587816ba46d792af53da2d26c480628 100644
--- a/src/Components/ResourceCard.js
+++ b/src/Components/ResourceCard.js
@@ -16,15 +16,15 @@ 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 './CardsAnimation.css';
-import {Container} from 'react-grid-system';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import CardActions from '@material-ui/core/CardActions';
-import IconButton from '@material-ui/core/IconButton';
-import Typography from '@material-ui/core/Typography';
-import FavoriteIcon from '@material-ui/icons/Favorite';
+import React, { Component } from "react";
+import "./CardsAnimation.css";
+import { Container } from "react-grid-system";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardActions from "@material-ui/core/CardActions";
+import IconButton from "@material-ui/core/IconButton";
+import Typography from "@material-ui/core/Typography";
+import FavoriteIcon from "@material-ui/icons/Favorite";
import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg";
import apresentacao from "../img/laranja/APRESENTACAO.jpg";
import aplicativo from "../img/laranja/APP.jpg";
@@ -39,104 +39,152 @@ import outros from "../img/laranja/OUTROS.jpg";
import software from "../img/laranja/SOFTWARE.jpg";
import texto from "../img/laranja/TEXTO.jpg";
import video from "../img/laranja/VIDEO.jpg";
-import Rating from '@material-ui/lab/Rating';
-import StarBorderIcon from '@material-ui/icons/StarBorder';
-import {apiDomain} from '../env';
-import AddIcon from '@material-ui/icons/CreateNewFolder';
-import Options from './CardOptions'
-import Video from '@material-ui/icons/OndemandVideo';
+import Rating from "@material-ui/lab/Rating";
+import StarBorderIcon from "@material-ui/icons/StarBorder";
+import { apiDomain } from "../env";
+import AddIcon from "@material-ui/icons/CreateNewFolder";
+import Options from "./CardOptions";
+import Video from "@material-ui/icons/OndemandVideo";
import noAvatar from "../img/default_profile.png";
-const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
-{label: "Aplicativo" , thumb: aplicativo}, {label: "Ãudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label:"Livro digital", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software Educacional", thumb:software}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "VÃdeo", thumb:video}]
-const slideStyle={
+const types = [
+ { label: "Animação", thumb: animacao },
+ { label: "Apresentação", thumb: apresentacao },
+ { label: "Aplicativo", thumb: aplicativo },
+ { label: "Ãudio", thumb: audio },
+ { label: "Vazio", thumb: vazio },
+ { label: "Imagem", thumb: imagem },
+ { label: "Gráfico", thumb: grafico },
+ { label: "Jogo", thumb: jogo },
+ { label: "Livro", thumb: livro },
+ { label: "Livro digital", thumb: livro },
+ { label: "Mapa", thumb: mapa },
+ { label: "Outros", thumb: outros },
+ { label: "Software Educacional", thumb: software },
+ { label: "Software", thumb: software },
+ { label: "Texto", thumb: texto },
+ { label: "VÃdeo", thumb: video }
+];
+const slideStyle = {
height: "50px",
width: "50px",
backgroundColor: "white",
- borderRadius: "50%",
+ borderRadius: "50%"
};
-const publisherStyle={
+const publisherStyle = {
color: "white",
paddinLeft: "30px",
- fontSize: "15px",
+ fontSize: "15px"
};
class ResourceCard extends Component {
constructor(props) {
super(props);
- this.state={
+ this.state = {
thumbnail: null,
userStyle: "animatiOff",
- userAvatar: null,
+ userAvatar: null
};
-
}
- renderType(type){
- if (!this.state.thumbnail && !this.props.thumbnail ) {
- var aux = types.find(function(element){ return element.label === type});
- this.setState({thumbnail: aux.thumb});
+ renderType(type) {
+ if (!this.state.thumbnail && !this.props.thumbnail) {
+ var aux = types.find(function(element) {
+ return element.label === type;
+ });
+ this.setState({ thumbnail: aux.thumb });
}
- if (!this.state.thumbnail && this.props.thumbnail ) {
- this.setState({thumbnail: apiDomain + this.props.thumbnail});
+ if (!this.state.thumbnail && this.props.thumbnail) {
+ this.setState({ thumbnail: apiDomain + this.props.thumbnail });
}
}
- onHover(){
- this.setState({userStyle: "animatiOn"});
+ onHover() {
+ this.setState({ userStyle: "animatiOn" });
}
- onIddle(){
- this.setState({userStyle: "animatiOff"})
+ onIddle() {
+ this.setState({ userStyle: "animatiOff" });
}
- defAvatar(){
- if (!this.state.userAvatar && (!this.props.avatar.length)){
- this.setState({userAvatar: noAvatar});
+ defAvatar() {
+ if (!this.state.userAvatar && !this.props.avatar.length) {
+ this.setState({ userAvatar: noAvatar });
}
- if (!this.state.userAvatar && (this.props.avatar) ) {
- this.setState({userAvatar:apiDomain+this.props.avatar});
+ if (!this.state.userAvatar && this.props.avatar) {
+ this.setState({ userAvatar: apiDomain + this.props.avatar });
}
}
- render(){
- this.renderType(this.props.type);
- this.defAvatar();
- return (
- <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
- <Container style={{padding:"0px", height:"175px", backgroundColor: "#ff7f00"}}>
- <div className={this.state.userStyle}>
- <img style={slideStyle} src={this.state.userAvatar} alt="Avatar"/>
- <Typography style={publisherStyle}>Enviado por: <br/>{this.props.author}</Typography>
- </div>
- <img src={this.state.thumbnail} style={{height:"100%"}} alt="thumbnail do recurso"/>
- </Container>
- <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
- <Typography variant="body2" color="textSecondary" component="p" style={{height:"45px", overflow: "hidden", fontSize: "0.8em"}}>
- {this.props.name}
- </Typography>
- </CardContent>
- <Container style={{textAlign: "left"}}>
-
- <Rating
- name="customized-empty"
- value={this.props.rating*10}
- precision={0.5}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- />
- </Container>
- <CardActions style={{justifyContent: "space-between", padding: "0px"}}>
- { this.props.type ==="VÃdeo"
- ? <Video style={{color:"#ff7f00"}} />
- : <br/>}
- <IconButton aria-label="Favoritar" size="small">
- <FavoriteIcon />
- </IconButton>
- </CardActions>
- <CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "space-between"}}>
-
- <IconButton aria-label="Guardar" size="small">
- <AddIcon />
- </IconButton>
- <Options/>
- </CardActions>
- </Card>
- );}
- }
+ render() {
+ this.renderType(this.props.type);
+ this.defAvatar();
+ return (
+ <Card
+ onMouseOver={this.onHover.bind(this)}
+ onMouseOut={this.onIddle.bind(this)}
+ >
+ <Container
+ style={{
+ padding: "0px",
+ height: "175px",
+ backgroundColor: "#ff7f00"
+ }}
+ >
+ <div className={this.state.userStyle}>
+ <img style={slideStyle} src={this.state.userAvatar} alt="Avatar" />
+ <Typography style={publisherStyle}>
+ Enviado por: <br />
+ {this.props.author}
+ </Typography>
+ </div>
+ <img
+ src={this.state.thumbnail}
+ style={{ height: "100%" }}
+ alt="thumbnail do recurso"
+ />
+ </Container>
+ <CardContent
+ style={{ height: "60%", textAlign: "left", paddingBottom: "0px" }}
+ >
+ <Typography
+ variant="body2"
+ color="textSecondary"
+ component="p"
+ style={{ height: "45px", overflow: "hidden", fontSize: "0.8em" }}
+ >
+ {this.props.name}
+ </Typography>
+ </CardContent>
+ <Container style={{ textAlign: "left" }}>
+ <Rating
+ name="customized-empty"
+ value={this.props.rating * 10}
+ precision={0.5}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ />
+ </Container>
+ <CardActions
+ style={{ justifyContent: "space-between", padding: "0px" }}
+ >
+ {this.props.type === "VÃdeo" ? (
+ <Video style={{ color: "#ff7f00" }} />
+ ) : (
+ <br />
+ )}
+ <IconButton aria-label="Favoritar" size="small">
+ <FavoriteIcon />
+ </IconButton>
+ </CardActions>
+ <CardActions
+ style={{
+ borderTop: "1px solid #e5e5e5",
+ justifyContent: "space-between"
+ }}
+ >
+ <IconButton aria-label="Guardar" size="small">
+ <AddIcon />
+ </IconButton>
+ <Options />
+ </CardActions>
+ </Card>
+ );
+ }
+}
- export default ResourceCard;
+export default ResourceCard;
diff --git a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
new file mode 100644
index 0000000000000000000000000000000000000000..bf9de2678a7ee4f5a7b40d5a938f1660178cdae5
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
@@ -0,0 +1,95 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
+
+export default function SearchEPCompCurriculum() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState([0]);
+
+ const handleToggle = value => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+ const filtrosComponente = [
+ { exemplo: "Arte", value: "0" },
+ { exemplo: "Biologia", value: "1" },
+ { exemplo: "Ciências da Natureza", value: "2" },
+ { exemplo: "Direitos Humanos", value: "3" },
+ { exemplo: "Educação Ambiental", value: "4" },
+ { exemplo: "Educação do Campo", value: "5" },
+ { exemplo: "Educação Especial", value: "6" },
+ { exemplo: "Educação FÃsica", value: "7" },
+ { exemplo: "Educação IndÃgena", value: "8" },
+ { exemplo: "Educação Quilombola", value: "9" },
+ { exemplo: "Educação Sexual", value: "10" },
+ { exemplo: "Ensino Religioso", value: "11" },
+ { exemplo: "Filosofia", value: "12" },
+ { exemplo: "FÃsica", value: "13" },
+ { exemplo: "Geografia", value: "14" },
+ { exemplo: "História", value: "15" },
+ { exemplo: "Informática", value: "16" },
+ { exemplo: "LÃngua Espanhola", value: "17" },
+ { exemplo: "LÃngua Inglesa", value: "18" },
+ { exemplo: "LÃngua Portuguesa", value: "19" },
+ { exemplo: "Matemática", value: "20" },
+ { exemplo: "Outras LÃnguas", value: "21" },
+ { exemplo: "Outros", value: "22" },
+ { exemplo: "QuÃmica", value: "23" },
+ { exemplo: "Sociologia", value: "24" }
+ ];
+
+ return (
+ <List className={classes.root}>
+ {filtrosComponente.map(item => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(item.value)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={checked.indexOf(item.value) !== -1}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
+}
diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
new file mode 100644
index 0000000000000000000000000000000000000000..4b29aef845f505aa16f3fd744aa2fc34f984d2c8
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
@@ -0,0 +1,82 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
+
+export default function SearchEPIdiomas() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState([0]);
+
+ const handleToggle = value => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+ const filtrosIdiomas = [
+ { value: "0", exemplo: "Alemão" },
+ { value: "1", exemplo: "Espanhol" },
+ { value: "2", exemplo: "Francês" },
+ { value: "3", exemplo: "Inglês" },
+ { value: "4", exemplo: "Italiano" },
+ { value: "5", exemplo: "Japonês" },
+ { value: "6", exemplo: "LIBRAS" },
+ { value: "7", exemplo: "Mandarim" },
+ { value: "8", exemplo: "Nenhum" },
+ { value: "9", exemplo: "Outro" },
+ { value: "10", exemplo: "Português" },
+ { value: "11", exemplo: "Russo" }
+ ];
+
+ return (
+ <List className={classes.root}>
+ {filtrosIdiomas.map(item => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(item.value)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={checked.indexOf(item.value) !== -1}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
+}
diff --git a/src/Components/SearchExpansionPanel/SearchEPKeyWord.js b/src/Components/SearchExpansionPanel/SearchEPKeyWord.js
new file mode 100644
index 0000000000000000000000000000000000000000..101a0e0609fe318817ab8b76b5d964daef1deba8
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SearchEPKeyWord.js
@@ -0,0 +1,167 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import Typography from "@material-ui/core/Typography";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import SearchList from "../SearchList";
+
+const ExpansionPanel = withStyles({
+ root: {
+ border: "1px solid rgba(0, 0, 0, .125)",
+ boxShadow: "none",
+ "&:not(:last-child)": {
+ borderBottom: 0
+ },
+ "&:before": {
+ display: "none"
+ },
+ "&$expanded": {
+ margin: "auto"
+ }
+ },
+ expanded: {}
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+ root: {
+ color: "#666",
+ marginBottom: -1,
+ minHeight: 56,
+ backgroundColor: "#fff",
+
+ "&$expanded": {
+ minHeight: 56,
+ backgroundColor: "#fff"
+ }
+ },
+ content: {
+ "&$expanded": {
+ margin: "12px 0"
+ }
+ },
+ expanded: {}
+})(MuiExpansionPanelSummary);
+
+const TesteTypography = withStyles({
+ root: {
+ fontSize: "17px"
+ }
+})(Typography);
+
+const ExpansionPanelDetails = withStyles(theme => ({
+ root: {
+ padding: theme.spacing(2)
+ }
+}))(MuiExpansionPanelDetails);
+
+export default function SearchExpansionPanels() {
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
+ rel="stylesheet"
+ />
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel1d-content"
+ id="panel1d-header"
+ >
+ <Typography
+ style={{
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500"
+ }}
+ >
+ Filtros
+ </Typography>
+ </ExpansionPanelSummary>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls="panel2d-content"
+ id="panel2d-header"
+ >
+ <TesteTypography>Componentes Curriculares</TesteTypography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ <SearchList />
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls="panel3d-content"
+ id="panel3d-header"
+ >
+ <Typography>Tipos de Recurso</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+ lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel4d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel4d-header"
+ >
+ <Typography>Etapas de Ensino</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+ lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel5d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel5d-header"
+ >
+ <Typography>Idiomas</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+ lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel6d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel6d-header"
+ >
+ <Typography>Palavra-Chave</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+ lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ </div>
+ );
+}
diff --git a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
new file mode 100644
index 0000000000000000000000000000000000000000..063fa12613e037f85b8172d45b954594ba9dcdcd
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
@@ -0,0 +1,85 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
+
+export default function SearchEPTiposRec() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState([0]);
+
+ const handleToggle = value => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+ const filtrosTipos = [
+ { value: "0", exemplo: "Animação" },
+ { value: "1", exemplo: "Aplicativo móvel" },
+ { value: "2", exemplo: "Apresentação" },
+ { value: "3", exemplo: "Ãudio" },
+ { value: "4", exemplo: "Experimento prático" },
+ { value: "5", exemplo: "Imagem" },
+ { value: "6", exemplo: "Infográfico" },
+ { value: "7", exemplo: "Jogo" },
+ { value: "8", exemplo: "Livro digital" },
+ { value: "9", exemplo: "Mapa" },
+ { value: "10", exemplo: "Outros" },
+ { value: "11", exemplo: "Software Educacional" },
+ { value: "12", exemplo: "Texto" },
+ { value: "13", exemplo: "VÃdeo" },
+ { value: "14", exemplo: "Website externo" }
+ ];
+
+ return (
+ <List className={classes.root}>
+ {filtrosTipos.map(item => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(item.value)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={checked.indexOf(item.value) !== -1}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
+}
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
new file mode 100644
index 0000000000000000000000000000000000000000..b72a0bf4868698c08dd85dbf3097d5954ea52abc
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -0,0 +1,157 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import Typography from "@material-ui/core/Typography";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import SearchEPCompCurriculum from "./SearchEPCompCurriculum";
+import SearchEPTiposRec from "./SearchEPTiposRec";
+import SearchEPEtapasEns from "./SesrchEPEtapasEns";
+import SearchEPIdiomas from "./SearchEPIdiomas";
+const ExpansionPanel = withStyles({
+ root: {
+ border: "1px solid rgba(0, 0, 0, .125)",
+ boxShadow: "none",
+ "&:not(:last-child)": {
+ borderBottom: 0
+ },
+ "&:before": {
+ display: "none"
+ },
+ "&$expanded": {
+ margin: "auto"
+ }
+ },
+ expanded: {}
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+ root: {
+ color: "#666",
+ marginBottom: -1,
+ minHeight: 56,
+ backgroundColor: "#fff",
+ ".MuiButtonBase-root.MuiIconButton-root.MuiExpansionPanelSummary-expandIcon.MuiIconButton-edgeEnd": {
+ paddingInline: "0"
+ },
+
+ "&$expanded": {
+ minHeight: 56,
+ backgroundColor: "#fff"
+ }
+ },
+ content: {
+ "&$expanded": {
+ margin: "12px 0"
+ }
+ },
+ expanded: {}
+})(MuiExpansionPanelSummary);
+
+const TesteTypography = withStyles({
+ root: {
+ fontSize: "17px"
+ }
+})(Typography);
+
+const ExpansionPanelDetails = withStyles(theme => ({
+ root: {
+ padding: theme.spacing(2)
+ }
+}))(MuiExpansionPanelDetails);
+
+export default function SearchExpansionPanel() {
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
+ rel="stylesheet"
+ />
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel1d-content"
+ id="panel1d-header"
+ >
+ <Typography
+ style={{
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500"
+ }}
+ >
+ Filtros
+ </Typography>
+ </ExpansionPanelSummary>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls="panel2d-content"
+ id="panel2d-header"
+ >
+ <TesteTypography>Componentes Curriculares</TesteTypography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ <SearchEPCompCurriculum />
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls="panel3d-content"
+ id="panel3d-header"
+ >
+ <Typography>Tipos de Recurso</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <SearchEPTiposRec />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel4d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel4d-header"
+ >
+ <Typography>Etapas de Ensino</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <SearchEPEtapasEns />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel5d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel5d-header"
+ >
+ <Typography>Idiomas</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <SearchEPIdiomas />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel6d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel6d-header"
+ >
+ <Typography>Palavra-Chave</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+ lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ </div>
+ );
+}
diff --git a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
new file mode 100644
index 0000000000000000000000000000000000000000..db71afa999203424d152a76cd37e2df7e6fc7515
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
@@ -0,0 +1,76 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
+
+export default function SearchEPEtapasEns() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState([0]);
+
+ const handleToggle = value => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+ const filtrosEtapas = [
+ { value: "0", exemplo: "Educação Infantil" },
+ { value: "1", exemplo: "Ensino Fundamental I (1º até o 5º ano )" },
+ { value: "2", exemplo: "Ensino Fundamental II (do 6º até o 9º ano)" },
+ { value: "3", exemplo: "Ensino Médio" },
+ { value: "4", exemplo: "Ensino Superior" },
+ { value: "5", exemplo: "Outros" }
+ ];
+
+ return (
+ <List className={classes.root}>
+ {filtrosEtapas.map(item => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(item.value)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={checked.indexOf(item.value) !== -1}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
+}
diff --git a/src/Components/SearchList.js b/src/Components/SearchList.js
new file mode 100644
index 0000000000000000000000000000000000000000..0f789ce11cbfdb21bb5a37df2379aff6d109e1b8
--- /dev/null
+++ b/src/Components/SearchList.js
@@ -0,0 +1,70 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+import CommentIcon from "@material-ui/icons/Comment";
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper
+ }
+}));
+
+export default function SearchList() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState([0]);
+
+ const handleToggle = value => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+
+ return (
+ <List className={classes.root}>
+ {[0, 1, 2, 3].map(value => {
+ const labelId = `checkbox-list-label-${value}`;
+
+ return (
+ <ListItem
+ key={value}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(value)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={checked.indexOf(value) !== -1}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments">
+ <CommentIcon />
+ </IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
+}
diff --git a/src/Components/SearchSection.js b/src/Components/SearchSection.js
index 989774625d87cef62831fdd74d93cf7c6f89da90..c82035cc368fb52601ce32dc3ebb4cae30d5a9c5 100644
--- a/src/Components/SearchSection.js
+++ b/src/Components/SearchSection.js
@@ -72,13 +72,13 @@ class SearchSection extends Component{
<SearchBar/>
</Container> */}
<div style={{paddingBottom: "100px", color: "white"}}>
- <a href="#sobre"><MdInfoOutline size="30px"/>SOBRE A PLATAFORMA</a>
- <a href="#apresentacao"> <FaRegPlayCircle size="25px"/>VÃDEO DE APRESENTAÇÃO</a>
+ <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>
</div>
<Row justify="center">
- <button style={{...buttonStyle, ...{backgroundColor: "#ff7f00"}}} onClick={()=> {this.props.function("Recursos")}}>Recursos Educacionais Digitais</button>
- <button style={{...buttonStyle, ...{backgroundColor: "#e81f4f"}}} onClick={()=> {this.props.function("Materiais")}}>Materiais de Formação</button>
- <button style={{...buttonStyle, ...{backgroundColor: "#673ab7"}}} onClick={()=> {this.props.function("Colecoes")}}>Coleções dos Usuários</button>
+ <button style={{...buttonStyle, ...{backgroundColor: "#ff7f00",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Recursos")}}>Recursos Educacionais Digitais</button>
+ <button style={{...buttonStyle, ...{backgroundColor: "#e81f4f",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Materiais")}}>Materiais de Formação</button>
+ <button style={{...buttonStyle, ...{backgroundColor: "#673ab7",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Colecoes")}}>Coleções dos Usuários</button>
</Row>
</div>
);
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
index 73a5304f7aed2c77fdfa548d81aa6ee86b18d26f..cf2b6458651e13aa36791ed17ee0c60f896c655d 100644
--- a/src/Pages/Contact.js
+++ b/src/Pages/Contact.js
@@ -16,31 +16,26 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import Banner1 from '../img/banner-sobre.jpg';
-import { TextField } from '@material-ui/core';
-import FormInput from "../Components/FormInput.js";
-import Formulario from "../Components/ContactForm.js";
-import axios from 'axios'
-import {apiUrl} from '../env';
+import React from "react";
+import styled from "styled-components";
+import Banner1 from "../img/banner-sobre.jpg";
+import InputFormulario from "../Components/ContactForm.js";
-
-const Seção1 = styled.div `
+const Secao1 = styled.div`
width: 100%;
background-image: url(${Banner1});
background-size: cover;
background-position: bottom center;
height: 250px;
- color:#fff;
+ color: #fff;
line-height: 1.1;
text-align: center;
padding-top: 120px;
h2 {
- font-family: Pompiere,cursive;
+ font-family: Pompiere, cursive;
font-size: 52px;
- color:#fff;
+ color: #fff;
margin: 0;
padding-left: 0;
padding-right: 0;
@@ -50,40 +45,35 @@ const Seção1 = styled.div `
h3 {
margin-top: 20px;
margin-bottom: 10px;
- font-family: Roboto,sans-serif;
+ font-family: Roboto, sans-serif;
font-size: 30px;
font-weight: lighter;
-
}
-`
+`;
-const Seção2 = styled.div `
+const Secao2 = styled.div`
height: 708px;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
-`
+`;
-const Seção3 = styled.div `
+const Secao3 = styled.div`
height: 127px;
background-color: #f4f4f4;
- color:#666;
+ color: #666;
line-height: 1.42857143;
- font-size:18px;
+ font-size: 18px;
text-align: center;
padding-top: 70px;
-
p {
margin: 0 0 10px 0;
}
+`;
-
-`
-
-
-const Formulário = styled.div `
+const Formulario = styled.div`
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 40px;
@@ -144,39 +134,40 @@ const Formulário = styled.div `
text-align: center;
}
-`
-
-
-
-
-function Contact (props) {
-
-
-
- return(
- <>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
- <Seção1>
- <h2>CONTATO</h2>
- <h3>Quer enviar uma mensagem?</h3>
- </Seção1>
-
- <Seção2>
- <Formulário noValidate autoComplete="off">
- <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou crÃticas</h2>
- <Formulario/>
- </Formulário>
- </Seção2>
-
- <Seção3>
-
- <span>MEC - Ministério da Educação </span>
- <p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161</p>
-
- </Seção3>
- </>
- );
-
+`;
+
+function Contact(props) {
+ return (
+ <>
+ <link
+ href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
+ rel="stylesheet"
+ />
+ <Secao1>
+ <h2>CONTATO</h2>
+ <h3>Quer enviar uma mensagem?</h3>
+ </Secao1>
+
+ <Secao2>
+ <Formulario noValidate autoComplete="off">
+ <h2>
+ Entre em contato para enviar dúvidas,
+ <br />
+ sugestões ou crÃticas
+ </h2>
+ <InputFormulario />
+ </Formulario>
+ </Secao2>
+
+ <Secao3>
+ <span>MEC - Ministério da Educação </span>
+ <p>
+ Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
+ 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161
+ </p>
+ </Secao3>
+ </>
+ );
}
export default Contact;
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index 3dd4036cc1786176d9d3bfb0eb71722caab1281b..af32a875baf451ca68a0ddf1f3e649ad2473c66d 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.js
@@ -15,142 +15,175 @@ 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, {useState, useContext} from 'react';
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import { Button } from '@material-ui/core';
-import LabeledCheckbox from "../Components/Checkbox.js"
-import styled from 'styled-components'
-import {device} from '../Components/device.js'
-import { Store } from '../Store.js';
-import IllegalContentModal from '../Components/IllegalContentModal.js'
-import PublicationPermissionsContent from '../Components/PublicationPermissionsContent.js'
+import React, { useState, useContext } from "react";
+import Card from "@material-ui/core/Card";
+import CardActions from "@material-ui/core/CardActions";
+import { Button } from "@material-ui/core";
+import LabeledCheckbox from "../Components/Checkbox.js";
+import styled from "styled-components";
+import { device } from "../Components/device.js";
+import { Store } from "../Store.js";
+import IllegalContentModal from "../Components/IllegalContentModal.js";
+import PublicationPermissionsContent from "../Components/PublicationPermissionsContent.js";
const CardStyled = styled(Card)`
- box-sizing : border-box;
- background-color : white;
- max-width: 1700px;
- padding-top: 52px;
- margin-left:7em;
- @media ${device.mobileM} {
- width : 100%;
- height : 100%;
- }
- `
+ box-sizing: border-box;
+ background-color: white;
+ max-width: 1700px;
+ padding-top: 52px;
+ margin-left: 7em;
+ @media ${device.mobileM} {
+ width: 100%;
+ height: 100%;
+ }
+`;
const Styledspan = styled.span`
- font-family: 'Roboto', sans serif;
- font-style: normal;
- font-weight: 500;
- line-height: 22px;
- font-size: 15px;
- letter-spacing: .01em;
-`
+ font-family: "Roboto", sans serif;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 22px;
+ font-size: 15px;
+ letter-spacing: 0.01em;
+`;
const Styledhr = styled.hr`
- color: #dadada;
-`
-
-export default function PermissionsContainer (props) {
- const {state, dispatch} = useContext(Store)
- const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
- const [unavailableButton, setButtonAvailability] = useState(true);
- const [radios, setRadioValues] = useState({
- radio1 : '',
- radio2 : '' ,
- radio3 : ''
- }
- )
- const [modalOpen, setModalOpen] = useState(false)
-
- const closeModal = () => {
- setModalOpen(false)
- props.history.push('/termos-publicar-recurso')
- window.scrollTo(0, 0)
- }
-
- const handleChecked = e => {
- setButtonAvailability(!unavailableButton);
- }
-
- const handleRadios = (e) => {
- let temp = radios
- temp[e.target.name] = e.target.value
-
- setRadioValues(temp)
-
-
- setCheckboxAvailability(!(radios.radio1 && radios.radio2 && radios.radio3))
-
- }
-
- const handleAgreement = () => {
-
- if(radios.radio1 == 'Sim' || radios.radio2 == 'Sim' || radios.radio3 == 'Sim'){
- setModalOpen(true)
- }
- else{
- dispatch( {
- type: 'USER_AGREED_TO_PUBLICATION_PERMISSIONS',
- userAgreement: true
- })
-
- props.history.push('/upload')
- }
- }
-
- const redirect = () => {
- props.history.push('/termos-publicar-recurso')
+ color: #dadada;
+`;
+
+export default function PermissionsContainer(props) {
+ const { state, dispatch } = useContext(Store);
+ const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
+ const [unavailableButton, setButtonAvailability] = useState(true);
+ const [radios, setRadioValues] = useState({
+ radio1: "",
+ radio2: "",
+ radio3: ""
+ });
+ const [modalOpen, setModalOpen] = useState(false);
+
+ const closeModal = () => {
+ setModalOpen(false);
+ props.history.push("/termos-publicar-recurso");
+ window.scrollTo(0, 0);
+ };
+
+ const handleChecked = e => {
+ setButtonAvailability(!unavailableButton);
+ };
+
+ const handleRadios = e => {
+ let temp = radios;
+ temp[e.target.name] = e.target.value;
+
+ setRadioValues(temp);
+
+ setCheckboxAvailability(!(radios.radio1 && radios.radio2 && radios.radio3));
+ };
+
+ const handleAgreement = () => {
+ if (
+ radios.radio1 === "Sim" ||
+ radios.radio2 === "Sim" ||
+ radios.radio3 === "Sim"
+ ) {
+ setModalOpen(true);
+ } else {
+ dispatch({
+ type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
+ userAgreement: true
+ });
+
+ props.history.push("/upload");
}
-
- return (
- <>
- {
- state.userAgreedToPublicationTerms ?
- (
- [
- <>
- <IllegalContentModal open={modalOpen} handleClose={closeModal} disableBackdropClick={true}/>
- <div style={{paddingTop:"5vh", paddingBottom:"5vh", backgroundColor :"#f4f4f4"}}>
- <div style={{}}>
+ };
+
+ const redirect = () => {
+ props.history.push("/termos-publicar-recurso");
+ };
+
+ return (
+ <>
+ {state.userAgreedToPublicationTerms ? (
+ [
+ <>
+ <IllegalContentModal
+ open={modalOpen}
+ handleClose={closeModal}
+ disableBackdropClick={true}
+ />
+ <div
+ style={{
+ paddingTop: "5vh",
+ paddingBottom: "5vh",
+ backgroundColor: "#f4f4f4"
+ }}
+ >
+ <div style={{}}>
<CardStyled variant="outlined">
- <PublicationPermissionsContent handleRadios={handleRadios} />
- <Styledhr/>
- <CardActions style={{justifyContent:"center", padding:"25px"}}>
- <div>
- <div style={{fontSize:"14px"}}>
- <LabeledCheckbox disabledCheckbox = {unavailableCheckbox}
- label={<Styledspan>Li e permito a publicação do meu recurso na Plataforma Integrada de RED do MEC, assim como atesto que o meu recurso atende aos critérios especificados acima.</Styledspan>}
- handleChange={handleChecked}
- />
- <div style={{justifyContent:"center",display:"flex"}}>
- <Button disabled={unavailableButton}
- style={unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
- onClick={handleAgreement}
- >
- <Styledspan style = {unavailableButton ? {color:"#666666"} : {color:"#ffffff"}}>Continuar </Styledspan>
- </Button>
- <Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
- <Styledspan style={{color:"rgb(102, 102, 102)"}}>Cancelar</Styledspan>
- </Button>
- </div>
- </div>
+ <PublicationPermissionsContent handleRadios={handleRadios} />
+ <Styledhr />
+ <CardActions
+ style={{ justifyContent: "center", padding: "25px" }}
+ >
+ <div>
+ <div style={{ fontSize: "14px" }}>
+ <LabeledCheckbox
+ disabledCheckbox={unavailableCheckbox}
+ label={
+ <Styledspan>
+ Li e permito a publicação do meu recurso na
+ Plataforma Integrada de RED do MEC, assim como
+ atesto que o meu recurso atende aos critérios
+ especificados acima.
+ </Styledspan>
+ }
+ handleChange={handleChecked}
+ />
+ <div
+ style={{ justifyContent: "center", display: "flex" }}
+ >
+ <Button
+ disabled={unavailableButton}
+ style={
+ unavailableButton
+ ? { backgroundColor: "#e9e9e9" }
+ : { backgroundColor: "#00bcd4" }
+ }
+ onClick={handleAgreement}
+ >
+ <Styledspan
+ style={
+ unavailableButton
+ ? { color: "#666666" }
+ : { color: "#ffffff" }
+ }
+ >
+ Continuar{" "}
+ </Styledspan>
+ </Button>
+ <Button
+ style={{
+ marginLeft: "45px",
+ backgroundColor: "#e9e9e9"
+ }}
+ >
+ <Styledspan style={{ color: "rgb(102, 102, 102)" }}>
+ Cancelar
+ </Styledspan>
+ </Button>
</div>
- </CardActions>
+ </div>
+ </div>
+ </CardActions>
</CardStyled>
- </div>
- </div>
- </>
- ]
- )
- :
- (
- <>
- {redirect()}
- </>
- )
- }
- </>
-
- )
+ </div>
+ </div>
+ </>
+ ]
+ ) : (
+ <>{redirect()}</>
+ )}
+ </>
+ );
}
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index e514d0e5dc4a2be864a773f0e4c456e082b907f2..70465b05c2b80d1349b8d2c1dd210494d71470a4 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -16,79 +16,214 @@ 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, { useEffect, useState, useContext } from 'react';
-import axios from 'axios';
+import React, { useEffect, useState, useContext } from "react";
+import axios from "axios";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import Paper from "@material-ui/core/Paper";
// import ResourceCard from '../Components/ResourceCard'
// import CollectionCard from '../Components/CollectionCard'
// import UserCard from '../Components/UserCard'
-
-import {apiUrl} from '../env';
-import './Styles/Home.css';
-import { Store } from '../Store';
-
-export default function Search(props){
-
- const { state, dispatch } = useContext(Store)
- const [ results, setResults ] = useState([])
- const [ page, ] = useState(0)
- const [ resultsPerPage, ] = useState(12)
- const [ order, ] = useState('score')
-
- useEffect(()=>{
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { apiUrl } from "../env";
+import "./Styles/Home.css";
+import { Store } from "../Store";
+import { Grid } from "@material-ui/core";
+import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
+
+import SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel";
+import ResourceCard from "../Components/ResourceCard";
+
+export default function Search(props) {
+ const { state, dispatch } = useContext(Store);
+ const [results, setResults] = useState([]);
+ const [page] = useState(0);
+ const [resultsPerPage, setResultsPerPage] = useState(12);
+ const [order] = useState("score");
+
+ useEffect(() => {
dispatch({
- type: 'HANDLE_SEARCH_BAR',
- opened: true
- })
+ type: "HANDLE_SEARCH_BAR",
+ opened: false
+ });
- const urlParams = new URLSearchParams(window.location.search)
- const query = urlParams.get('query')
- const searchClass = urlParams.get('search_class')
+ const urlParams = new URLSearchParams(window.location.search);
+ const query = urlParams.get("query");
+ const searchClass = urlParams.get("search_class");
- if(state.search.query !== query || state.search.class !== searchClass){
+ if (state.search.query !== query || state.search.class !== searchClass) {
dispatch({
- type: 'SAVE_SEARCH',
+ type: "SAVE_SEARCH",
newSearch: {
query: query,
class: searchClass
}
- })
+ });
}
- return () => dispatch({
- type: 'HANDLE_SEARCH_BAR',
- opened: false
- })
- },[])
-
- useEffect(()=>{
- axios.get(`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${state.search.class}`)
- .then( res => {
- setResults(res.data)
- })
-
- },[state.search])
-
+ return () =>
+ dispatch({
+ type: "HANDLE_SEARCH_BAR",
+ opened: false
+ });
+ }, []);
+
+ useEffect(() => {
+ axios
+ .get(
+ `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${state.search.class}`
+ )
+ .then(res => {
+ setResults(res.data);
+ console.log(res.data);
+ });
+ }, [state.search, resultsPerPage]);
return (
- <React.Fragment>
- <h1>Search for {state.search.query!=='*'?state.search.query:'all'} in {state.search.class}</h1>
- {
- state.search.class === 'LearningObject' &&
- <ul>
- {results.map((res)=><li key={res.id}> {res.name} </li>)}
- </ul>
- }
- {state.search.class === 'Collection' &&
- <ul>
- {results.map((res)=><li key={res.id}> {res.name} </li>)}
- </ul>
- }
- {state.search.class === 'User' &&
- <ul>
- {results.map((res)=><li key={res.id}> {res.name} </li>)}
- </ul>
- }
- </React.Fragment>
- )
+ <div style={{ backgroundColor: "#f4f4f4" }}>
+ <React.Fragment>
+ <h1>
+ Search for {state.search.query !== "*" ? state.search.query : "all"}{" "}
+ in {state.search.class}
+ </h1>
+ {state.search.class === "LearningObject" && (
+ <ul>
+ {results.map(res => (
+ <li key={res.id}> {res.name} </li>
+ ))}
+ </ul>
+ )}
+ {state.search.class === "Collection" && (
+ <ul>
+ {results.map(res => (
+ <li key={res.id}> {res.name} </li>
+ ))}
+ </ul>
+ )}
+ {state.search.class === "User" && (
+ <ul>
+ {results.map(res => (
+ <li key={res.id}> {res.name} </li>
+ ))}
+ </ul>
+ )}
+ </React.Fragment>
+
+ <Principal>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/">Página Inicial</Link>
+ <span>Busca</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <HeaderFilters elevation={4} square>
+ <Grid container spacing={0} style={{ height: "100%" }}>
+ <Grid
+ item
+ xs={4}
+ style={{
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center"
+ }}
+ >
+ <div style={{ textAlign: "left" }}>Mostrar</div>
+ </Grid>
+ <Grid
+ item
+ xs={4}
+ style={{
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center"
+ }}
+ >
+ <div>Numero</div>
+ </Grid>
+ <Grid
+ item
+ xs={4}
+ style={{
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center"
+ }}
+ >
+ <div style={{ textAlign: "right" }}>Ordenar por:</div>
+ </Grid>
+ </Grid>
+ </HeaderFilters>
+ <GridBusca container spacing={2}>
+ <Grid item xs={3}>
+ <Paper elevation={4} square>
+ <SearchExpansionPanel />
+ </Paper>
+ </Grid>
+ <Grid item xs={9}>
+ <Grid container spacing={2}>
+ {results.map(card => (
+ <Grid item md={4} sm={6} key={card.id}>
+ <ResourceCard
+ name={card.name}
+ rating={card.score}
+ type={card.object_type}
+ description={card.description}
+ thumbnail={card.thumbnail}
+ author={card.author}
+ avatar={card.publisher.avatar}
+ />
+ </Grid>
+ ))}
+ </Grid>
+ <button onClick={() => setResultsPerPage(resultsPerPage + 12)}>
+ Número de recursos mostrados {resultsPerPage}
+ </button>
+ </Grid>
+ </GridBusca>
+ </Principal>
+ </div>
+ );
}
+
+const GridBusca = styled(Grid)`
+ color: #666;
+
+ h4 {
+ padding: 0 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ text-transform: uppercase;
+ }
+`;
+
+const HeaderFilters = styled(Paper)`
+ height: 60px;
+ text-align: center;
+ background-color: #fff;
+ margin-bottom: 30px;
+ color: #666;
+`;
+
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display: flex;
+ justify-content: flex-start;
+ max-width: 1170px;
+ span {
+ color: #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+`;
+
+const BreadCrumbsDiv = styled.div`
+ padding: 10px;
+ display: flex;
+`;
+
+const Principal = styled.div`
+ width: 1170px;
+ margin-inline: auto;
+`;
diff --git a/src/Pages/TabsHelp/TabManageAc.js b/src/Pages/TabsHelp/TabManageAc.js
index d8e749881d7e33c2b07668333a321bdc8de617d5..6caf56bae22264e70fb5aa0152502ccdc9fa370c 100644
--- a/src/Pages/TabsHelp/TabManageAc.js
+++ b/src/Pages/TabsHelp/TabManageAc.js
@@ -16,74 +16,81 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import Tabs from '@material-ui/core/Tabs'
-import Tab from '@material-ui/core/Tab';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
-import Grid from '@material-ui/core/Grid';
-import GerenciandoConta from '../../img/ajuda/Gerenciando_a_conta.png';
-import Why from '../../Components/HelpCenter/TabsManageAc/Why'
-import HowToDo from '../../Components/HelpCenter/TabsManageAc/HowToDo';
-import HowToChange from '../../Components/HelpCenter/TabsManageAc/HowToChange';
-import HowToAccess from '../../Components/HelpCenter/TabsManageAc/HowToAccess';
-import Forget from '../../Components/HelpCenter/TabsManageAc/Forget';
-import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
-import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
-import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
+import React, { Component, useState, useEffect } from "react";
+import styled from "styled-components";
+import Tabs from "@material-ui/core/Tabs";
+import Tab from "@material-ui/core/Tab";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import Grid from "@material-ui/core/Grid";
+import GerenciandoConta from "../../img/ajuda/Gerenciando_a_conta.png";
+import Why from "../../Components/HelpCenter/TabsManageAc/Why";
+import HowToDo from "../../Components/HelpCenter/TabsManageAc/HowToDo";
+import HowToChange from "../../Components/HelpCenter/TabsManageAc/HowToChange";
+import HowToAccess from "../../Components/HelpCenter/TabsManageAc/HowToAccess";
+import Forget from "../../Components/HelpCenter/TabsManageAc/Forget";
+import CardParticipando from "../../Components/HelpCenter/Cards/CardParticipando";
+import CardEncontrando from "../../Components/HelpCenter/Cards/CardEncontrando";
+import CardPublicando from "../../Components/HelpCenter/Cards/CardPublicando";
+import { Link } from "react-router-dom";
+
+export default function TabManageAc(props) {
+ const tabs = [
+ "Por que me cadastrar?",
+ "Como fazer meu cadastro?",
+ "Como alterar minha senha?",
+ "Como acessar a conta?",
+ "Esqueci minha senha. O que fazer?",
+ "Gerenciando a Conta"
+ ];
-
-
-
-
-
-
-export default function TabManageAc (props) {
- const tabs= [
- 'Por que me cadastrar?',
- 'Como fazer meu cadastro?',
- 'Como alterar minha senha?',
- 'Como acessar a conta?',
- 'Esqueci minha senha. O que fazer?'
- ]
-
const [tabValue, setTabValue] = useState(
- Number(props.location.state.value) || 0);
+ Number(props.location.state.value) || 0
+ );
const handleChangeTab = (e, newValue) => {
- setTabValue(newValue)
-}
-
+ setTabValue(newValue);
+ };
+ return (
+ <div style={{ backgroundColor: "#f4f4f4" }}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap"
+ rel="stylesheet"
+ />
- return(
- <div style={{backgroundColor:"#f4f4f4"}}>
- <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
-
<Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/">Página Inicial</Link>
+ <Link to="ajuda">Ajuda</Link>
+
+ <span>{tabs[5]}</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
<Grid container spacing={4}>
<Grid item xs={3}>
<Menu>
- <h4>Gerenciando a conta</h4>
- <TabsStyled orientation = "vertical"
- variant = "scrollable"
- value = {tabValue}
- onChange = {handleChangeTab}
- TabIndicatorProps = {{style:{display: "none"}}}
+ <h4>{tabs[5]}</h4>
+ <TabsStyled
+ orientation="vertical"
+ variant="scrollable"
+ value={tabValue}
+ onChange={handleChangeTab}
+ TabIndicatorProps={{ style: { display: "none" } }}
>
- <TabStyled label={tabs[0]}></TabStyled>
- <TabStyled label={tabs[1]}></TabStyled>
- <TabStyled label={tabs[2]}></TabStyled>
- <TabStyled label={tabs[3]}></TabStyled>
- <TabStyled label={tabs[4]}></TabStyled>
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ <TabStyled label={tabs[2]}></TabStyled>
+ <TabStyled label={tabs[3]}></TabStyled>
+ <TabStyled label={tabs[4]}></TabStyled>
</TabsStyled>
- <br/>
+ <br />
<div className="voltarInicio">
<a href="ajuda">VOLTAR AO ÃNICIO</a>
</div>
- <hr/>
+ <hr />
<div className="procurava">
- Não encontrou o que procurava? Entre em
+ Não encontrou o que procurava? Entre em
<a href="contato"> contato</a>
</div>
</Menu>
@@ -92,70 +99,80 @@ export default function TabManageAc (props) {
<Grid item xs={9}>
<Principal>
<div className="fixo">
- <img src={GerenciandoConta} alt="Gerenciando a conta"/>
- <span>Gerenciando a conta</span>
+ <img src={GerenciandoConta} alt="Gerenciando a conta" />
+ <span>{tabs[5]}</span>
</div>
- {tabValue === 0 && <Why title={tabs[0]}/>}
- {tabValue === 1 && <HowToDo title={tabs[1]}/>}
- {tabValue === 2 && <HowToChange title={tabs[2]}/>}
- {tabValue === 3 && <HowToAccess title={tabs[3]}/>}
- {tabValue === 4 && <Forget title={tabs[4]}/>}
+ {tabValue === 0 && <Why title={tabs[0]} />}
+ {tabValue === 1 && <HowToDo title={tabs[1]} />}
+ {tabValue === 2 && <HowToChange title={tabs[2]} />}
+ {tabValue === 3 && <HowToAccess title={tabs[3]} />}
+ {tabValue === 4 && <Forget title={tabs[4]} />}
<div className="resultadosProcura">
<span>Não era bem o que você procurava?</span>
<div className="subtitulo">
- <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ <span>
+ Você pode navegar pelos tópicos de ajuda ou entrar em{" "}
+ <a href="contato">Contato</a>.
+ </span>
</div>
</div>
- <Grid style={{marginBottom:"50px"}} container spacing={2}>
+ <Grid style={{ marginBottom: "50px" }} container spacing={2}>
<Grid item xs={4}>
- <CardPublicando/>
+ <CardPublicando />
</Grid>
<Grid item xs={4}>
- <CardEncontrando/>
+ <CardEncontrando />
</Grid>
<Grid item xs={4}>
- <CardParticipando/>
+ <CardParticipando />
</Grid>
</Grid>
-
-
</Principal>
- </Grid>
- </Grid>
-
-
+ </Grid>
+ </Grid>
</Secao>
</div>
);
}
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display: flex;
+ justify-content: flex-start;
+ max-width: 1170px;
+ span {
+ color: #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+`;
+
+const BreadCrumbsDiv = styled.div`
+ padding: 10px;
+ display: flex;
+`;
+
const Principal = styled.div`
.fixo {
-
height: 40px;
text-align: center;
background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 30px;
margin-bottom: 30px;
color: #666;
-
img {
height: 50px;
width: 50px;
margin-right: 40px;
vertical-align: middle;
-
}
span {
font-size: 20px;
- vertical-align: ;
}
-
-
-
}
.resultadosProcura {
text-align: center;
@@ -169,56 +186,46 @@ const Principal = styled.div`
margin-top: 10px;
span {
- font-size: 15px
+ font-size: 15px;
}
a {
font-size: 15px;
padding: 0;
- color:#00bcd4;
+ color: #00bcd4;
text-decoration: none;
}
-
}
}
-
-`
+`;
const TabsStyled = styled(Tabs)`
-
.Mui-selected {
background-color: #e7e4e4;
}
- .MuiTab-root{
+ .MuiTab-root {
text-transform: none !important;
}
-
-`
+`;
const TabStyled = styled(Tab)`
-
padding: 4px 15px !important;
font-weight: 500;
font-size: 14px !important;
border-radius: 4px !important;
-
-
-
-
&:hover {
background-color: #e7e4e4;
}
-`
-
+`;
const Menu = styled.div`
width: auto;
background-color: #fff;
color: #666;
padding-block: 10px;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
h4 {
padding-inline: 15px;
@@ -235,7 +242,7 @@ const Menu = styled.div`
a {
font-size: 15px;
padding: 0;
- color:#00bcd4;
+ color: #00bcd4;
text-decoration: none;
}
}
@@ -255,16 +262,13 @@ const Menu = styled.div`
a {
font-size: 15px;
padding: 0;
- color:#00bcd4;
+ color: #00bcd4;
text-decoration: none;
}
-
}
-
-`
+`;
const Secao = styled.div`
width: 1138px;
margin-inline: auto;
-
-`
+`;
diff --git a/src/Pages/TabsHelp/TabNetPart.js b/src/Pages/TabsHelp/TabNetPart.js
index 3e8a6201aa2817d56d1a608428bf12f481380224..743a8a70698247afc53df97c2e6573eede53d8a5 100644
--- a/src/Pages/TabsHelp/TabNetPart.js
+++ b/src/Pages/TabsHelp/TabNetPart.js
@@ -28,6 +28,7 @@ import What from '../../Components/HelpCenter/TabsNetPart/What'
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+import { Link } from 'react-router-dom';
@@ -39,6 +40,7 @@ export default function TabNetPart (props) {
const tabs= [
'Como comentar ou avaliar um recurso?',
'Que tipo de comentário posso fazer sobre o recurso?',
+ 'Participando da Rede'
]
const [tabValue, setTabValue] = useState(
@@ -55,10 +57,27 @@ export default function TabNetPart (props) {
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
<Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/" >
+ Página Inicial
+ </Link>
+ <Link to="ajuda" >
+ Ajuda
+ </Link>
+
+ <span>
+ {tabs[2]}
+ </span>
+
+
+ </StyledBreadCrumbs>
+
+ </BreadCrumbsDiv>
<Grid container spacing={4}>
<Grid item xs={3}>
<Menu>
- <h4>Participando da rede</h4>
+ <h4>{tabs[2]}</h4>
<TabsStyled orientation = "vertical"
variant = "scrollable"
value = {tabValue}
@@ -84,7 +103,7 @@ export default function TabNetPart (props) {
<Principal>
<div className="fixo">
<img src={ParticipandoRede} alt="Participando da Rede"/>
- <span>Participando da rede</span>
+ <span>{tabs[2]}</span>
</div>
{tabValue === 0 && <How title={tabs[0]}/>}
{tabValue === 1 && <What title={tabs[1]}/>}
@@ -116,6 +135,26 @@ export default function TabNetPart (props) {
</div>
);
}
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display : flex;
+ justify-content : flex-start;
+ max-width : 1170px;
+ span {
+ color : #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+
+`
+
+const BreadCrumbsDiv = styled.div`
+
+ padding : 10px;
+ display : flex;
+`
+
const Principal = styled.div`
.fixo {
diff --git a/src/Pages/TabsHelp/TabPlataformaMEC.js b/src/Pages/TabsHelp/TabPlataformaMEC.js
index 894d3a9ecc9d47c2be3e5b16b682eecc4b59212a..02ca0646d0f555f49a5d2a1e0d8f80cc1c3d7deb 100644
--- a/src/Pages/TabsHelp/TabPlataformaMEC.js
+++ b/src/Pages/TabsHelp/TabPlataformaMEC.js
@@ -31,6 +31,7 @@ import Which from '../../Components/HelpCenter/TabsPlataformaMEC/Which';
import Types from '../../Components/HelpCenter/TabsPlataformaMEC/Types';
import Software from '../../Components/HelpCenter/TabsPlataformaMEC/Software';
import How from '../../Components/HelpCenter/TabsPlataformaMEC/How';
+import { Link } from 'react-router-dom';
@@ -45,7 +46,8 @@ export default function TabPlataformaMEC (props) {
'Entendendo as 3 áreas da Plataforma',
'Quais são os Portais Parceiros?',
'Tipos de recursos',
- 'Softwares especÃficos'
+ 'Softwares especÃficos',
+ 'Plataforma MEC'
]
const [tabValue, setTabValue] = useState(
@@ -62,10 +64,26 @@ export default function TabPlataformaMEC (props) {
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
<Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/" >
+ Página Inicial
+ </Link>
+ <Link to="ajuda" >
+ Ajuda
+ </Link>
+
+ <span>
+ {tabs[6]}
+ </span>
+
+ </StyledBreadCrumbs>
+
+ </BreadCrumbsDiv>
<Grid container spacing={4}>
<Grid item xs={3}>
<Menu>
- <h4>Plataforma MEC</h4>
+ <h4>{tabs[6]}</h4>
<TabsStyled orientation = "vertical"
variant = "scrollable"
value = {tabValue}
@@ -123,6 +141,26 @@ export default function TabPlataformaMEC (props) {
);
}
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display : flex;
+ justify-content : flex-start;
+ max-width : 1170px;
+ span {
+ color : #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+
+`
+
+const BreadCrumbsDiv = styled.div`
+
+ padding : 10px;
+ display : flex;
+`
+
const Principal = styled.div`
.fixo {
diff --git a/src/Pages/TabsHelp/TabResourseFind.js b/src/Pages/TabsHelp/TabResourseFind.js
index a9d407dde1d0498409a736e0bf4efd225da9e77b..f3d3a3f3aa9fb7a144f63eb4548f1eaed4df40e5 100644
--- a/src/Pages/TabsHelp/TabResourseFind.js
+++ b/src/Pages/TabsHelp/TabResourseFind.js
@@ -29,6 +29,7 @@ import HowToFilter from '../../Components/HelpCenter/TabsResourseFind/HowToFilte
import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+import { Link } from 'react-router-dom';
@@ -40,7 +41,8 @@ export default function TabResourseFind (props) {
const tabs= [
'Como fazer uma busca?',
'Como filtrar os resultados?',
- 'Como os recursos são ranqueados?'
+ 'Como os recursos são ranqueados?',
+ 'Encontrando Recursos'
]
const [tabValue, setTabValue] = useState(
@@ -56,10 +58,26 @@ export default function TabResourseFind (props) {
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
<Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/" >
+ Página Inicial
+ </Link>
+ <Link to="ajuda" >
+ Ajuda
+ </Link>
+
+ <span>
+ {tabs[3]}
+ </span>
+
+ </StyledBreadCrumbs>
+
+ </BreadCrumbsDiv>
<Grid container spacing={4}>
<Grid item xs={3}>
<Menu>
- <h4>Encontrando Recursos</h4>
+ <h4>{tabs[3]}</h4>
<TabsStyled orientation = "vertical"
variant = "scrollable"
value = {tabValue}
@@ -86,7 +104,7 @@ export default function TabResourseFind (props) {
<Principal>
<div className="fixo">
<img src={EncontrandoRecurso} alt="Encontrando Recursos"/>
- <span>Encontrando recursos</span>
+ <span>{tabs[3]}</span>
</div>
{tabValue === 0 && <HowToDo title={tabs[0]}/>}
{tabValue === 1 && <HowToFilter title={tabs[1]}/>}
@@ -119,6 +137,26 @@ export default function TabResourseFind (props) {
);
}
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display : flex;
+ justify-content : flex-start;
+ max-width : 1170px;
+ span {
+ color : #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+
+`
+
+const BreadCrumbsDiv = styled.div`
+
+ padding : 10px;
+ display : flex;
+`
+
const Principal = styled.div`
.fixo {
diff --git a/src/Pages/TabsHelp/TabResoursePub.js b/src/Pages/TabsHelp/TabResoursePub.js
index edd5f90367b71453d74a87c2a3349827413465ad..8753044a17ebadde1539879d0c4d21d058d99565 100644
--- a/src/Pages/TabsHelp/TabResoursePub.js
+++ b/src/Pages/TabsHelp/TabResoursePub.js
@@ -29,6 +29,7 @@ import Which from '../../Components/HelpCenter/TabsResoursePub/Which'
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+import { Link } from 'react-router-dom';
@@ -40,7 +41,8 @@ export default function TabResoursePub (props) {
const tabs= [
'Por que enviar um recurso?',
'Como publicar um recurso?',
- 'Quais tipos de recursos e formatos de arquivo a plataforma aceita?'
+ 'Quais tipos de recursos e formatos de arquivo a plataforma aceita?',
+ 'Publicando Recursos'
]
const [tabValue, setTabValue] = useState(
@@ -57,10 +59,27 @@ export default function TabResoursePub (props) {
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
<Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/" >
+ Página Inicial
+ </Link>
+ <Link to="ajuda" >
+ Ajuda
+ </Link>
+
+ <span>
+ {tabs[3]}
+ </span>
+
+
+ </StyledBreadCrumbs>
+
+ </BreadCrumbsDiv>
<Grid container spacing={4}>
<Grid item xs={3}>
<Menu>
- <h4>Publicando Recursos</h4>
+ <h4>{tabs[3]}</h4>
<TabsStyled orientation = "vertical"
variant = "scrollable"
value = {tabValue}
@@ -87,7 +106,7 @@ export default function TabResoursePub (props) {
<Principal>
<div className="fixo">
<img src={PublicandoRecursos} alt="Publicando Recursos"/>
- <span>Publicando Recursos</span>
+ <span>{tabs[3]}</span>
</div>
{tabValue === 0 && <Why title={tabs[0]}/>}
{tabValue === 1 && <How title={tabs[1]}/>}
@@ -120,6 +139,26 @@ export default function TabResoursePub (props) {
</div>
);
}
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display : flex;
+ justify-content : flex-start;
+ max-width : 1170px;
+ span {
+ color : #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+
+`
+
+const BreadCrumbsDiv = styled.div`
+
+ padding : 10px;
+ display : flex;
+`
+
const Principal = styled.div`
.fixo {
diff --git a/src/Pages/Teste.js b/src/Pages/Teste.js
index 2c5612b96f063f07d426df0b005cd64a94423073..ab1886ec698ab20926638eb828eb795e78b30dc2 100644
--- a/src/Pages/Teste.js
+++ b/src/Pages/Teste.js
@@ -15,340 +15,3 @@ 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, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import Banner1 from '../img/banner-sobre.jpg';
-import { TextField } from '@material-ui/core';
-import FormInput from "../Components/FormInput.js"
-import axios from 'axios'
-import {apiUrl} from '../env';
-
-
-const Seção1 = styled.div `
- width: 100%;
- background-image: url(${Banner1});
- background-size: cover;
- background-position: bottom center;
- height: 250px;
- color:#fff;
- line-height: 1.1;
- text-align: center;
- padding-top: 120px;
-
- h2 {
- font-family: Pompiere,cursive;
- font-size: 52px;
- color:#fff;
- margin: 0;
- padding-left: 0;
- padding-right: 0;
- font-weight: 500;
- }
-
- h3 {
- margin-top: 20px;
- margin-bottom: 10px;
- font-family: Roboto,sans-serif;
- font-size: 30px;
- font-weight: lighter;
-
- }
-`
-
-const Seção2 = styled.div `
- height: 708px;
- background-color: #f4f4f4;
- display: flex;
- justify-content: center;
- align-items: center;
-`
-const Button = styled.button`
-
-
-`
-
-const Formulário = styled.div `
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 40px;
- height: 520px;
- width: 420px;
- color: #666;
-
- form .inputBlock {
- margin-block: 22px;
-
- }
-
- form .inputBlock label {
- font-size: 14px;
- font-weight: bold;
- display: block;
-
- }
-
- form .inputBlock input {
- width: 100%;
- height: 32px;
- font-size: 14px;
- border: 0;
- border-bottom: 1px solid #eee;
-
- }
-
- form .inputBlock.Message input {
- height: 131px;
- }
-
- form buttom[type=submit] {
- width: 100%;
- border: 0;
- margin-top: 30px;
- background: #7d40e7
- border-radius: 2px;
- padding: 15px 20px;
- font-size: 16px;
- font-weight: bold;
- color: #fff;
- cursor: pointer;
- transition: background 0.5s;
-
- }
-
- form buttom[type=submit]:hover {
- background: #6931ac
- }
-
-
- h2 {
- font-size: 24px;
- font-weight: lighter;
- margin-bottom: 50px;
- margin-top: 20px;
- text-align: center;
-
- }
-`
-
-
-
-const Seção3 = styled.div `
- height: 127px;
- background-color: #f4f4f4;
- color:#666;
- line-height: 1.42857143;
- font-size:18px;
- text-align: center;
- padding-top: 70px;
-
-
- p {
- margin: 0 0 10px 0;
- }
-
-
-`
-
-function validateNome (nome) {
- let flag = false
- if(nome.length === 0) {
- flag = true
- }
-
- return flag
-}
-
-
-function validateMensagem (mensagem) {
- let flag = false
- if(mensagem.length === 0) {
- flag = true
- }
-
- return flag
-}
-
-function validateEmail (email) {
- let flag = false
- if (email.split("").filter(x => x === "@").length !== 1) {
- flag = true
- }
- return flag
-}
-
-
-
-function Contact (props) {
-
- const [nome, handleNome] = useState(
- {
- dict : {
- key:false,
- value:""
- }
- })
- const [email, handleEmail] = useState(
- {
- dict : {
- key:false,
- value:""
- }
- })
- const [mensagem, handleMensagem] = useState(
- {
- dict : {
- key: false,
- value:""
- }
- })
-
-
- const preencheNome = (e) => {
- const aux2 = e.target.value
- const flag = validateNome(aux2)
- handleNome({...nome, dict : {
- key : flag,
- value : e.target.value
- }})
- console.log(nome)
- }
-
- const preencheEmail = (e) => {
- const aux = e.target.value
- const flag = validateEmail(aux)
- handleEmail({...email, dict : {
- key : flag,
- value : e.target.value
- }})
- console.log(email)
- }
-
- const preencheMensagem = (e) => {
- const msg = e.target.value
- console.log(msg)
- let flag = validateMensagem(msg)
- handleMensagem({...mensagem, dict : {
- key : flag,
- value : msg
- }})
- console.log(mensagem)
- }
-
- const limpaTudo = () => {
-
- handleNome({
- dict : {
- key: false,
- value:""
- }}
- );
-
- handleEmail({
- dict : {
- key: false,
- value:""
- }}
- )
-
- handleMensagem({
- dict : {
- key: false,
- value:""
- }}
- )
-
- }
-
-
-
- const onSubmit = (e) => {
- //on submit we should prevent the page from refreshing
- e.preventDefault(); //though this is arguable
- console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key ))
- if (!(nome.dict.key && email.dict.key && mensagem.dict.key )) {
-
- axios.post(`${apiUrl}/contacts`,
- {
- contact : {
- name: nome.dict.value,
- email: email.dict.value,
- message: mensagem.dict.value
- }
-
- }
- ).then()
-
-
-
- limpaTudo();
-
- }
-
-
-
- }
-
-
-
- return(
- <>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
- <Seção1>
- <h2>CONTATO</h2>
- <h3>Quer enviar uma mensagem?</h3>
- </Seção1>
-
- <Seção2>
-
- <Formulário noValidate autoComplete="off">
- <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou crÃticas</h2>
- <form onSubmit={e => onSubmit(e)}>
- <FormInput
- inputType={"text"}
- name={"nome"}
- value={nome.dict.value}
- placeholder={"Nome *"}
- error = {nome.dict.key}
- help = {nome.dict.key ? "insira seu nome para o contato " : ""}
- handleChange={e => preencheNome(e)}
- />
- <FormInput
- inputType={"text"}
- name={"email"}
- value={email.dict.value}
- placeholder={"E-mail *"}
- error = {email.dict.key}
- help = {email.dict.key ? "Formato de e-mail inadequado tente : usuario@provedor.com" : ""}
- handleChange={e => preencheEmail(e)}
- />
- <FormInput
- inputType={"text"}
- name={"mensagem"}
- value={mensagem.dict.value}
- placeholder={"Mensagem *"}
- multi = {true}
- rows = "3"
- rowsMax = "5"
- error = {mensagem.dict.key}
- help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
- handleChange={e => preencheMensagem(e)}
- />
- <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
- </form>
-
- </Formulário>
- </Seção2>
-
- <Seção3>
-
- <span>MEC - Ministério da Educação </span>
- <p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161</p>
-
- </Seção3>
- </>
- );
-
-}
-
-export default Contact;