From 78c243027f9d86e770003ac2d7c3101bf233375d Mon Sep 17 00:00:00 2001 From: Sivert Smedsrud Date: Fri, 2 Oct 2026 17:28:40 +0200 Subject: [PATCH 1/3] "Grid Layout pokemon are displayed in a grid on the front page Authored: Siversm " --- package-lock.json | 6 ++++ project2/package-lock.json | 54 +++++++++++++++++++++++++++------ project2/src/App.tsx | 62 ++++++++++++++++++++++++++++++-------- project2/src/index.css | 59 +++++++++++++++++++++++++++++++++--- 4 files changed, 154 insertions(+), 27 deletions(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0d1f440 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "T26-Project-2", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/project2/package-lock.json b/project2/package-lock.json index 4ab18e5..e93e481 100644 --- a/project2/package-lock.json +++ b/project2/package-lock.json @@ -8,22 +8,24 @@ "name": "project2", "version": "0.0.0", "dependencies": { - "react": "^19.2.8", - "react-dom": "^19.2.8" + "react": "^19.3.0", + "react-dom": "^19.3.0" }, "devDependencies": { "@eslint/js": "^10.0.1", - "@types/node": "^24.13.3", - "@types/react": "^19.2.18", - "@types/react-dom": "^19.2.7", + "@types/node": "^24.19.0", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", "@vitejs/plugin-react": "^6.1.1", - "eslint": "^10.10.0", + "eslint": "^10.11.0", + "eslint-config-prettier": "^10.1.8", "eslint-plugin-react-hooks": "^7.1.1", - "eslint-plugin-react-refresh": "^0.5.6", + "eslint-plugin-react-refresh": "^0.5.7", "globals": "^17.12.0", - "typescript": "~6.0.2", - "typescript-eslint": "^8.69.0", - "vite": "^8.3.0" + "prettier": "3.9.9", + "typescript": "~6.0.3", + "typescript-eslint": "^8.71.0", + "vite": "^8.3.1" } }, "node_modules/@babel/code-frame": { @@ -1470,6 +1472,22 @@ } } }, + "node_modules/eslint-config-prettier": { + "version": "10.1.8", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz", + "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", + "dev": true, + "license": "MIT", + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "funding": { + "url": "https://opencollective.com/eslint-config-prettier" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-plugin-react-hooks": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz", @@ -2377,6 +2395,22 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.9.9", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.9.tgz", + "integrity": "sha512-Z/CJHIkdujO/OtN7nXUii0Rf3VT5SRuhjBA82Xvu2XhBUgX3nhP67T0LHceBdQLex7OOFGTox+Q5Yg8Jk2Qivg==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/project2/src/App.tsx b/project2/src/App.tsx index c30eeba..20ba618 100644 --- a/project2/src/App.tsx +++ b/project2/src/App.tsx @@ -1,16 +1,54 @@ -function App() { - return <> -
-

PokeDOX

- -
-
+// Mock data until we have a backend: 12 pokemon with id, name and placeholder url +const mockNames = [ + 'Bulbasaur', + 'Ivysaur', + 'Venusaur', + 'Charmander', + 'Charmeleon', + 'Charizard', + 'Squirtle', + 'Wartortle', + 'Blastoise', + 'Caterpie', + 'Metapod', + 'Butterfree', +]; + +const mockPokemon = mockNames.map((name, i) => ({ + id: i + 1, + name, + url: '#', +})); -
- - ; +function App() { + return ( + <> +
+

PokeDOX

+ +
+
+ +
+ + + ); } export default App; diff --git a/project2/src/index.css b/project2/src/index.css index cdc61e7..e0301f1 100644 --- a/project2/src/index.css +++ b/project2/src/index.css @@ -2,6 +2,9 @@ --text: #6b6375; --text-h: #08060d; --bg: #fff; + --card-bg: #f4f4f5; + --card-border: #e4e4e7; + --image-bg: #fff; --sans: system-ui, 'Segoe UI', Roboto, sans-serif; --heading: system-ui, 'Segoe UI', Roboto, sans-serif; @@ -26,7 +29,10 @@ :root { --text: #9ca3af; --text-h: #f3f4f6; - --bg: #16171d; + --bg: #0a0a0a; + --card-bg: #161616; + --card-border: #2a2a2e; + --image-bg: #080808; } } @@ -48,7 +54,7 @@ body { margin: 0; } -header{ +header { display: flex; /*width: 100%;*/ background: #444488; @@ -56,16 +62,59 @@ header{ align-items: center; justify-content: space-between; } -footer{ +footer { padding: 1rem 2rem; } -input{ +input { outline: none; border: none; border-radius: 1rem; padding: 0.5rem 0.75rem; + width: 12rem; + min-width: 0; } -input:focus, input:hover { +input:focus, +input:hover { background: #16171d; } + +.pokemon-grid { + list-style: none; + margin: 0; + padding: 1.5rem 2rem; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); + gap: 1.5rem; +} + +.pokemon-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 1.75rem 1.75rem 2rem; + background: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: 1.5rem; +} + +.pokemon-image { + width: 100%; + aspect-ratio: 1; + display: grid; + place-items: center; + background: var(--image-bg); + border-radius: 1.25rem; +} + +.pokemon-image img { + width: 75%; + height: auto; + image-rendering: pixelated; +} + +.pokemon-card h2 { + margin: 1.25rem 0 0.25rem; + font-size: 1.4rem; + color: var(--text-h); +} From afef12de386f4547cc8f09a76495c0c8e13c8268 Mon Sep 17 00:00:00 2001 From: Peder Orheim Hatlen Date: Fri, 2 Oct 2026 17:39:52 +0200 Subject: [PATCH 2/3] Delete package-lock.json --- package-lock.json | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 0d1f440..0000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "T26-Project-2", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} From 845d6f9548692189187a735b587272d99e1cb19f Mon Sep 17 00:00:00 2001 From: Peder Date: Fri, 2 Oct 2026 17:53:57 +0200 Subject: [PATCH 3/3] Style: adjusted resizeability Moved from using minmax which scaled elements, to using fixed sized cells. Co-authored-by: siversm siversm@stud.ntnu.no Issue: #19 --- project2/src/index.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/project2/src/index.css b/project2/src/index.css index e0301f1..b5cf270 100644 --- a/project2/src/index.css +++ b/project2/src/index.css @@ -84,7 +84,8 @@ input:hover { margin: 0; padding: 1.5rem 2rem; display: grid; - grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); + grid-template-columns: repeat(auto-fill, 14rem); + justify-content: center; gap: 1.5rem; }