From c52c439c2b691fb64d28cc2d373d312f8f0317ed Mon Sep 17 00:00:00 2001
From: kristiandrex <cristiandrestorres@gmail.com>
Date: Fri, 16 Jul 2021 01:22:23 -0500
Subject: [PATCH] Add better responsive design mobile and desktop

---
 .eslintrc.json              |  3 +-
 README.md                   |  9 ++---
 src/components/Champions.js | 13 +++----
 src/components/Header.js    | 28 --------------
 src/components/Nav.js       | 26 +++++++++++++
 src/pages/_app.js           |  4 +-
 src/pages/champions/[id].js | 47 +++++++++++++-----------
 src/pages/index.js          |  5 ++-
 src/styles/index.css        | 73 ++++++++++++++++++++++++++++++++-----
 9 files changed, 132 insertions(+), 76 deletions(-)
 delete mode 100644 src/components/Header.js
 create mode 100644 src/components/Nav.js

diff --git a/.eslintrc.json b/.eslintrc.json
index b1f982a..463197b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -5,6 +5,7 @@
     "quotes": ["error", "double"],
     "semi": ["error", "always"],
     "eol-last": ["error", "always"],
-    "no-unused-vars": "error"
+    "no-unused-vars": "error",
+    "@next/next/no-img-element": "off"
   }
 }
diff --git a/README.md b/README.md
index 56b17e4..f6b905f 100644
--- a/README.md
+++ b/README.md
@@ -5,14 +5,13 @@ Visualize the League of Legends champions.
 ## Screenshots
 
 <div>
-<img src="docs/images/home.png" height="570">
-<img src="docs/images/champion.png" height="570">
+  <img src="docs/images/home.png" height="570">
+  <img src="docs/images/champion.png" height="570">
 </div>
 
-
 ## Upcoming features
 
-- [ ] Desktop design.
+- [x] Desktop design.
 - [ ] Filter champions.
 - [ ] Extract the color of the champions.
 
