Project Movies by Michelle Wegler & Maja Zimnoch #313
Conversation
Fix responsivity
| import NotFound from 'components/NotFound'; | ||
| import Details from 'components/Details'; | ||
| import ListMovies from 'components/ListMovies'; | ||
| import { LIST_URL } from 'utils/urls.js'; |
| /* eslint-disable max-len */ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { useParams } from 'react-router-dom'; | ||
| import '../details.css'; |
There was a problem hiding this comment.
Good job with making separate css-files!
| <div className="title-rating-text"> | ||
| <h1 className="title-rating-container"> | ||
| <span className="title-details title-details-margin">{movieDetail.title}</span> | ||
| <span className="rating">⭐{Math.round(movieDetail.vote_average * 10) / 10}</span> |
There was a problem hiding this comment.
If you would have wanted to have the rating as out of 10, you could add the text /10 after the last curly bracket and before the closing bracket.
| import '../details.css'; | ||
|
|
||
| // Define the Details component | ||
| const Details = () => { |
There was a problem hiding this comment.
We noticed that when refreshing your details page, we get the Netlify error page. We have the same problem and do not know why this happens. If you find the problem, please let us know.
| import React from 'react'; | ||
| import { NavLink } from 'react-router-dom'; | ||
| import GitIcon from '../assets/github.png'; | ||
| import MovieIcon from '../assets/movie.png'; |
There was a problem hiding this comment.
Super cute icon! We're stealing the idea!
| @@ -0,0 +1,26 @@ | |||
| import React from 'react'; | |||
| import { NavLink } from 'react-router-dom'; | |||
| import GitIcon from '../assets/github.png'; | |||
There was a problem hiding this comment.
Another way of solving this if you would like more social media icons is to import Font Awesome icons (like we did but we put it in the footer). We wanted to post code but for some reason it does not display in the comment?
To make the icons show one also has to import them in the top of the component. If you would like to know more then we can discuss it on the Monday session!
| <img className="cover-image" src={movie.poster_path ? `https://image.tmdb.org/t/p/w342${movie.poster_path}` : ''} alt="poster" /> | ||
| <div className="hover-container"> | ||
| <h1 className="text-hover">{movie.original_title}</h1> | ||
| <p className="text-hover">Released: {moment(movie.release_date).format('D MMMM YYYY')}</p> |
There was a problem hiding this comment.
Nice way of showing the release date!
Linkt to the deployed page:
https://michelle-maja-movies.netlify.app/