diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 3bbb14e30b81b0c055bdec39634dfd544042a63d..4f215989ed8a0707c97abee43a3d602d748e84bb 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -32,7 +32,7 @@ import colecoes_obj from './FormationMaterialsResources/formationMaterials';
import ExpandedMaterial from './ExpandedMaterials';
import {getRequest} from './HelperFunctions/getAxiosConfig.js'
import Grid from '@material-ui/core/Grid';
-
+import {Link} from 'react-router-dom'
function objectsPerPage () {
var pageWidth = window.innerWidth
@@ -170,6 +170,12 @@ function TabRecurso () {
{text}
</p>
</Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{display : "flex", justifyContent : "center"}}>
+ <Link to={`/busca?query=&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
+ </div>
+ }
</StyledTab>
</div>
{
@@ -221,6 +227,12 @@ function TabColecoes () {
{text}
</p>
</Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{display : "flex", justifyContent : "center"}}>
+ <Link to={`/busca?query=&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
+ </div>
+ }
</StyledTab>
</div>
{
@@ -288,6 +300,12 @@ function TabMateriais () {
{text}
</p>
</Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{display : "flex", justifyContent : "center"}}>
+ <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
+ </div>
+ }
</StyledTab>
</div>
{
@@ -402,4 +420,14 @@ const StyledTab = styled(Grid)`
line-height : 1.42857143;
}
+ .button-ver {
+ font-size: 14px;
+ padding: 5px 10px;
+ border: solid 2px #fff;
+ border-radius: 7px;
+ color: #fff;
+ cursor: pointer;
+ text-decoration: none;
+ }
+
`
diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js
index 8e372592af363069316c963dbd0a65b0448fe8f3..b6c2b5554c3ab96afc996dc7f409a95d7bdbec6b 100644
--- a/src/Components/HomeScreenSearchBar.js
+++ b/src/Components/HomeScreenSearchBar.js
@@ -17,21 +17,20 @@ 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 { List, ListItem, ListItemIcon, ListItemText, MenuItem, Button, 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 [ query, setQuery ] = useState("")
const [ searchClass, setSearchClass ] = useState('LearningObject')
- const { state, dispatch } = useContext(Store)
+ const { dispatch } = useContext(Store)
const [ goSearch, setGoSearch ] = useState(false)
@@ -93,20 +92,20 @@ export default function HomeScreenSearchBar (props) {
return (
- <Bar>
- <Grid container>
- <Grid item xs={7}>
- <TextField
+ <StyledGrid container>
+ <Grid item md={7} xs={12} className="first white">
+ <StyledTextField
id="standard-search"
- placeholder="O que você está buscando"
+ placeholder="O que está buscando?"
type="search"
margin="normal"
value={query}
onChange={handleChange}
onKeyPress={handleKeyDown}
+ fullwidth
/>
</Grid>
- <Grid item xs={3}>
+ <Grid item md={3} xs={12} className="second white">
<List component="nav" aria-label="Recurso">
<ListItem
button
@@ -143,32 +142,94 @@ export default function HomeScreenSearchBar (props) {
))}
</Menu>
</Grid>
- <Grid item xs={2}>
+ <Grid item md={2} xs={12}>
<div style={{height : "100%"}}>
- <Link to ="/busca">
+ <Link to={`/busca?query=${query}&search_class=${searchClass}`}>
<Button className="custom-button" style={{backgroundColor : options[selectedIndex].color, color : "#fff"}}>
+ {
+ WIDTH < 503 &&
+ <span>Buscar</span>
+ }
<SearchIcon fontSize="large"/>
</Button>
</Link>
</div>
</Grid>
- </Grid>
- </Bar>
+ </StyledGrid>
)
}
-const Bar = styled.div`
- background-color : #fff !important;
- border-radius : 5px !important;
+const StyledTextField = styled(TextField)`
+ max-width: 100%;
+ font-size : 15px;
+ font-weight : lighter;
+ color : inherit;
+ width : 90% !important;
+ margin-right : 10px !important;
+ margin-left : 10px !important;
+ .MuiInput-underline::after {
+ border-bottom : none !important;
+ }
+`
+
+const StyledGrid = styled(Grid)`
+ padding-top : 20px;
+
+ .MuiGrid-item {
+ @media screen and (max-width : 502px) {
+ border-radius : 5px;
+ margin-bottom : 10px !important;
+ }
+ }
+
+ .first {
+ @media screen and (max-width : 502px) {
+ margin-top : 10px;
+ }
+ @media screen and (min-width : 502px) {
+ border-top-left-radius : 5px;
+ border-bottom-left-radius : 5px;
+ }
+ }
+
+ .white {
+ background-color : #fff;
+ }
+
.MuiList-root {
- border-left: 1px solid #ccc !important;
+ @media screen and (min-width : 502px) {
+ border-left: 1px solid #ccc !important;
+ }
+
+ }
+ .MuiPaper-root {
+ width : 100% !important;
+ }
+ .MuiPopover-paper {
+ max-width : none !important;
}
.custom-button {
height: 100% !important;
width: 100% !important;
- border-top-right-radius: 0 !important;
- border-top-left-radius: 0 !important;
margin: 0 !important;
+ text-transform : none !important;
+ align-items : center !important;
+
+ @media screen and (max-width : 502px) {
+ padding-top : 10px;
+ border-radius : 5px;
+ }
+
+ @media screen and (min-width : 502px) {
+ border-radius : 0 !important;
+ border-top-right-radius : 5px !important;
+ border-bottom-right-radius : 5px !important;
+ }
+
+ .MuiSvgIcon-root {
+ vertical-align : middle !important;
+ }
+
}
`
diff --git a/src/Components/SearchSectionFunction.js b/src/Components/SearchSectionFunction.js
index 028fb37b44737cb3788e51f4212d8d6fd6c69ccb..97d5a43977d986fa5e890ec2f102375008f64f29 100644
--- a/src/Components/SearchSectionFunction.js
+++ b/src/Components/SearchSectionFunction.js
@@ -124,6 +124,8 @@ const Banner = styled.div`
.links {
margin-top : 20px;
color : white;
+ display : flex;
+ justify-content : space-around;
a {
color : #fff;