@@ -20,4 +19,4 @@ Visualize the League of Legends champions.
 
 - [Data Dragon](https://developer.riotgames.com/docs/lol#data-dragon)
 - [Color Hunt](https://colorhunt.co/palette/219713)
-- [FontAwesome](https://fontawesome.com/)
+- [Font Awesome](https://fontawesome.com/)
diff --git a/src/components/Champions.js b/src/components/Champions.js
index 594095f..17df36b 100644
--- a/src/components/Champions.js
+++ b/src/components/Champions.js
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import useObserver from "@/hooks/useObserver";
 import Thumbnail from "./Thumbnail";
 
-function Champions({ version, champions }) {
+function Champions({ champions }) {
   const [limit, setLimit] = useState(10);
   const { ref, inView } = useObserver({ skip: limit >= champions.length });
 
@@ -20,13 +20,10 @@ function Champions({ version, champions }) {
   }
 
   return (
-    <main>
-      <span className="version">Versión: {version}</span>
-      <div className="grid">
-        {items}
-        <div className="observer" ref={ref}></div>
-      </div>
-    </main>
+    <section className="champions">
+      <div className="grid">{items}</div>
+      <div className="observer" ref={ref}></div>
+    </section>
   );
 }
 
diff --git a/src/components/Header.js b/src/components/Header.js
deleted file mode 100644
index a589525..0000000
--- a/src/components/Header.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import Link from "next/link";
-import GithubIcon from "@/assets/github.svg";
-
-function Header() {
-  return (
-    <header>
-      <nav>
-        <Link href="/">
-          <a className="home-link">League of React</a>
-        </Link>
-        <div className="items">
-          <Link href="https://github.com/kristiandrex/league-of-react">
-            <a
-              className="github-link"
-              target="_blank"
-              rel="noreferrer noopener"
-              aria-label="Github repository"
-            >
-              <GithubIcon />
-            </a>
-          </Link>
-        </div>
-      </nav>
-    </header>
-  );
-}
-
-export default Header;
diff --git a/src/components/Nav.js b/src/components/Nav.js
new file mode 100644
index 0000000..ed2aa57
--- /dev/null
+++ b/src/components/Nav.js
@@ -0,0 +1,26 @@
+import Link from "next/link";
+import GithubIcon from "@/assets/github.svg";
+
+function Header() {
+  return (
+    <nav>
+      <Link href="/">
+        <a className="home-link">League of React</a>
+      </Link>
+      <div className="items">
+        <Link href="https://github.com/kristiandrex/league-of-react">
+          <a
+            className="github-link"
+            target="_blank"
+            rel="noreferrer noopener"
+            aria-label="Github repository"
+          >
+            <GithubIcon />
+          </a>
+        </Link>
+      </div>
+    </nav>
+  );
+}
+
+export default Header;
diff --git a/src/pages/_app.js b/src/pages/_app.js
index 36829c1..aa7642a 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -1,10 +1,10 @@
-import Header from "@/components/Header";
+import Nav from "@/components/Nav";
 import "@/styles/index.css";
 
 function App({ Component, pageProps }) {
   return (
     <div className="app">
-      <Header />
+      <Nav />
       <Component {...pageProps} />
     </div>
   );
diff --git a/src/pages/champions/[id].js b/src/pages/champions/[id].js
index cd9ce94..e37c470 100644
--- a/src/pages/champions/[id].js
+++ b/src/pages/champions/[id].js
@@ -1,6 +1,4 @@
 import Head from "next/head";
-import Image from "next/image";
-import * as Vibrant from "node-vibrant";
 
 export async function getStaticPaths() {
   const { champions } = require("@/public/data/latest.json");
@@ -31,30 +29,37 @@ export async function getStaticProps(context) {
 }
 
 function Champion({ champion }) {
-  const handleLoad = (event) => {
-    Vibrant.from(event.target.src)
-      .getPalette()
-      .then((palette) => console.log(palette.Vibrant.getHex()))
-      .catch((error) => console.error(error));
-  };
-
   return (
     <>
       <Head>
         <title>{champion.name} - League of React</title>
       </Head>
-      <div className="details">
-        <h1 className="name">{champion.name}</h1>
-        <span className="title">{champion.title}</span>
-        <Image
-          className="image"
-          src={`http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${champion.id}_0.jpg`}
-          alt={champion.name}
-          height="560"
-          crossOrigin="anonymous"
-          onLoad={handleLoad}
-        />
-      </div>
+      <main>
+        <span className="version">Versión: {champion.version}</span>
+        <section className="champion">
+          <div className="details">
+            <h1 className="name">{champion.name}</h1>
+            <span className="title">{champion.title}</span>
+          </div>
+          <div className="images">
+            <img
+              src={`http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${champion.id}_0.jpg`}
+              alt={champion.name}
+              className="vertical"
+              loading="lazy"
+              crossOrigin="anonymous"
+            />
+
+            <img
+              src={`http://ddragon.leagueoflegends.com/cdn/img/champion/splash/${champion.id}_0.jpg`}
+              alt={champion.name}
+              className="horizontal"
+              loading="lazy"
+              crossOrigin="anonymous"
+            />
+          </div>
+        </section>
+      </main>
     </>
   );
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index c552e1e..5d3b7a2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -18,7 +18,10 @@ function Home({ version, champions }) {
       <Head>
         <title>League of React</title>
       </Head>
-      <Champions version={version} champions={champions} />
+      <main>
+        <span className="version">Versión: {version}</span>
+        <Champions champions={champions} />
+      </main>
     </>
   );
 }
diff --git a/src/styles/index.css b/src/styles/index.css
index ea015e6..b128c31 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -58,7 +58,9 @@ nav .items {
 }
 
 main {
-  padding: 1rem 5%;
+  width: 90%;
+  margin: 1rem auto;
+  max-width: 1100px;
   text-align: center;
 }
 
@@ -73,9 +75,13 @@ main .version {
 }
 
 main .grid {
+  background: var(--LIGHT_GRAY);
+  padding: 1rem;
   display: grid;
   gap: 1rem;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fill, 120px);
+  justify-content: space-between;
+  border-radius: 0.5rem;
 }
 
 .thumbnail {
@@ -90,27 +96,74 @@ main .grid {
 
 .thumbnail .name {
   font-weight: bold;
+  display: block;
 }
 
-.details {
-  text-align: center;
+.champion {
+  background-color: var(--LIGHT_GRAY);
   padding: 1rem;
+  border-radius: 0.5rem;
+  gap: 1rem;
 }
 
-.details .name {
+.champion .name {
   margin: 0;
 }
 
-.details .title {
+.champion .title {
   font-weight: bold;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin: 1rem 0;
   font-size: 0.85rem;
 }
 
-.details img {
-  width: 100%;
-  height: 100%;
+.champion .images img {
   border-radius: 0.5rem;
 }
+
+.champion .images .vertical {
+  width: 100%;
+}
+
+.champion .images .horizontal {
+  display: none;
+}
+
+@media screen and (min-width: 400px) {
+  main .grid {
+    grid-template-columns: repeat(auto-fill, 100px);
+  }
+}
+
+@media screen and (min-width: 475px) {
+  .champion {
+    display: grid;
+    grid-template-areas: "image details";
+    grid-auto-columns: 1fr auto;
+  }
+
+  .champion .details {
+    grid-area: details;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  .champion .images .vertical {
+    display: none;
+  }
+
+  .champion .images .horizontal {
+    display: inline-block;
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  main .grid {
+    grid-template-columns: repeat(auto-fill, 150px);
+  }
+}