Formation material page + iframe done

src/Components/IframeOverlay.js

+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import ExpandButton from './IframeOverlay/ExpandButton.js';
+import Drawer from '@material-ui/core/Drawer';
+import DrawerContent from './IframeOverlay/DrawerContent.js';
+
+export default function IframeOverlay(props) {
+	const [expanded, setExpanded] = useState(false);
+	
+	const handleClickButton = () => {
+		setExpanded(!expanded);
+	}
+	
+	const closeDrawer = () => {
+		setExpanded(false);
+	}
+
+  return (
+		<div>
+			<WrapperDiv>
+				<ExpandButton
+					onClick={handleClickButton}
+					expanded={expanded}
+				/>
+			</WrapperDiv>
+			<StyledDrawer anchor="right" open={expanded} onClose={closeDrawer}>
+				<DrawerContent tag={props.tag}/>
+			</StyledDrawer>
+		</div>
+  );
+}
+
+const WrapperDiv=styled.div`
+	position: absolute;
+	right: 0;
+	top: 200px;
+	z-index: 2;
+`
+const StyledDrawer=styled(Drawer)`
+	overflow-y: scroll;
+`

src/Components/IframeOverlay/DrawerContent.js

+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import axios from 'axios';
+import Grid from '@material-ui/core/Grid';
+import SearchInput from './SearchInput.js';
+import ResourceCard from './ResourceCard.js';
+import { apiUrl } from '../../env';
+import SmallFooter from './SmallFooter.js';
+
+export default function DrawerContent(props) {
+	const [resources, setResources] = useState([]);
+
+	const search = (query) => {
+		axios.get(`${apiUrl}/search?
+			page=0&results_per_page=5&query=${query}&search_class=LearningObject`)
+			.then(res => {
+				setResources(res.data);
+			});
+	}
+
+	useEffect(() => {
+		search(props.tag);
+		}, [props.tag]);
+
+	useEffect(() => {
+		console.log(resources);
+	}, [resources]);
+
+	return(
+		<Wrapper container
+			direction="row"
+			justify="center"
+			alignItems="flex-start"
+		>
+			<Grid item xs={11}>
+				<SearchInput stdin={props.tag} search={search}/>
+			</Grid> 
+			<Grid item xs={11}>
+				<Description>
+					Recursos Relacionados na Plataforma MEC:
+				</Description>
+			</Grid>
+			{resources.map(r => {
+				return(
+					<Grid item xs={11}>
+						<ResourceCard
+							id={r.id}
+							name={r.name}
+							likes={r.likes_count}
+						/>
+					</Grid>
+				);}
+			)}
+			<Grid item xs={12}>
+				<SmallFooter />
+			</Grid>
+		</Wrapper>
+		);
+}
+
+const Wrapper=styled(Grid)`
+	min-width: 400px;
+	max-width: 400px;
+	background-color: #666;
+	height: 100%;
+	overflow-x: scroll !important;
+`
+const Description=styled.p`
+	color: white;
+	margin-left: 20px !important;
+	margin-right: 20px !important;
+`

src/Components/IframeOverlay/ExpandButton.js

+import React from 'react';
+import AddIcon from '@material-ui/icons/Add';
+import RemoveIcon from '@material-ui/icons/Remove';
+import IconButton from '@material-ui/core/IconButton';
+import styled from 'styled-components';
+
+export default function ExpandButton(props) {
+  return (
+		<IconWrapper>
+			<IconButton
+				onClick={props.onClick}
+				style={{color: 'white'}}
+			>
+				{ props.expanded ? <RemoveIcon /> : <AddIcon /> }
+			</IconButton>
+		</IconWrapper>
+  );
+}
+
+const IconWrapper=styled.div`
+	background-color: #5dbcd2;
+	border-radius: 15px 0px 0px 15px;
+`

src/Components/IframeOverlay/ResourceCard.js

+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+import WhiteAreaOfCard from './WhiteAreaOfCard.js';
+
+export default function ResourceCard(props) {
+	return(
+		<Anchor
+			to={'/recurso?id='+props.id
+					+'&name='+props.name}
+		>
+			<CardPaper elevation={3}>
+				<Grid container
+					direction="row"
+					justify="flex-start"
+					alignItems="center"
+				>
+					<Grid item>
+						<Img src="https://api.portalmec.c3sl.ufpr.br/system/learning_objects/thumbnails/000/032/128/original/1427119781385_thumb_w300_h160.jpg?1544253610" />
+					</Grid>
+					<Grid item>
+						<WhiteAreaOfCard name={props.name} likes={props.likes} />
+					</Grid>
+				</Grid>
+			</CardPaper>
+		</Anchor>
+	);
+}
+
+const CardPaper=styled(Paper)`
+	width: 312px;
+	height: 100px;
+	margin-bottom: 15px;
+	margin-left: 20px;
+	margin-right: 20px;
+`
+const Img=styled.img`
+	height: 100px;
+	width: 150px;
+`
+const Anchor=styled(Link)`
+	text-decoration: none !important;
+	color: inherit !important;
+`

