Skip to content

Commit 229ce79

Browse files
TwoZer00TwoZer00
committed
fix: improve responsive layout across Header, Home, Detailed, Flag cards, Higher/Lower, and Guess the Country
1 parent ef131b2 commit 229ce79

8 files changed

Lines changed: 47 additions & 62 deletions

File tree

‎src/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function App() {
4444
className={`flex flex-col min-h-screen h-screen dark:bg-dark-fe background transition-colors`}
4545
>
4646
<Header dark={dark} setDark={setDark} />
47-
<div className="h-full overflow-auto pt-20">
47+
<div className="h-full overflow-auto pt-16 sm:pt-20">
4848
<DataContext.Provider value={data}>
4949
<Routes>
5050
<Route path="/" element={<Home data={data} />} />

‎src/components/Header/Header.jsx‎

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,56 +6,44 @@ import {
66
MoonIcon as MoonIconSolid,
77
PuzzlePieceIcon as PuzzleIconSolid,
88
} from "@heroicons/react/24/solid";
9-
import React from "react";
109
import { Link } from "react-router-dom";
1110

1211
export const Header = ({ dark, setDark }) => {
1312
const handleDark = () => {
14-
if (dark) {
15-
setDark(false);
16-
localStorage.setItem("dark", false);
17-
} else {
18-
setDark(true);
19-
localStorage.setItem("dark", true);
20-
}
13+
setDark(!dark);
14+
localStorage.setItem("dark", !dark);
2115
};
16+
2217
return (
23-
<header className="fixed w-full text-sm lg:text-base transition-colors flex flex-row h-20 items-center bg-white/10 backdrop-blur-sm dark:border-0 shadow-lg px-5 lg:px-10 dark:text-white dark:bg-dark-mode-ligth/20">
24-
<div className="w-full">
25-
<Link to={"/"} className="font-bold flex flex-row items-center gap-2">
18+
<header className="fixed w-full z-50 text-sm lg:text-base transition-colors flex flex-row h-16 sm:h-20 items-center bg-white/10 backdrop-blur-sm dark:border-0 shadow-lg px-4 sm:px-5 lg:px-10 dark:text-white dark:bg-dark-mode-ligth/20">
19+
<div className="flex-1 min-w-0">
20+
<Link to="/" className="font-bold flex flex-row items-center gap-2">
2621
<img
27-
src={dark ? "/wiw1.svg" : "wiw.svg"}
22+
src={dark ? "/wiw1.svg" : "/wiw.svg"}
2823
alt="Where in the world logo"
29-
className={`w-auto h-8 lg:h-10 ${dark ? "bg-white" : "bg-black"} rounded-full p-1 background`}
24+
className={`w-auto h-7 sm:h-8 lg:h-10 ${dark ? "bg-white" : "bg-black"} rounded-full p-1 shrink-0`}
3025
/>
31-
Where in the world?
26+
<span className="hidden sm:inline truncate">Where in the world?</span>
3227
</Link>
3328
</div>
34-
<nav className="w-auto flex flex-row gap-x-2">
29+
<nav className="flex flex-row gap-x-3 sm:gap-x-4 items-center shrink-0">
3530
<button
36-
className="whitespace-nowrap font-semibold flex flex-row gap-x-2 items-center"
31+
className="font-semibold flex flex-row gap-x-1 items-center"
3732
onClick={handleDark}
33+
aria-label="Toggle dark mode"
3834
>
39-
{dark ? (
40-
<MoonIconSolid className="h-5 w-5" />
41-
) : (
42-
<MoonIcon className="h-5 w-5" />
43-
)}
44-
Dark mode
35+
{dark ? <MoonIconSolid className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
36+
<span className="hidden sm:inline">Dark mode</span>
4537
</button>
4638
<Link
47-
to={"/games"}
48-
className="font-semibold flex flex-row gap-x-2 items-center"
39+
to="/games"
40+
className="font-semibold flex flex-row gap-x-1 items-center"
4941
>
50-
{dark ? (
51-
<PuzzleIconSolid className="w-5 h-5"></PuzzleIconSolid>
52-
) : (
53-
<PuzzleIcon className="w-5 h-5"></PuzzleIcon>
54-
)}
55-
Play
42+
{dark ? <PuzzleIconSolid className="w-5 h-5" /> : <PuzzleIcon className="w-5 h-5" />}
43+
<span className="hidden sm:inline">Play</span>
5644
</Link>
5745
<a
58-
className="font-bold"
46+
className="font-bold hidden md:inline"
5947
href="https://twozer00.dev"
6048
target="_blank"
6149
rel="noreferrer"

‎src/components/Main/Detailed.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ export const Detailed = ({ data }) => {
4949
}
5050

5151
return (
52-
<div className="flex flex-col w-11/12 mx-auto dark:text-white transition-colors items-center justify-center h-full max-h-full">
53-
<div className="dark:bg-white/10 backdrop-blur-sm p-5 rounded">
54-
<div className="py-5">
52+
<div className="flex flex-col w-11/12 mx-auto dark:text-white transition-colors items-center justify-center h-full max-h-full overflow-auto py-4">
53+
<div className="dark:bg-white/10 backdrop-blur-sm p-4 sm:p-5 rounded">
54+
<div className="py-3 sm:py-5">
5555
<button
5656
onClick={() => navigate(-1)}
5757
className="border rounded px-4 flex flex-row-reverse items-center hover:bg-dark-mode-ligth/10 transition-colors"
@@ -60,7 +60,7 @@ export const Detailed = ({ data }) => {
6060
<ArrowLeftIcon className="w-4 h-4 stroke-2" />
6161
</button>
6262
</div>
63-
<div className="flex flex-col md:flex-row items-center gap-x-4">
63+
<div className="flex flex-col md:flex-row items-center gap-4">
6464
<div className="md:w-1/2">
6565
<img src={countryDetails.flags.svg} alt={countryDetails.name.common} />
6666
</div>

‎src/components/Main/Flag.jsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
1-
import React from "react";
2-
31
export const Flag = ({ data }) => {
4-
// console.log(data);
52
return (
6-
<div className="flex flex-col shadow-lg rounded overflow-hidden bg-white dark:bg-dark-mode-ligth dark:text-white min-h-[350px]">
3+
<div className="flex flex-col shadow-lg rounded overflow-hidden bg-white dark:bg-dark-mode-ligth dark:text-white min-h-[300px] sm:min-h-[350px]">
74
<div className="flex-none">
85
<img
9-
src={`${data.flags.svg}`}
6+
src={data.flags.svg}
107
alt={data.name.common}
118
className="w-full"
129
loading="lazy"
1310
/>
1411
</div>
15-
<div className="flex flex-col p-5 w-full h-full justify-center">
12+
<div className="flex flex-col p-4 sm:p-5 w-full h-full justify-center">
1613
<h1 className="font-bold mb-2">{data.name.common}</h1>
1714
<div className="text-sm">
1815
<p>

‎src/components/Main/Home.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@ export const Home = ({ data }) => {
3636
return (
3737
<div className="h-full overflow-auto">
3838
<div className="max-w-[1440px] mx-auto">
39-
<div className="flex flex-col lg:flex-row lg:h-12 px-10 gap-7 my-8">
39+
<div className="flex flex-col lg:flex-row lg:h-12 px-4 sm:px-10 gap-4 sm:gap-7 my-6 sm:my-8">
4040
<div className="w-full h-12">
4141
<Search onSearch={(value) => { setSearch(value); setVisible(PAGE_SIZE); }} />
4242
</div>
4343
<select
44-
className="h-12 w-1/2 lg:h-full bg-white dark:bg-dark-mode-ligth dark:text-white rounded shadow px-3"
44+
className="h-12 w-full sm:w-1/2 lg:h-full bg-white dark:bg-dark-mode-ligth dark:text-white rounded shadow px-3"
4545
defaultValue="0"
4646
onChange={handleRegionChange}
4747
>
@@ -54,7 +54,7 @@ export const Home = ({ data }) => {
5454
<option value="6">All</option>
5555
</select>
5656
</div>
57-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 w-full justify-items-center gap-16 px-10 pb-10">
57+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 w-full justify-items-center gap-8 sm:gap-16 px-4 sm:px-10 pb-10">
5858
{filtered.slice(0, visible).map((element) => (
5959
<Link
6060
key={element.ccn3}

‎src/games/GameC.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -258,24 +258,24 @@ export default function GameC() {
258258
<div className="dark:text-white h-full flex flex-col items-center justify-center overflow-x-hidden overflow-y-auto">
259259
<div className="flex w-full flex-col bg-white/10 backdrop-blur-sm lg:w-fit p-4 rounded-lg gap-4">
260260
<div className="text-center">
261-
<h1 className="font-bold text-4xl">What's the country?</h1>
262-
<small>
261+
<h1 className="font-bold text-2xl sm:text-4xl">What's the country?</h1>
262+
<small className="hidden sm:block">
263263
Click boxes for more details, every box has a cost that reduces your score.
264264
</small>
265265
</div>
266266

267-
<div className="flex items-center justify-between text-sm px-4">
267+
<div className="flex items-center justify-between text-sm px-1 sm:px-4">
268268
<span className="font-semibold">{answered} / {total}</span>
269-
<span className="font-semibold">Score: {score} <span className="text-xs opacity-50">({totalScore} pts possible)</span></span>
269+
<span className="font-semibold text-xs sm:text-sm">Score: {score} <span className="text-xs opacity-50">({totalScore} pts)</span></span>
270270
</div>
271-
<div className="w-full h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden mx-auto px-4">
271+
<div className="w-full h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden">
272272
<div
273273
className="h-full bg-valid rounded-full transition-all duration-500"
274274
style={{ width: `${progress}%` }}
275275
/>
276276
</div>
277277

278-
<div className="flex flex-col lg:flex-row gap-x-8 items-center p-4">
278+
<div className="flex flex-col lg:flex-row gap-4 lg:gap-x-8 items-center p-2 sm:p-4">
279279
<div className="flex flex-col gap-4 items-center justify-center w-full">
280280
<div className="flex flex-row items-stretch w-full">
281281
<form onSubmit={handleSubmit} ref={formRef} className="w-full">
@@ -318,7 +318,7 @@ export default function GameC() {
318318
</div>
319319
</form>
320320
</div>
321-
<div className="grid grid-cols-3 gap-4 w-full justify-items-center">
321+
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4 w-full justify-items-center">
322322
{HINTS.map((hint) => (
323323
<Hint
324324
key={hint.key}
@@ -334,7 +334,7 @@ export default function GameC() {
334334
</div>
335335
</div>
336336
<div className="flex flex-col justify-center items-center gap-2 select-none w-full lg:w-2/3 py-2">
337-
<div className="h-52 w-[350px] max-w-[350px] mx-auto bg-white/90 dark:bg-dark-mode-ligth/90 py-4 rounded shadow">
337+
<div className="h-44 sm:h-52 w-full max-w-[350px] mx-auto bg-white/90 dark:bg-dark-mode-ligth/90 py-4 rounded shadow">
338338
{showResult && randomCountry && (
339339
<img src={randomCountry.flags.svg} alt={randomCountry.name.common} className="w-full h-full object-contain" />
340340
)}
@@ -345,15 +345,15 @@ export default function GameC() {
345345
</div>
346346
</div>
347347

348-
<div className="flex justify-between items-center px-4">
348+
<div className="flex justify-between items-center px-1 sm:px-4">
349349
<button
350350
onClick={skip}
351351
disabled={showResult || loading}
352352
className="text-sm opacity-60 hover:opacity-100 transition-opacity select-none disabled:opacity-20"
353353
>
354354
Skip <span className="text-xs opacity-50">(S)</span>
355355
</button>
356-
<p className="text-xs opacity-40">↑↓ navigate · Enter submit · Esc close</p>
356+
<p className="text-xs opacity-40 hidden sm:block">↑↓ navigate · Enter submit · Esc close</p>
357357
</div>
358358
</div>
359359
<audio ref={winAudioRef} src={winSound} preload="auto" />

‎src/games/GameHL.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,9 @@ export default function GameHL() {
9393
return (
9494
<div className="h-full relative text-white">
9595
<div className="w-full mx-auto flex flex-col items-center justify-center h-full">
96-
<div className="absolute top-4 z-40 flex flex-col items-center">
97-
<p className="text-2xl font-bold">Higher or Lower</p>
98-
<p className="text-sm opacity-60">Streak: {score}</p>
96+
<div className="absolute top-2 sm:top-4 z-40 flex flex-col items-center">
97+
<p className="text-xl sm:text-2xl font-bold">Higher or Lower</p>
98+
<p className="text-xs sm:text-sm opacity-60">Streak: {score}</p>
9999
</div>
100100
<div className="flex flex-col lg:flex-row items-center w-full text-center h-full relative">
101101
<HLFlag
@@ -106,9 +106,9 @@ export default function GameHL() {
106106
onGuess={guess}
107107
showPopulation={showResults}
108108
/>
109-
<p className="font-bold text-2xl absolute flex flex-col top-0 items-center justify-center w-full h-full z-40 pointer-events-none">
110-
V.S
111-
</p>
109+
<div className="font-bold text-xl sm:text-2xl absolute flex items-center justify-center w-full h-full z-30 pointer-events-none">
110+
<span className="bg-dark-mode-ligth/70 backdrop-blur-sm px-3 py-1 rounded-full">V.S</span>
111+
</div>
112112
<HLFlag
113113
name={countryC.name.common}
114114
btn={true}

‎src/games/Hint.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function Hint({ id, title, data, ts, cost, suggested, onReveal })
4444
tabIndex={visible ? -1 : 0}
4545
role="button"
4646
aria-label={`${title} hint, costs ${cost} points`}
47-
className={`relative flex flex-col items-center h-28 w-32 shadow bg-white dark:bg-dark-mode-ligth rounded px-4 py-2 backdrop-blur outline-none focus:ring-2 focus:ring-valid/50 transition-all duration-300 ${
47+
className={`relative flex flex-col items-center h-24 sm:h-28 w-full shadow bg-white dark:bg-dark-mode-ligth rounded px-3 sm:px-4 py-2 backdrop-blur outline-none focus:ring-2 focus:ring-valid/50 transition-all duration-300 ${
4848
closing ? "scale-95 opacity-50" : ""
4949
} ${!visible && !closing ? "hover:cursor-pointer hover:scale-105" : ""} ${
5050
suggested && !visible && !closing ? "ring-2 ring-valid/40" : ""

0 commit comments

Comments
 (0)