Skip to content

Commit

Permalink
Add better responsive design mobile and desktop #2
Browse files Browse the repository at this point in the history
  • Loading branch information
kristiandrex authored Jul 16, 2021
2 parents 8361492 + c52c439 commit 4a724fe
Show file tree
Hide file tree
Showing 9 changed files with 132 additions and 76 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
9 changes: 4 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,18 @@ 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.

## Resources

- [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/)
13 changes: 5 additions & 8 deletions src/components/Champions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 });

Expand All @@ -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>
);
}

Expand Down
28 changes: 0 additions & 28 deletions src/components/Header.js

This file was deleted.

26 changes: 26 additions & 0 deletions src/components/Nav.js
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions src/pages/_app.js
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
47 changes: 26 additions & 21 deletions src/pages/champions/[id].js
Original file line number Diff line number Diff line change
@@ -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");
Expand Down Expand Up @@ -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>
</>
);
}
Expand Down
5 changes: 4 additions & 1 deletion src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
}
Expand Down
73 changes: 63 additions & 10 deletions src/styles/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@ nav .items {
}

main {
padding: 1rem 5%;
width: 90%;
margin: 1rem auto;
max-width: 1100px;
text-align: center;
}

Expand All @@ -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 {
Expand All @@ -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);
}
}

1 comment on commit 4a724fe

@vercel
Copy link

@vercel vercel bot commented on 4a724fe Jul 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.