diff --git a/src/App.js b/src/App.js
index 80523ca988f9386b244f9a4704aab7bb2cc40257..48b49a7407b17a3ea751f61922a5ac4a2c0a6508 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,7 +17,7 @@ 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, useEffect, useState } from 'react';
-import Home from './Pages/Home';
+import Home from './Pages/HomeFunction';
import Search from './Pages/Search'
import Header from './Components/Header'
import EcFooter from './Components/EcFooter';
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
new file mode 100644
index 0000000000000000000000000000000000000000..3bbb14e30b81b0c055bdec39634dfd544042a63d
--- /dev/null
+++ b/src/Components/AreasSubPagesFunction.js
@@ -0,0 +1,405 @@
+/*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, { useState, useEffect } from "react";
+import "./carousel.css";
+import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
+import styled from 'styled-components'
+import MaterialCard from "./MaterialCard";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+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 ResourceCardFunction from "./ResourceCardFunction.js";
+import CollectionCardFunction from "./CollectionCardFunction.js";
+import colecoes_obj from './FormationMaterialsResources/formationMaterials';
+import ExpandedMaterial from './ExpandedMaterials';
+import {getRequest} from './HelperFunctions/getAxiosConfig.js'
+import Grid from '@material-ui/core/Grid';
+
+
+function objectsPerPage () {
+ var pageWidth = window.innerWidth
+ if (pageWidth >= 1200) {
+ return 3
+ }
+ else {
+ if (pageWidth > 766) {
+ return 2
+ }
+ else {
+ return 1
+ }
+ }
+}
+
+function ReqResources () {
+ const [rows, setRows] = useState([])
+
+ function onSuccessfulGet (data) {
+ var aux = []
+ var resources_per_page = objectsPerPage()
+ for (let i = 0; i < 12 / resources_per_page; i++) {
+ aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
+ }
+ setRows(aux)
+ }
+
+ useEffect(() => {
+ const url = `/learning_objects?limit=12&sort=["published_at", "desc"]`
+
+ getRequest(url, (data) => onSuccessfulGet(data), (error) => {console.log(error)})
+ }, [])
+
+ return (
+ <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ {
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <ResourceCardFunction
+ avatar={card.publisher.avatar}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </div>
+ ))}
+ </Row>
+ ))}
+ </Carousel>
+ )
+}
+
+function ReqCollections () {
+ const [rows, setRows] = useState([])
+
+ function onSuccessfulGet (data) {
+ var aux = []
+ var collections_per_page = objectsPerPage()
+ for (let i = 0; i < 12 / collections_per_page; i++) {
+ aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
+ }
+ setRows(aux)
+ }
+
+ useEffect(() => {
+ const url = `/collections?limit=12&sort=["updated_at", "desc"]`
+
+ getRequest(url, (data) => onSuccessfulGet(data), (error) => {console.log(error)})
+ }, [])
+
+ return (
+ <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ {
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.score}
+ id={card.id}
+ author={card.owner.name}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
+ </div>
+ ))}
+ </Row>
+ ))}
+ </Carousel>
+ )
+}
+
+function TabRecurso () {
+ const text = "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!"
+
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
+ <StyledTab container>
+ <Grid item md={3} xs={12}>
+ <img
+ src={recursos}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Recursos Educacionais Digitais
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <Container style={{ padding: "20px" }}>
+ <p
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #ff7f00",
+ color: "#ff7f00",
+ }}
+ >
+ Recursos mais recentes{" "}
+ </p>
+ <Hidden sm xs>
+ <ReqResources />
+ </Hidden>
+ <Visible sm xs>
+ <ReqResources />
+ </Visible>
+ </Container>
+ }
+ </React.Fragment>
+ )
+}
+
+function TabColecoes () {
+ const text = "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!"
+
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
+ <StyledTab container>
+ <Grid item md={3} xs={12}>
+ <img
+ src={colecoes}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Coleções dos Usuários
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <Container style={{ padding: "20px" }}>
+ <p
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #673ab7",
+ color: "#673ab7",
+ }}
+ >
+ Coleções mais recentes{" "}
+ </p>
+ <ReqCollections />
+ </Container>
+ }
+ </React.Fragment>
+ )
+}
+
+function TabMateriais () {
+ const text = "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."
+
+ const materials = colecoes_obj()
+
+ const [currMaterial, setCurrMaterial] = useState({
+ open : false,
+ material : {}
+ })
+
+ const handleExpandMaterial = (id) => {
+ if (id !== currMaterial.material.id)
+ setCurrMaterial({
+ open: true,
+ material: { ...materials[id] }
+ })
+ else {
+ setCurrMaterial({
+ open: false,
+ material: {}
+ })
+ }
+ }
+
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
+ <StyledTab container>
+ <Grid item md={3} xs={12}>
+ <img
+ src={materiais}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Materiais de formação
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <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>
+ {
+ materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={handleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ )})
+ }
+ </Row>
+ </Carousel>
+ {
+ currMaterial.open ?
+ <ExpandedMaterial material={currMaterial.material} />
+ :
+ null
+ }
+ </Container>
+ }
+ </React.Fragment >
+ )
+}
+
+export default function AreasSubPages (props) {
+
+ const areaRender = () => {
+ switch (props.banner) {
+ case "Recursos":
+ return <TabRecurso/>
+ case "Materiais":
+ return <TabMateriais/>
+ case "Colecoes":
+ return <TabColecoes/>
+ default:
+ return null
+ }
+ }
+
+ return (
+ <React.Fragment>
+ {
+ window.innerWidth <= 501 ? (
+ <React.Fragment>
+ <TabRecurso/>
+ <TabMateriais/>
+ <TabColecoes/>
+ </React.Fragment>
+ ) : (
+ areaRender()
+ )
+ }
+ </React.Fragment>
+ )
+}
+
+const StyledTab = styled(Grid)`
+ display : flex;
+ justify-content : center;
+ @media screen and (min-width : 502px) {
+ text-align : justify;
+ }
+ @media screen and (max-width : 502px) {
+ text-align : center;
+ }
+ color : #fff;
+ min-height : 190px;
+ padding : 20px 10px 20px 10px;
+
+ img {
+ float : left;
+ max-height : 155px;
+ }
+
+ .MuiGrid-grid-xs-12 {
+ display : flex;
+ justify-content : center;
+ }
+
+ h4 {
+ font-size : 18px;
+ margin : 10px !important;
+ }
+
+ p {
+ line-height : 1.42857143;
+ }
+
+`
diff --git a/src/Components/EcFooter.js b/src/Components/EcFooter.js
index f033939d45012606d43e9b514034ed01d8ef1d68..2bdf8a2f0fb480c64970b913b8f223121b906273 100644
--- a/src/Components/EcFooter.js
+++ b/src/Components/EcFooter.js
@@ -22,14 +22,19 @@ import eduConectada from '../img/educa-conectada.png';
import styled from 'styled-components';
import {Link} from 'react-router-dom'
-const blueFooter={
- backgroundColor: "#00bcd4",
- color: "white",
- display: "block",
- paddingTop: "2em",
- paddingBottom: "2em",
- verticalAlign: "bottom",
-}
+const BlueFooter = styled.div`
+ background-color : #00bcd4;
+ color : white;
+ display : block;
+ padding-top : 2em;
+ @media screen and (min-width : 502px) {
+ padding-bottom : 2em;
+ }
+
+ vertical-align: bottom;
+`
+
+
const listStyle={
listStyleType: "none",
fontSize: "80%",
@@ -44,10 +49,10 @@ const WhiteLink = styled(Link)`
class EcFooter extends Component{
render(){
return(
- <div style={blueFooter}>
+ <BlueFooter>
<Container>
<Row>
- <Col md={4} sm={5} xs={5}>
+ <Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && {textAlign : "center"} }>
<h4>Sobre</h4>
<ul style={listStyle}>
<li> <WhiteLink to="/sobre">Sobre a Plataforma</WhiteLink> </li>
@@ -56,7 +61,7 @@ class EcFooter extends Component{
<li> <WhiteLink to="/contato">Contato</WhiteLink> </li>
</ul>
</Col>
- <Col md={4} sm={5} xs={5}>
+ <Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && {textAlign : "center"} }>
<h4>Ajuda</h4>
<ul style={listStyle}>
<li> <WhiteLink to="/ajuda">Central de Ajuda</WhiteLink> </li>
@@ -66,12 +71,12 @@ class EcFooter extends Component{
<li> <WhiteLink to="/gerenciando-conta">Gerenciando a Conta</WhiteLink> </li>
</ul>
</Col>
- <Col md={4} sm={12} xs={12}>
+ <Col md={4} sm={12} xs={12} style={window.innerWidth < 502 && {textAlign : "center"} }>
<img src={eduConectada} height="50%" alt="logo educação conectada"/>
</Col>
</Row>
</Container>
- </div>
+ </BlueFooter>
)
}
}
diff --git a/src/Components/Funcionalities.js b/src/Components/Funcionalities.js
index dad67072cb92267aa889952d835943f9e22b1310..d183d855f2cc9e31146c26ec08ea8c4e0e7bfc9e 100644
--- a/src/Components/Funcionalities.js
+++ b/src/Components/Funcionalities.js
@@ -45,7 +45,7 @@ const caption={
class Funcionalities extends Component{
render(){
return(
- <Container style={{textAlign: "center"}}>
+ <Container style={{textAlign: "center", paddingBottom : "20px", color : "#666"}}>
<h2>Aqui na Plataforma você pode:</h2>
<Row style={imgRow}>
<Col sm={4} md={4}>
diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e372592af363069316c963dbd0a65b0448fe8f3
--- /dev/null
+++ b/src/Components/HomeScreenSearchBar.js
@@ -0,0 +1,174 @@
+/*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, { useState, useEffect, useContext } from 'react'
+import { Redirect } from 'react-router-dom'
+import Grid from '@material-ui/core/Grid';
+import styled from 'styled-components'
+import Menu from '@material-ui/core/Menu';
+import { Store } from '../Store';
+import { List, ListItem, ListItemIcon, ListItemText, RadioGroup, Radio, FormControl, Select, MenuItem, Button, FormControlLabel, TextField } from '@material-ui/core'
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import SearchIcon from '@material-ui/icons/Search';
+import {Link} from 'react-router-dom'
+
+export default function HomeScreenSearchBar (props) {
+ const [ query, setQuery ] = useState('')
+ const [ searchClass, setSearchClass ] = useState('LearningObject')
+
+ const { state, dispatch } = useContext(Store)
+
+ const [ goSearch, setGoSearch ] = useState(false)
+
+ useEffect(()=>{
+ if(window.location.pathname.includes('busca')){
+ const urlParams = new URLSearchParams(window.location.search)
+ const urlQuery = urlParams.get('query')
+ const urlSearchClass = urlParams.get('search_class')
+ if( searchClass !== urlSearchClass || query !== urlQuery){
+ setQuery(urlQuery)
+ setSearchClass(urlSearchClass)
+ }
+ }
+ },[])
+
+ useEffect(()=>setGoSearch(false),[goSearch])
+
+ const handleChange = ( event ) => {
+ setQuery(event.target.value)
+ }
+
+ const handleKeyDown = (event) => {
+ if(event.key === 'Enter' || event.type === 'click'){
+ dispatch({
+ type: 'SAVE_SEARCH',
+ newSearch: {
+ query: query!==''?query:'*',
+ class: searchClass
+ }
+ })
+ setGoSearch(true)
+ }
+ }
+
+ const options = [
+ {text : "Recursos", value : "LearningObject", color : "#ff7f00"},
+ {text : "Coleções", value : "Collection", color : "#673ab7"},
+ {text : "Usuários", value : "User", color : "#00bcd4"},
+ ]
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+ const handleClickListItem = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleMenuItemClick = (event, index, value) => {
+ console.log(value)
+ setSelectedIndex(index);
+ setSearchClass(value)
+ setAnchorEl(null);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const WIDTH = window.innerWidth;
+
+ return (
+
+ <Bar>
+ <Grid container>
+ <Grid item xs={7}>
+ <TextField
+ id="standard-search"
+ placeholder="O que você está buscando"
+ type="search"
+ margin="normal"
+ value={query}
+ onChange={handleChange}
+ onKeyPress={handleKeyDown}
+ />
+ </Grid>
+ <Grid item xs={3}>
+ <List component="nav" aria-label="Recurso">
+ <ListItem
+ button
+ aria-haspopup="true"
+ aria-controls="lock-menu"
+ aria-label="Recurso"
+ onClick={handleClickListItem}
+ >
+ <ListItemText
+ style={{color : options[selectedIndex].color}}
+ primary={options[selectedIndex].text}
+ />
+ <ListItemIcon>
+ <ArrowDropDownIcon/>
+ </ListItemIcon>
+ </ListItem>
+ </List>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ {options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ selected={index === selectedIndex}
+ onClick={(event) => handleMenuItemClick(event, index, option.value)}
+ style={{color : option.color}}
+ >
+ {option.text}
+ </MenuItem>
+ ))}
+ </Menu>
+ </Grid>
+ <Grid item xs={2}>
+ <div style={{height : "100%"}}>
+ <Link to ="/busca">
+ <Button className="custom-button" style={{backgroundColor : options[selectedIndex].color, color : "#fff"}}>
+ <SearchIcon fontSize="large"/>
+ </Button>
+ </Link>
+ </div>
+ </Grid>
+ </Grid>
+ </Bar>
+ )
+}
+
+const Bar = styled.div`
+ background-color : #fff !important;
+ border-radius : 5px !important;
+ .MuiList-root {
+ border-left: 1px solid #ccc !important;
+ }
+
+ .custom-button {
+ height: 100% !important;
+ width: 100% !important;
+ border-top-right-radius: 0 !important;
+ border-top-left-radius: 0 !important;
+ margin: 0 !important;
+ }
+`
diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js
index a38c6b27dbd8ed78018e1844853fbc32a1ceb0af..faca345306e13c734d4ecb32ca3c693cf9cdc941 100644
--- a/src/Components/SearchBar.js
+++ b/src/Components/SearchBar.js
@@ -23,7 +23,6 @@ import IconSearch from '@material-ui/icons/Search'
import { RadioGroup, Radio, FormControl, Select, MenuItem, Button, FormControlLabel, TextField } from '@material-ui/core'
import styled from 'styled-components'
-
import { Store } from '../Store';
@@ -97,13 +96,13 @@ const Flex = styled.span `
color: #787380;
`
-export default function SearchBar() {
+export default function SearchBar(props) {
const [ query, setQuery ] = useState('')
const [ searchClass, setSearchClass ] = useState('LearningObject')
const { state, dispatch } = useContext(Store)
- const [ goSearch, setGoSearch ] = useState(false)
+ const [ goSearch, setGoSearch ] = useState(false)
useEffect(()=>{
if(window.location.pathname.includes('busca')){
@@ -122,7 +121,7 @@ export default function SearchBar() {
const handleChange = ( event ) => {
setQuery(event.target.value)
}
-
+
const handleKeyDown = (event) => {
if(event.key === 'Enter' || event.type === 'click'){
dispatch({
@@ -133,54 +132,53 @@ export default function SearchBar() {
}
})
setGoSearch(true)
- }
+ }
}
return (
- <Bar>
- {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />}
- <TextFieldStyled
- id="standard-search"
- label="O que você está buscando"
- type="search"
- margin="normal"
- value={query}
- onChange={handleChange}
- onKeyPress={handleKeyDown}
- />
- <Flex>
- <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
- <Flex style={{"justifyContent": 'middle', 'flexDirection':'column'}}>
- <div>Pressione "Enter"</div>
- <div>ou click na lupa</div>
- </Flex>
- <DividerVertical />
- { state.windowSize.width >=900?
- <RadioGroupStyled row={true}
- aria-label="Tipo"
- name="types" value={searchClass}
- onChange={
- (event)=> setSearchClass(event.target.value)
- }
- >
- <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos"/>
- <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções"/>
- <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" />
- </RadioGroupStyled>
- :
- <FormControl>
- <SelectStyled
- value={searchClass}
- onChange={(event)=> setSearchClass(event.target.value)}
- >
- <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
- <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
- <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled>
- </SelectStyled>
- </FormControl>
- }
- </Flex>
- </Bar>
+ <Bar>
+ {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />}
+ <TextFieldStyled
+ id="standard-search"
+ label="O que você está buscando"
+ type="search"
+ margin="normal"
+ value={query}
+ onChange={handleChange}
+ onKeyPress={handleKeyDown}
+ />
+ <Flex>
+ <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
+ <Flex style={{"justifyContent": 'middle', 'flexDirection':'column'}}>
+ <div>Pressione "Enter"</div>
+ <div>ou click na lupa</div>
+ </Flex>
+ <DividerVertical />
+ { state.windowSize.width >=900?
+ <RadioGroupStyled row={true}
+ aria-label="Tipo"
+ name="types" value={searchClass}
+ onChange={
+ (event)=> setSearchClass(event.target.value)
+ }
+ >
+ <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos"/>
+ <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções"/>
+ <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" />
+ </RadioGroupStyled>
+ :
+ <FormControl>
+ <SelectStyled
+ value={searchClass}
+ onChange={(event)=> setSearchClass(event.target.value)}
+ >
+ <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
+ <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
+ <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled>
+ </SelectStyled>
+ </FormControl>
+ }
+ </Flex>
+ </Bar>
)
}
-
diff --git a/src/Components/SearchSectionFunction.js b/src/Components/SearchSectionFunction.js
new file mode 100644
index 0000000000000000000000000000000000000000..028fb37b44737cb3788e51f4212d8d6fd6c69ccb
--- /dev/null
+++ b/src/Components/SearchSectionFunction.js
@@ -0,0 +1,163 @@
+/*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, {useState} from 'react';
+import '../App.css';
+import styled from 'styled-components'
+import banner from '../img/bannerBusca.jpg';
+import bannerMobile from '../img/banner-mobile.jpg'
+// import SearchBar from './SearchBar';
+import {Row} from 'react-grid-system';
+import {MdInfoOutline} from "react-icons/md"
+import { FaRegPlayCircle} from "react-icons/fa";
+import ModalVideoApresentacao from "./ModalVideoApresentacao.js"
+import {Link} from 'react-router-dom'
+import Grid from '@material-ui/core/Grid';
+import HomeScreenSearchBar from './HomeScreenSearchBar'
+
+export default function SearchSection (props) {
+ const [modalOpen, handleModal] = useState(false)
+ const toggleModal = () => {handleModal(!modalOpen)}
+
+ const WIDTH = window.innerWidth;
+ return (
+ <React.Fragment>
+ <ModalVideoApresentacao open={modalOpen} handleClose={toggleModal}/>
+ <Banner>
+ <StyledGrid container direction="row" justify="center">
+ <Grid item style={{paddingRight : "15px", paddingLeft : "15px", paddingBottom : "120px"}}>
+ <div className="title">
+ <h2>
+ Plataforma MEC de Recursos Educacionais Digitais
+ </h2>
+ <h3>
+ Encontre e compartilhe vÃdeos, animações e muitos outros Recursos
+ </h3>
+ </div>
+ <HomeScreenSearchBar/>
+ <div className="links">
+ <Link to="/sobre">
+ <MdInfoOutline size="24px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>
+ {WIDTH <= 501 ? ("SOBRE") : ("SOBRE A PLATAFORMA")}
+ </Link>
+ <span onClick={toggleModal} style={{cursor : "pointer"}}>
+ <FaRegPlayCircle size="20px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>
+ {WIDTH <= 501 ? ("VÃDEO") : ("VÃDEO DE APRESENTAÇÃO")}
+ </span>
+ </div>
+ </Grid>
+ </StyledGrid>
+ {
+ WIDTH > 501 &&
+ <Row justify="center" style={{marginLeft:0, marginRight:0}}>
+ <button className="recurso"
+ onClick={() => {props.function("Recursos")}}>
+ Recursos Educacionais Digitais
+ </button>
+
+ <button className="material-formacao"
+ onClick={() => {props.function("Materiais")}}>
+ Materiais de Formação
+ </button>
+
+ <button className="colecao"
+ onClick={() => {props.function("Colecoes")}}>
+ Coleções dos Usuários
+ </button>
+ </Row>
+ }
+ </Banner>
+ </React.Fragment>
+ )
+}
+
+const StyledGrid = styled(Grid)`
+ margin-right : auto !important;
+ margin-left auto !important;
+ color : #fff !important;
+ text-align : center !important;
+`
+
+const Banner = styled.div`
+ width : 100%;
+ @media screen and (max-width : 501px) {
+ background-image : url(${bannerMobile});
+ }
+ @media screen and (min-width : 502px) {
+ background-image : url(${banner});
+ }
+ background-size : cover;
+ text-align : center;
+
+ .title {
+ color : white;
+ padding-top : 80px;
+ font-size : 22px;
+
+ h2 {
+ margin-top : 0 !important;
+ margin-bottom : 10px !important;
+ }
+
+ h3 {
+ font-weight : 100;
+ font-size : 24px;
+ margin : 0 !important;
+ }
+ }
+
+ .links {
+ margin-top : 20px;
+ color : white;
+
+ a {
+ color : #fff;
+ text-decoration : none !important;
+ outline : none;
+ padding-right : 10px;
+ }
+ }
+
+ button {
+ align-items: flex-start;
+ font-size: 1.14em;
+ text-align: center;
+ cursor: pointer;
+ border-top-left-radius: 15px;
+ border-top-right-radius: 15px;
+ line-height: 1.42857143;
+ width: 25%;
+ margin-top: 1%;
+ color: white;
+ padding: 1.2%;
+ border-width: 5%;
+ border-style: none;
+ border-image: initial;
+ outline : none;
+ }
+
+ .recurso {
+ background-color : #ff7f00;
+ }
+ .material-formacao {
+ background-color : #e81f4f;
+ }
+ .colecao {
+ background-color : #673ab7;
+ }
+`
diff --git a/src/Components/StatsBarFunction.js b/src/Components/StatsBarFunction.js
new file mode 100644
index 0000000000000000000000000000000000000000..8b58fc3ed7f448ec8a43edf0f12bb469916eebb0
--- /dev/null
+++ b/src/Components/StatsBarFunction.js
@@ -0,0 +1,160 @@
+/*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, {useState, useEffect} from 'react';
+import styled from 'styled-components'
+import { apiUrl } from "../env";
+import axios from "axios";
+import mapaBrasil from '../img/mapa-brasil-line-icon.svg';
+import Grid from '@material-ui/core/Grid';
+
+export default function (props) {
+ const [available_resources, setAvailableResources] = useState(0)
+ const [month_publications, setMonthPublications] = useState(0)
+ const [month_downloads, setMonthDownloads] = useState(0)
+
+ useEffect(() => {
+ axios.get(`${apiUrl}/statistics`)
+ .then(
+ (res) => {
+ setAvailableResources(res.data.count)
+ setMonthPublications(res.data.month_publications)
+ setMonthDownloads(res.data.month_downloads)
+ })
+ }, [])
+
+ return (
+ <StatsTab>
+ <StyledGrid container>
+ <Grid item md={6} xs={12} className="first">
+ <img src={mapaBrasil} height="83px" alt="mapa do brasil"/>
+ <span className="total">
+ <span className="numeros">
+ {available_resources}
+ </span>
+ <span className="legenda">
+ Recursos disponÃveis
+ </span>
+ </span>
+ </Grid>
+
+ <Grid item md={6} xs={12} className="second">
+ <span className="title">
+ ESSE MÊS:
+ </span>
+ <span className="enviados">
+ <span className="numeros">
+ {month_downloads}
+ </span>
+
+ <span className="legenda">
+ Baixados
+ </span>
+ </span>
+ <span className="enviados">
+ <span className="numeros">
+ {month_publications}
+ </span>
+
+ <span className="legenda">
+ Publicados
+ </span>
+ </span>
+
+ </Grid>
+ </StyledGrid>
+ </StatsTab>
+ )
+
+}
+
+const StatsTab = styled.div`
+ padding : 20px 0;
+ color : #fff;
+ background-color : #00bcd4;
+`
+
+const StyledGrid = styled(Grid)`
+ vertical-align : middle !important;
+
+ .first {
+ display : flex !important;
+ @media screen and (max-width : 502px) {
+ justify-content : center !important;
+ border-bottom : 1px dotted #fff !important;
+ padding-bottom : 10px !important;
+ }
+ @media screen and (min-width : 502px) {
+ justify-content : right !important;
+ text-align : right !important;
+ border-right : 1px dotted #fff !important;
+ }
+
+ img {
+ height : 70px;
+ }
+
+ }
+
+ .total {
+ text-align : center;
+ display : inline-block;
+ line-height : 1;
+ padding : 0 20px;
+ }
+
+ .numeros {
+ display : block;
+ font-weight : 700;
+ font-size : 2.1em;
+ }
+
+ .legenda {
+ @media screen and (min-width : 502px) {
+ font-size : 1.285em;
+ }
+ font-weight : 300;
+ }
+
+ .title {
+ @media screen and (min-width : 502px) {
+ font-size : 1.42em;
+ }
+ line-height : 1;
+ }
+
+ .enviados {
+ text-align : center;
+ display : inline-block;
+ line-height : 1;
+ padding : 0 20px;
+ }
+
+ .second {
+ @media screen and (min-width : 502px) {
+ padding-left : 20px;
+ }
+ @media screen and (max-width : 502px) {
+ justify-content : center !important;
+ text-align : center !important;
+ padding-top : 10px !important;
+ font-size : 16px;
+ }
+ }
+
+`
diff --git a/src/Pages/HomeFunction.js b/src/Pages/HomeFunction.js
new file mode 100644
index 0000000000000000000000000000000000000000..e2288df46a396c5ff799fadaef313c5554d8d941
--- /dev/null
+++ b/src/Pages/HomeFunction.js
@@ -0,0 +1,39 @@
+/*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, {useState} from 'react';
+import './Styles/Home.css';
+import SearchSection from '../Components/SearchSectionFunction';
+import SubPages from '../Components/AreasSubPagesFunction';
+import StatsBar from '../Components/StatsBarFunction';
+import Funcionalities from '../Components/Funcionalities';
+
+export default function App (props) {
+ const [bannerState, handleChangeBanner] = useState("Recursos")
+
+ const changeBanner = (parameter) => {handleChangeBanner(parameter)}
+
+ return (
+ <React.Fragment>
+ <SearchSection function={changeBanner} banner={bannerState}/>
+ <SubPages banner={bannerState}/>
+ <StatsBar/>
+ <Funcionalities/>
+ </React.Fragment>
+ )
+}
diff --git a/src/img/banner-mobile.jpg b/src/img/banner-mobile.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d44ce9b0fc82df45cd1e9b9a069c6b309392defc
Binary files /dev/null and b/src/img/banner-mobile.jpg differ