src/Components/IframeOverlay/SearchInput.js

+import React, { useState } from 'react';
+import styled from 'styled-components';
+import SearchIcon from '@material-ui/icons/Search';
+import IconButton from '@material-ui/core/IconButton';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import FormControl from '@material-ui/core/FormControl';
+
+export default function SearchInput(props) {
+	const [text, setText] = useState(props.stdin);
+
+	const handleChange = (event) => {
+		setText(event.target.value);
+	}
+
+	const handleClickSearch = () => {
+		props.search(text);
+	}
+
+	return (
+		<Wrapper>
+			<FormControl variant="outlined" style={{width: '100%'}}>
+				<OutlinedInput
+					type="text"
+					value={text}
+					onChange={handleChange}
+					endAdornment={
+						<InputAdornment position="end">
+							<IconButton
+								onClick={handleClickSearch}
+								edge="end"
+							>
+								<SearchIcon />
+							</IconButton>
+						</InputAdornment>
+					}
+				/>
+			</FormControl>
+		</Wrapper>
+	);
+}
+const Wrapper=styled.div`
+	background-color: white;
+	border-radius: 5px;
+	margin: 20px;	
+
+`

src/Components/IframeOverlay/SmallFooter.js

+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import ImgInfo from '../../img/acesso-a-informacao.png';
+
+export default function SmallFooter(props) {
+	return(
+		<Wrapper>
+		<SecondaryWrapper>
+			<ImgDiv>
+				<a
+					alt="Governo Federal"
+					href="http://www.brasil.gov.br/"
+					target="_blank"
+				>
+					<Img src={ImgInfo} />
+				</a>
+			</ImgDiv>
+			<TextDiv>
+				2017
+				<br />
+				C3SL-UFPR | FNDE | NUTE-UFSC | MEC.
+				<br />
+				Todos os direitos reservados.
+			</TextDiv>
+		</SecondaryWrapper>
+		</Wrapper>
+	);
+}
+
+const Wrapper=styled.div`
+	width: 100%;
+	background-color: #444;
+	color: white;
+	padding-top: 30px;
+	padding-bottom: 30px;
+`
+const ImgDiv=styled.div`
+	border-right: 2px solid #666;
+	padding: 5px;
+	display: inline-block;
+`
+const Img=styled.img`
+	width: 100px;
+`
+const TextDiv=styled.div`
+	padding-left: 5px;
+	display: inline-block;
+	line-height: 12px;
+	font-size: 0.7em;
+	text-align: center;
+`
+const SecondaryWrapper=styled.div`
+	margin-left: 25px;
+	margin-right: 20px;
+`

src/Components/IframeOverlay/WhiteAreaOfCard.js

+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import OndemandVideoIcon from '@material-ui/icons/OndemandVideo';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import IconButton from '@material-ui/core/IconButton';
+
+export default function WhiteAreaOfCard(props) {
+	return(
+		<Grid container
+			style={{height: '90px', width: '150px'}}
+			direction="column"
+			justify="space-between"
+			alignItems="flex-start"
+		>
+			<Grid item>
+				<Title>
+					{props.name}
+				</Title>	
+			</Grid>
+			<Grid item>
+				<IconsDiv>
+					<OndemandVideoIcon />
+					<RightFavoriteIcon />
+				</IconsDiv>
+			</Grid>
+		</Grid>
+	);
+}
+
+const Title=styled.span`
+	margin-left: 5px;
+	font-size: 14px;
+	position: relative;
+	top: 0;
+	margin-top: 0;
+	pading-top: 0;
+	color: #666;
+	overflow: hidden;
+	text-overflow: ellipsis;
+
+	display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`
+const IconsDiv=styled.div`
+	margin-left: 5px;
+	margin-right: 5px;
+	color: #666 !important;
+	width: 150px;
+	position: relative;
+	top: 0;
+`
+const RightFavoriteIcon=styled(FavoriteIcon)`
+	position: absolute;
+	right: 0;
+`

src/Pages/FormationMaterialIframe.js

@@ -18,6 +18,7 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 import React from 'react';
 import styled from 'styled-components';
 import colecoes_obj from '../Components/FormationMaterialsResources/formationMaterials.js';
+import IframeOverlay from '../Components/IframeOverlay.js';
 
 export default function FormationMaterialIframe(props) {
 	const colecao = props.location.pathname == "/colecao";
@@ -45,13 +46,16 @@ export default function FormationMaterialIframe(props) {
 	})(topico_id);
 
 	return (
+		<div>
 			<StyledIframe src={topico_obj.url}
 			/>
+			<IframeOverlay tag={colecao_obj.tags[0].name}/>
+		</div>
 	);
 }
 
 const StyledIframe=styled.iframe`
-	width: 98.vw;
+	width: 98.9vw;
 	height: 83.5vh;
 	min-height: 300px;
 `