Merge pull request #3 from HubM/develop

💄 improve ui
HubM · Feb 11, 2021 · c6bef15 · c6bef15
2 parents 284a365 + e2ece06
commit c6bef15
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 8 deletions.
diff --git a/src/components/views/Actor.js b/src/components/views/Actor.js
@@ -76,7 +76,7 @@ class Actor extends React.Component {
           <div className="layout-single__left-main">
             { actorBirthday && birthPlace && <p><span role="img" aria-label="emoji poussin">🐣</span> {actorBirthday} - {birthPlace}</p>}
             { actorDetails.deathday && <p><span role="img" aria-label="emoji cerceuil">⚰️</span> {actorDeathday}</p>}
-            { actorDetails.biography && <p className="textAlignLeft"><span role="img" aria-label="emoji style plume">🖋</span> {actorDetails.biography}</p>}
+            { actorDetails.biography && <p className="textAlignLeft longText"><span role="img" aria-label="emoji style plume">🖋</span> {actorDetails.biography}</p>}
           </div>
         </div>
       </div>
@@ -98,7 +98,7 @@ class Actor extends React.Component {
   renderActorMovies = actorMovies => {
     const sortedActorMovies = actorMovies.cast.sort((prevMovie, nextMovie) => prevMovie.vote_average > nextMovie.vote_average ? -1 : 1).slice(0,12)
     return (
-      <div className="layout-single__right movies-section">
+      <div className="layout-single__right movies-section actor-movies">
         <h2>Films</h2>
         <ul className="layout-list movies-list">{ sortedActorMovies.map(movie => this.renderMovie(movie))}</ul>
       </div>

diff --git a/src/components/views/Movie.js b/src/components/views/Movie.js
@@ -150,9 +150,9 @@ class Movie extends React.Component {
 
               <div className="layout-single__left-main">
                 <p className="movie-details__release"><span role="img" aria-label="emoji calendrier">🗓</span> {moment(details.release_date).format("DD/MM/YYYY")}</p>
-                <p><span role="img" aria-label="emoji étoile">⭐️</span> {details.vote_average}/10</p>
+                { details.vote_average && <p><span role="img" aria-label="emoji étoile">⭐️</span> {details.vote_average}/10</p>}
                 { budget && <p><span role="img" aria-label="emoji dollar">💵</span> {budget}</p> }
-                <p><span role="img" aria-label="emoji stylo plume">🖋</span> {details.overview}</p>
+                { details.overview && <p className="longText"><span role="img" aria-label="emoji stylo plume">🖋</span> {details.overview}</p>}
 
                 <ul className="movie-details__genders" arial-label="genres"> 
                   {

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -71,6 +71,10 @@ h2 { font-size: var(--h2FS); }
   text-align: left;
 }
 
+.longText {
+  line-height: 1.5;
+}
+
 /* =============
 === LOADING
 ================ */
@@ -121,6 +125,7 @@ header {
 }
 
 .header-first-level {
+  height: 60px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -295,13 +300,16 @@ nav > ul > li > a {
   top: 0;
   right: 0;
   padding: 10px;
-  cursor: pointer;
   font-size: 1.4rem;
   font-weight: 500;
   transform: rotate(45deg) translateY(-10%);
   transition: transform 0.3s ease-in;
 }
 
+.search-input.usable + .reset-search {
+  cursor: pointer;
+}
+
 .reset-search:hover {
   transform: rotate(45deg) translateY(-10%) scale(1.1);
 }
@@ -322,7 +330,7 @@ nav > ul > li > a {
   grid-gap: 40px;
   width: 100%;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  align-items: center;
+  align-items: flex-start;
   margin: 25px 0 50px 0;
 }
 
@@ -361,10 +369,18 @@ nav > ul > li > a {
   opacity: 1;
 }
 
+.movie-card:hover .movie-card__img ,
+.movie-card:focus .movie-card__img {
+  filter: grayscale(0);
+}
+
 .movie-card__img {
-  max-height: 300px;
+  width: 200px;
+  max-height: 275px;
   border-radius: 5px;
   margin-bottom: 15px;
+  filter: grayscale(1);
+  transition: all 0.3s ease-in;
 }
 
 .movie-card__title {
@@ -381,7 +397,7 @@ nav > ul > li > a {
   margin-top: 20px;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
 } 
 
 /* ====================
@@ -481,6 +497,12 @@ nav > ul > li > a {
   width: 150px;
   filter: grayscale(1);
   border-radius: 5px;
+  transition: filter 0.3s ease-in;
+}
+
+.movie-details__actor:hover img,
+.movie-details__actor:focus img {
+  filter: grayscale(0);
 }
 
 .movie-details__actor p {
@@ -506,6 +528,14 @@ nav > ul > li > a {
   margin: 10px 0 40px 0;
 }
 
+.actor-movies {
+  margin-top: 50px
+}
+
+.actor-movies h2 {
+  text-align: center;
+}
+
 
 /* ====================
 === PAGINATION