Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • portalmec/portalmec-react
  • rfhferreira/cleaning-portal-mec-react
2 results
Show changes
Commits on Source (33)
Hide whitespace changes
Inline Side-by-side
Showing
with 1057 additions and 540 deletions
package-lock.json
View file @ d47d2fa6
......@@ -2338,9 +2338,9 @@
"integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA=="
},
"@hapi/hoek": {
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",
"integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw=="
"version": "8.5.1",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
"integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow=="
},
"@hapi/joi": {
"version": "15.1.1",
......@@ -12977,6 +12977,15 @@
"camelcase": "^5.0.0"
}
},
"react-input-mask": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
"integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
"requires": {
"invariant": "^2.2.4",
"warning": "^4.0.2"
}
},
"react-is": {
"version": "16.8.6",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
......@@ -15273,6 +15282,14 @@
"makeerror": "1.0.x"
}
},
"warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
......
src/App.js
View file @ d47d2fa6
......@@ -32,6 +32,8 @@ import TabResoursePub from './Pages/TabsHelp/TabResoursePub';
import TabResourseFind from './Pages/TabsHelp/TabResourseFind';
import TabNetPart from './Pages/TabsHelp/TabNetPart';
import TabManageAc from './Pages/TabsHelp/TabManageAc';
import PasswordRecoveryPage from './Pages/PasswordRecoveryPage.js'
import PageProfessor from './Pages/PageProfessor.js'
import ResourcePage from './Pages/ResourcePage';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import { Store } from './Store'
......@@ -39,6 +41,7 @@ import TermsPage from './Pages/TermsPage.js'
import PublicationPermissionsPage from './Pages/PublicationPermissionsPage.js'
import TabPlataformaMEC from './Pages/TabsHelp/TabPlataformaMEC';
import EditProfilePage from './Pages/EditProfilePage.js'
export default function App(){
// eslint-disable-next-line
......@@ -74,12 +77,13 @@ export default function App(){
<BrowserRouter>
<Header />
<div style={{backgroundImage: "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)", height:"5px"}}></div>
<link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
<Switch>
<Route path="/" exact={true} component={Home}/>
<Route path="/busca" component={Search} />
<Route path="/perfil-atualizacoes" component={UserPage} />
<Route path="/perfil" component={UserPage} />
<Route path="/editarperfil" component={EditProfilePage} />
<Route path="/recurso" component={ResourcePage}/>
<Route path="/termos-publicar-recurso" component={TermsPage}/>
<Route path="/permission" component={PublicationPermissionsPage}/>
{/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
......@@ -93,7 +97,8 @@ export default function App(){
<Route path="/participando-da-rede" component={TabNetPart}/>
<Route path="/gerenciando-conta" component={TabManageAc}/>
<Route path="/plataforma-mec" component={TabPlataformaMEC}/>
<Route path="/recuperar-senha" component={PasswordRecoveryPage}/>
<Route path='/professor' component={PageProfessor}/>
</Switch>
<EcFooter/>
<GNUAGPLfooter/>
......
src/Components/AreasSubPages.js
View file @ d47d2fa6
......@@ -16,183 +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";
const areaStyle={
import Grid from "@material-ui/core/Grid";
const areaStyle = {
paddingTop: "5px",
fontSize: "16px",
textAlign:"left",
textAlign: "left",
backgroundColor: "inherit",
width: "700px",
width: "1000px",
margin: "auto",
padding: "20px",
minHeight: "150px"
}
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}>
<img src={recursos} alt="aba recursos" height="100" style={{float: "left"}}/>
<p>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 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>
</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="100" style={{float: "left"}}/>
<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>
......@@ -205,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;
src/Components/Checkbox.js
View file @ d47d2fa6
......@@ -25,10 +25,9 @@ const StyledFormControlLabel = styled(FormControlLabel)`
.label {
font-size : 12px !important;
}
`
const StyledCheckbox = styled(Checkbox)`
color : #00bcd4 !important;
.MuiCheckbox-colorSecondary.Mui-checked {
color : #00bcd4 !important;
}
`
export default function LabeledCheckbox(props) {
......@@ -36,8 +35,7 @@ export default function LabeledCheckbox(props) {
return (
<StyledFormControlLabel
control={
<StyledCheckbox
disabled = {props.disabledCheckbox}
<Checkbox
value = {props.checked}
onChange = {props.handleChange}
/>
......
src/Components/ColaborarModal.js
View file @ d47d2fa6
import React, {useContext} from 'react';
import React, {useContext, useState} from 'react';
import Modal from '@material-ui/core/Modal';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
......@@ -9,7 +9,7 @@ import CloseIcon from '@material-ui/icons/Close';
import LabeledCheckbox from "../Components/Checkbox.js"
const StyledDivContainer = styled.div`
background-color : rgb(255,255,255);;
background-color : rgb(255,255,255);
border-radius : 4px;
border-shadow : #000;
color : rgb(102,102,102);
......@@ -25,7 +25,7 @@ const StyledDivHeader = styled.div`
text-align : center;
display : flex;
justify-content : space-between;
padding : 10px 58px 0 58px;
padding : 10px 26px 0 26px;
color : #666;
font-size : 40px;
font-weight : 400;
......@@ -34,7 +34,7 @@ const StyledDivHeader = styled.div`
`
const StyledDivDialogContent = styled.div`
padding : 20px 30px;
padding : 20px 0;
`
const StyledButtonsDiv = styled.div`
......@@ -45,6 +45,7 @@ const StyledButtonsDiv = styled.div`
const StyledButton = styled(Button)`
background-color : #00acc1 !important;
width : 45%
`
const StyledH2 = styled.h2`
......@@ -77,6 +78,8 @@ const Styledspan = styled.span`
export default function ColaborarModal (props) {
const {state, dispatch} = useContext(Store)
const [checkbox, controlCheckbox] = useState(false)
const handleCheckbox = () => controlCheckbox(!checkbox)
return (
<StyledModal
......@@ -95,6 +98,7 @@ export default function ColaborarModal (props) {
<Fade in={props.open}>
<StyledDivContainer>
<StyledDivHeader>
<span style={{width:"32px"}}/>
<StyledH2>
Você é professor(a), da educação básica, e gostaria de colaborar com a Plataforma?
</StyledH2>
......@@ -111,7 +115,7 @@ export default function ColaborarModal (props) {
}}
>
<div style={{maxWidth:"350px", marginRight:"0", marginLeft:"auto", color:"#666"}}>
<p style={{textAlign:"start", fontSize:"15px", margin:"0 0 10"}}>
<p style={{textAlign:"justify", fontSize:"15px", margin:"0 0 10"}}>
Ao ser identificado como professor(a), você poderá
<span style={{color:"#00bcd4"}}> publicar e compartilhar recursos educacionais digitais </span>
na plataforma com toda a comunidade escolar do país.
......@@ -126,7 +130,7 @@ export default function ColaborarModal (props) {
</StyledButtonsDiv>
</div>
<div style={{display:"flex", alignItems:"flex-start"}}>
<LabeledCheckbox label={<Styledspan>Não perguntar novamente</Styledspan>} />
<LabeledCheckbox label={<Styledspan>Não perguntar novamente!</Styledspan>} checked={checkbox} handleChange={handleCheckbox}/>
</div>
</StyledDivContentInformation>
</StyledDivDialogContent>
......
src/Components/ComponentAlterarAvatar.js 0 → 100644
View file @ d47d2fa6
/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana
This file is part of Plataforma Integrada MEC.
Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useContext,Component} from 'react';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components'
import {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl} from '../env';
import CloseIcon from '@material-ui/icons/Close';
import Profile from '../img/default_profile0.png'
const ChangeAvatarDiv = styled.div`
color : rgba(255,255,255,.7);
background-color:rgba(0,0,0,.5);
position: absolute;
bottom: 0;
width: inherit;
text-align: center;
font-size: 18px;
padding-bottom: 5px;
font-weight: 400;
height: 30%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
`
const ModalDiv = styled.div`
background-color : #fff;
border-radius : 4px;
min-width : 560px;
color : #666;
display: flex;
flex-direction : column;
`
const StyledButtonConfirmar = styled(Button)`
background-color : #00acc1 !important;
color: #fff !important;
display: inline-block !important;
position: relative !important;
cursor: pointer !important;
min-height: 36px !important;
min-width: 88px !important;
line-height: 36px !important;
vertical-align: middle !important;
align-items: center !important;
text-align: center !important;
border-radius: 4px !important;
box-sizing: border-box !important;
user-select: none !important;
border: 0 !important;
padding: 0 6px !important;
margin: 6px 8px !important;
background: transparent !important;
background-color: transparent !important;
color: currentColor !important;
white-space: nowrap !important;
text-transform: uppercase !important;
font-weight: 500 !important;
font-size: 14px !important;
font-style: inherit !important;
font-variant: inherit !important;
font-family: inherit !important;
text-decoration: none !important;
overflow: hidden !important;
`
const ButtonCancelar = styled(Button)`
outline : none !important;
display: inline-block !important;
position: relative !important;
cursor: pointer !important;
min-height: 36px !important;
min-width: 88px !important;
line-height: 36px !important;
vertical-align: middle !important;
align-items: center !important;
text-align: center !important;
border-radius: 3px !important;
box-sizing: border-box !important;
user-select: none !important;
border: 0 !important;
padding: 0 6px !important;
margin: 6px 8px !important;
background:transparent !important;
color: currentColor !important;
white-space: nowrap !important;
text-transform: uppercase !important;
font-weight: 500 !important;
font-size: 14px !important;
font-style: inherit !important;
font-variant: inherit !important;
font-family: inherit !important;
text-decoration: none !important;
overflow: hidden !important;
`
const ButtonsDiv = styled.div`
display : flex;
justify-content:flex-end;
`
const AvatarCircleDiv = styled.div`
margin-bottom : 0;
border-radius : 50%;
height : 150px;
width : 150px;
position : relative;
overflow: hidden;
`
const DivFlowHolder =styled.div`
align-self : auto;
`
const DivAlterarFoto = styled.div`
display : flex;
margin-bottom : 30px;
flex-direction : row;
align-items : center;
justify-content :center;
`
const DialogDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
`
const HeaderDiv = styled.div`
display : flex;
flex-direction : row;
align-items : center;
align-content : center;
justify-content : center;
max-width : 100%;
`
const StyledH2 = styled.h2`
font-size : 26px;
font-weight : lighter;
margin-top : 20px;
margin-bottom : 10px;
font-family: inherit;
line-height: 1.1;
color: inherit;
`
const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
width : 40px;
border-radius : 50%;
padding : 8px;
height : 40px;
margin : 0 6px;
`
export default function ComponentAlterarAvatar (props) {
return (
<ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>Editar Foto</StyledH2>
<StyledCloseModalButton onClick={props.handleClose}>
<CloseIcon/>
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
<div style={{marginTop:"0"}}>
<form>
<DivAlterarFoto>
<DivFlowHolder>
<AvatarCircleDiv>
{
props.userAvatar == '' || props.userAvatar == null ?
(
<img src={Profile} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
):
(
<img src={this.props.userAvatar} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
)
}
<input accept="image/*" id="icon-button-file"
type="file"
onChange={(e) => props.handleFile(e.target.files) }
style={{display:"none"}}/>
<label for="icon-button-file" style={{width:"inherit"}}>
<ChangeAvatarDiv >
<span>Alterar</span>
</ChangeAvatarDiv>
</label>
</AvatarCircleDiv>
</DivFlowHolder>
</DivAlterarFoto>
<ButtonsDiv>
<ButtonCancelar onClick={props.handleClose}><span>Cancelar</span></ButtonCancelar><StyledButtonConfirmar><span>Salvar Alterações</span></StyledButtonConfirmar>
</ButtonsDiv>
</form>
</div>
</DialogDiv>
</ModalDiv>
)
}
src/Components/ContactForm.js
View file @ d47d2fa6
......@@ -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';
......
src/Components/FormInput.js
View file @ d47d2fa6
......@@ -16,60 +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 : 'inherit',
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}}
style={{width:"100%"}}
multiline = {props.multi}
/>
<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}
/>
);
}
src/Components/FormValidationFunction.js 0 → 100644
View file @ d47d2fa6
import React from 'react'
//fieldName : form field name
//userInput : user input for a given field
//confirmation : optional password confirmation argument
export default function ValidateUserInput (fieldName, userInput, confirmation) {
let flag = false
switch(fieldName) {
case('username'):
if (userInput.length < 1) {
flag = true
}
break;
case('email'):
if(userInput.length < 7 || !(userInput.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i))) {
flag = true
}
break;
case('password'):
if (userInput.length < 8) {
flag = true
}
break;
case('confirmation'):
if (userInput !== confirmation) {
flag = true
}
break;
case('message'):
if(userInput.length === 0) {
flag = true
}
break;
case('aboutMe'):
if(userInput.length > 160) {
flag = true
}
break;
default:
break;
}
return flag
}
src/Components/Header.js
View file @ d47d2fa6
......@@ -25,16 +25,32 @@ import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal'
import { Store } from '../Store';
import ColaborarModal from './ColaborarModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
//const StyledButton = styled(Button)`
// background : #ffa54c !important;
// boxShadow :none;
//`
function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function Header(props){
const { state, dispatch } = useContext(Store)
const [signUpOpen, setSignUp] = useState(false)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [modalColaborar, setModalColaborar] = useState(false)
const toggleSnackbar = (event, reason) => {
if (reason === 'clickaway') {
return;
}
handleSuccessfulLogin(false);
}
const handleSignUp = () => {
setSignUp(!signUpOpen)
......@@ -54,13 +70,18 @@ export default function Header(props){
return(
<>
<AcessibilityBar/>
<Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
anchorOrigin = {{ vertical:'top', horizontal:'middle' }}
>
<Alert severity="success" style={{backgroundColor:"#00acc1"}}>Você está conectado(a)!</Alert>
</Snackbar>
<MenuBar openSearchBar={handleClickSearch} openSignUp = {handleSignUp} openLogin = {handleLogin}/>
{ state.searchOpen &&
<SearchBar/>
}
<SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}/>
<LoginModal open={loginOpen} handleClose={handleLogin} openSignUp={handleSignUp}/>
{/*<ColaborarModal open={state.modalColaborarPlataformaOpen} handleClose={handleKyloren} />*/}
<LoginModal open={loginOpen} handleClose={handleLogin} openSignUp={handleSignUp} openSnackbar = {() => {handleSuccessfulLogin(true)}}/>
<ColaborarModal open={modalColaborar} handleClose={() => {setModalColaborar(!modalColaborar)}} />
</>
)
......
src/Components/HelpCenter/Cards/CardEncontrando.js
View file @ d47d2fa6
......@@ -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
`;
src/Components/HelpCenter/Cards/CardGerenciando.js
View file @ d47d2fa6
......@@ -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
`;
src/Components/HelpCenter/Cards/CardParticipando.js
View file @ d47d2fa6
......@@ -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
`;
src/Components/HelpCenter/Cards/CardPublicando.js
View file @ d47d2fa6
......@@ -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
`;
src/Components/HelpCenter/TabsPlataformaMEC/How.js
View file @ d47d2fa6
......@@ -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
`;
src/Components/HelpCenter/TabsPlataformaMEC/Software.js
View file @ d47d2fa6
......@@ -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
`;
src/Components/HelpCenter/TabsPlataformaMEC/Types.js
View file @ d47d2fa6
......@@ -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
`;
src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
View file @ d47d2fa6
......@@ -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
`;
src/Components/HelpCenter/TabsPlataformaMEC/What.js
View file @ d47d2fa6
......@@ -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
`;