From 1d2e03d43268c1a0632b1d7bdf5057743e2a5ff9 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Tue, 28 Mar 2023 17:41:21 +0200 Subject: [PATCH 1/6] added components --- code/.eslintrc.json | 3 +- code/package-lock.json | 63 +++++++++++++++++++++++++++++++++- code/package.json | 3 +- code/src/App.js | 10 ++++-- code/src/Components/Details.js | 3 ++ code/src/Components/List.js | 26 ++++++++++++++ 6 files changed, 102 insertions(+), 6 deletions(-) create mode 100644 code/src/Components/Details.js create mode 100644 code/src/Components/List.js diff --git a/code/.eslintrc.json b/code/.eslintrc.json index c9c0675c3..fe432dae5 100644 --- a/code/.eslintrc.json +++ b/code/.eslintrc.json @@ -26,6 +26,7 @@ "react-hooks" ], "rules": { + "linebreak-style": 0, "react/function-component-definition": [ 2, { @@ -128,4 +129,4 @@ "react-hooks/exhaustive-deps": "warn", "semi": "off" } -} +} \ No newline at end of file diff --git a/code/package-lock.json b/code/package-lock.json index bb51e893e..3fa72176e 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -16,7 +16,8 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.9.0" }, "devDependencies": { "react-scripts": "5.0.1" @@ -3124,6 +3125,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz", + "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14384,6 +14393,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz", + "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==", + "dependencies": { + "@remix-run/router": "1.4.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz", + "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==", + "dependencies": { + "@remix-run/router": "1.4.0", + "react-router": "6.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -19509,6 +19548,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz", + "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -27684,6 +27728,23 @@ "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==", "dev": true }, + "react-router": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz", + "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==", + "requires": { + "@remix-run/router": "1.4.0" + } + }, + "react-router-dom": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz", + "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==", + "requires": { + "@remix-run/router": "1.4.0", + "react-router": "6.9.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/code/package.json b/code/package.json index 7aad26ebc..9736b71ad 100644 --- a/code/package.json +++ b/code/package.json @@ -11,7 +11,8 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.9.0" }, "scripts": { "start": "react-scripts start", diff --git a/code/src/App.js b/code/src/App.js index f2007d229..298b1716c 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,13 @@ import React from 'react'; +import { BrowserRouter, Routes, Route } from 'react-router-dom' +import { MovieList } from 'Components/List' export const App = () => { return ( -
- Find me in src/app.js! -
+ + + } /> + + ); } diff --git a/code/src/Components/Details.js b/code/src/Components/Details.js new file mode 100644 index 000000000..03adb99e3 --- /dev/null +++ b/code/src/Components/Details.js @@ -0,0 +1,3 @@ +import React from 'react'; + +// api.themoviedb.org/3/movie/${id}?api_key=986aaac98bfe3b83f202c023b975310e&language=en-US \ No newline at end of file diff --git a/code/src/Components/List.js b/code/src/Components/List.js new file mode 100644 index 000000000..9c7fbb289 --- /dev/null +++ b/code/src/Components/List.js @@ -0,0 +1,26 @@ +/* eslint-disable indent */ +import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; + +export const MovieList = () => { + const [movies, setMovies] = useState([]) + + useEffect(() => { + fetch('https://api.themoviedb.org/3/movie/popular?api_key=986aaac98bfe3b83f202c023b975310e&language=en-US&page=1') + .then((res) => res.json()) + .then((json) => { + setMovies(json.results) + }) + }, []) + return ( +
+ {movies.map((movie) => ( + + {movie.title} +

{movie.title}

+

Release date: {movie.release_date}

+ + ))} +
+ ) +} \ No newline at end of file From 6988198994608b143a52189756b42876192176b3 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Wed, 29 Mar 2023 14:11:10 +0200 Subject: [PATCH 2/6] added details page and css --- code/src/App.js | 2 ++ code/src/Components/Details.css | 38 +++++++++++++++++++++++++ code/src/Components/Details.js | 49 ++++++++++++++++++++++++++++++-- code/src/Components/List.css | 14 +++++++++ code/src/Components/List.js | 3 +- code/src/Icon/starIcon.png | Bin 0 -> 12517 bytes 6 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 code/src/Components/Details.css create mode 100644 code/src/Components/List.css create mode 100644 code/src/Icon/starIcon.png diff --git a/code/src/App.js b/code/src/App.js index 298b1716c..2e4c75b70 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,12 +1,14 @@ import React from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom' import { MovieList } from 'Components/List' +import { Details } from 'Components/Details' export const App = () => { return ( } /> + } /> ); diff --git a/code/src/Components/Details.css b/code/src/Components/Details.css new file mode 100644 index 000000000..4e4b301b4 --- /dev/null +++ b/code/src/Components/Details.css @@ -0,0 +1,38 @@ + .movie-overview { + color:white; + } + +.movie-title { + color:white; + } + +.background { + height: 100vh; + width: 100vw; + position: absolute; + } + +.details-container { + margin-top: 10vh; + margin-left: 5vw; + } + + .all-details { + position: relative; + height: 100vh; /* Set the height of the container to fill the viewport */ +} + + +.back-btn { + position: absolute; + top: 20px; /* Adjust the top position as needed */ + left: 20px; /* Adjust the left position as needed */ + z-index: 1; /* Set a higher z-index to ensure the button is on top of the background */ + /* Add other styles for the button */ + margin-left: 5vw; +} + +.details-container img { + border: solid 3px white; + +} \ No newline at end of file diff --git a/code/src/Components/Details.js b/code/src/Components/Details.js index 03adb99e3..2fce91ca6 100644 --- a/code/src/Components/Details.js +++ b/code/src/Components/Details.js @@ -1,3 +1,48 @@ -import React from 'react'; +/* eslint-disable react/jsx-indent-props */ +/* eslint-disable indent */ +import React, { useState, useEffect } from 'react'; +import { useParams, Link } from 'react-router-dom'; +import './Details.css' -// api.themoviedb.org/3/movie/${id}?api_key=986aaac98bfe3b83f202c023b975310e&language=en-US \ No newline at end of file +export const Details = () => { + const { id } = useParams(); + const [movie, setMovie] = useState(); + // The `useEffect` hook is being passed two arguments: a function and an array of + // dependencies. The function in this case is responsible for the fetch request and + // updating the movie state. The array of dependencies contains a single element, + // `id`, meaning that the function will only be triggered when the `id` value + // changes. // + useEffect(() => { + fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=986aaac98bfe3b83f202c023b975310e&language=en-US`) + .then((res) => res.json()) + .then((json) => { + setMovie(json); + }) + }, [id]); + + return ( +
+ + + + {movie && ( +
+
+ {movie.title} +
+

{movie.title} ⭐{Math.round(movie.vote_average * 10) / 10}

+

{movie.overview}

+
+
+
)} +
+ + ) +} \ No newline at end of file diff --git a/code/src/Components/List.css b/code/src/Components/List.css new file mode 100644 index 000000000..12f6f83c5 --- /dev/null +++ b/code/src/Components/List.css @@ -0,0 +1,14 @@ +.ListPage { + display: grid; + grid-template-columns: repeat(4, 1fr); + } +.ListPage a { + display: block; + position: relative; + overflow: hidden; + } +.ListPage a img { + object-fit: contain; + object-fit: cover; + width: 100%; + } \ No newline at end of file diff --git a/code/src/Components/List.js b/code/src/Components/List.js index 9c7fbb289..52efa5f30 100644 --- a/code/src/Components/List.js +++ b/code/src/Components/List.js @@ -1,6 +1,7 @@ /* eslint-disable indent */ import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; +import './List.css'; export const MovieList = () => { const [movies, setMovies] = useState([]) @@ -16,7 +17,7 @@ export const MovieList = () => {
{movies.map((movie) => ( - {movie.title} + {movie.title}

{movie.title}

Release date: {movie.release_date}

diff --git a/code/src/Icon/starIcon.png b/code/src/Icon/starIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..9fe2311e947ec717bbdfa3db1c727efa3bb7fa00 GIT binary patch literal 12517 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 literal 0 HcmV?d00001 From ebb2c1a372ad64e43862da15eb391b083309ba4c Mon Sep 17 00:00:00 2001 From: GG_Cugs Date: Thu, 30 Mar 2023 00:04:45 +0200 Subject: [PATCH 3/6] hover and button created the hover for the movie title and release date in the list.css and styled the button in the details --- code/src/Components/Details.css | 31 ++++++++++++++++++++++++++++++ code/src/Components/List.css | 34 ++++++++++++++++++++++++++++++++- code/src/Components/List.js | 6 ++++-- 3 files changed, 68 insertions(+), 3 deletions(-) diff --git a/code/src/Components/Details.css b/code/src/Components/Details.css index 4e4b301b4..4d2a9b98b 100644 --- a/code/src/Components/Details.css +++ b/code/src/Components/Details.css @@ -34,5 +34,36 @@ .details-container img { border: solid 3px white; +} + +button { + background-color: #031244; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 20px; + margin: 4px 2px; + cursor: pointer; + border-radius: 20px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + opacity: 0.8; +} +button:hover { + background-color: #040958; + color: white; + transition: .5 ease; + opacity: 1; +} + +button:focus { + outline: none; + box-shadow: 0 0 0 3px rgba(0,0,0,0.2); +} +button:active { + background-color: #e7e7e7; + color: black; } \ No newline at end of file diff --git a/code/src/Components/List.css b/code/src/Components/List.css index 12f6f83c5..4c2ff40ea 100644 --- a/code/src/Components/List.css +++ b/code/src/Components/List.css @@ -11,4 +11,36 @@ object-fit: contain; object-fit: cover; width: 100%; - } \ No newline at end of file + height: 100%; + } +.overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: fit-content; + height: fit-content; + opacity: 0; /*This makes the div hover-img not be displayed*/ + pointer-events: none; /* so if you select you dont see the stuff placed inside */ + transition: .2s ease; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 20px; + } + +.ListPage a:hover .overlay { + opacity: 1; + pointer-events: all; + } + +.ListPage a img { + transition: .3s ease; +} + +.ListPage a:hover img { + filter: blur(5px) brightness(0.4); +} \ No newline at end of file diff --git a/code/src/Components/List.js b/code/src/Components/List.js index 52efa5f30..60fc801f5 100644 --- a/code/src/Components/List.js +++ b/code/src/Components/List.js @@ -18,8 +18,10 @@ export const MovieList = () => { {movies.map((movie) => ( {movie.title} -

{movie.title}

-

Release date: {movie.release_date}

+
+

{movie.title}

+

Release date: {movie.release_date}

+
))}
From 0da32e7843670cec72d1b367c24d860ff34ebe58 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Fri, 31 Mar 2023 18:09:32 +0200 Subject: [PATCH 4/6] added responsiveness --- code/src/App.js | 9 ++++--- code/src/Components/Details.css | 48 ++++++++++++++++++++++++++++++--- code/src/Components/Details.js | 3 ++- code/src/Components/List.css | 21 +++++++++++++++ code/src/Components/List.js | 1 + code/src/index.css | 44 ++++++++++++++++++++++++++++++ 6 files changed, 118 insertions(+), 8 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 2e4c75b70..15ca1336f 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,15 +1,16 @@ import React from 'react'; -import { BrowserRouter, Routes, Route } from 'react-router-dom' +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import { MovieList } from 'Components/List' import { Details } from 'Components/Details' +import './index.css'; export const App = () => { return ( - + } /> } /> - + ); -} +} \ No newline at end of file diff --git a/code/src/Components/Details.css b/code/src/Components/Details.css index 4d2a9b98b..36f7af6f5 100644 --- a/code/src/Components/Details.css +++ b/code/src/Components/Details.css @@ -10,6 +10,7 @@ height: 100vh; width: 100vw; position: absolute; + overflow: auto; } .details-container { @@ -25,8 +26,8 @@ .back-btn { position: absolute; - top: 20px; /* Adjust the top position as needed */ - left: 20px; /* Adjust the left position as needed */ + top: 10px; /* Adjust the top position as needed */ + left: 10px; /* Adjust the left position as needed */ z-index: 1; /* Set a higher z-index to ensure the button is on top of the background */ /* Add other styles for the button */ margin-left: 5vw; @@ -66,4 +67,45 @@ button:focus { button:active { background-color: #e7e7e7; color: black; -} \ No newline at end of file +} + +@media screen and (max-width: 800px) { + .details-container { + margin-right: 3vw; + } + .details-container img { + border: solid 3px white; + scale: 95%; + } + .background { + overflow: scroll; + } +} +@media screen and (max-width: 600px) { + .details-container { + margin-right: 3vw; + } + .details-container img { + border: solid 3px white; + scale: 90%; + } + .background { + overflow: scroll; + } +} + +@media screen and (max-width: 400px) { + .details-container { + margin-top: 5vh; + margin-left: 5vw; + margin-right: 3vw; + } + .details-container img { + border: solid 3px white; + scale: 80%; + } + .background { + overflow: scroll; + } +} + diff --git a/code/src/Components/Details.js b/code/src/Components/Details.js index 2fce91ca6..8b8862e99 100644 --- a/code/src/Components/Details.js +++ b/code/src/Components/Details.js @@ -2,7 +2,8 @@ /* eslint-disable indent */ import React, { useState, useEffect } from 'react'; import { useParams, Link } from 'react-router-dom'; -import './Details.css' +import './Details.css'; +import './List.css'; export const Details = () => { const { id } = useParams(); diff --git a/code/src/Components/List.css b/code/src/Components/List.css index 4c2ff40ea..65faf496a 100644 --- a/code/src/Components/List.css +++ b/code/src/Components/List.css @@ -13,6 +13,7 @@ width: 100%; height: 100%; } + .overlay { position: absolute; top: 0; @@ -43,4 +44,24 @@ .ListPage a:hover img { filter: blur(5px) brightness(0.4); +} + +.release-date { + text-decoration: none; + color: inherit; + color: white; + } + + + +@media screen and (max-width: 1024px) { + .ListPage { + grid-template-columns: repeat(3, 1fr); + } +} + +@media screen and (max-width: 768px) { + .ListPage { + grid-template-columns: repeat(2, 1fr); + } } \ No newline at end of file diff --git a/code/src/Components/List.js b/code/src/Components/List.js index 60fc801f5..6a2b30dd6 100644 --- a/code/src/Components/List.js +++ b/code/src/Components/List.js @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import './List.css'; +import './Details.css'; export const MovieList = () => { const [movies, setMovies] = useState([]) diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..6509f3267 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -11,3 +11,47 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } +.selector { + display: flex; + align-items: center; + justify-content: center; + height: 70px; +} +.check-box { + transform: scale(2); +} + +input[type="checkbox"] { + position: relative; + appearance: none; + width: 30px; + height: 20px; + background: #ccc; + border-radius: 50px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + cursor: pointer; + transition: 0.4s; +} + +input:checked[type="checkbox"] { + background: #7da6ff; +} + +input[type="checkbox"]::after { + position: absolute; + content: ""; + width: 20px; + height: 20px; + top: 0; + left: 0; + background: #fff; + border-radius: 50%; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + transform: scale(1.1); + transition: 0.4s; +} + +input:checked[type="checkbox"]::after { + left: 50%; +} + From 3658c58152739b766cf1eaf6f10ef5f03a00c334 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Sun, 2 Jul 2023 17:26:10 +0200 Subject: [PATCH 5/6] style change --- code/src/Components/Details.css | 228 +++++++++++++++++--------------- 1 file changed, 123 insertions(+), 105 deletions(-) diff --git a/code/src/Components/Details.css b/code/src/Components/Details.css index 36f7af6f5..5e5aa65b5 100644 --- a/code/src/Components/Details.css +++ b/code/src/Components/Details.css @@ -1,111 +1,129 @@ .movie-overview { - color:white; - } + color: white; + } -.movie-title { - color:white; - } + .movie-title { + color: white; + padding-left: 6px; + } -.background { - height: 100vh; - width: 100vw; - position: absolute; - overflow: auto; - } + .background { + height: 100vh; + width: 100vw; + position: absolute; + overflow: auto; + } -.details-container { - margin-top: 10vh; - margin-left: 5vw; - } + .details-container { + margin-top: 10vh; + margin-left: 5vw; + } + + .details-text { + width: 50%; + background-color: rgb(0 0 0 / 70%); + border-radius: 10px; + } .all-details { - position: relative; - height: 100vh; /* Set the height of the container to fill the viewport */ -} - - -.back-btn { - position: absolute; - top: 10px; /* Adjust the top position as needed */ - left: 10px; /* Adjust the left position as needed */ - z-index: 1; /* Set a higher z-index to ensure the button is on top of the background */ - /* Add other styles for the button */ - margin-left: 5vw; -} - -.details-container img { - border: solid 3px white; -} - -button { - background-color: #031244; - border: none; - color: white; - padding: 15px 32px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 20px; - margin: 4px 2px; - cursor: pointer; - border-radius: 20px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - opacity: 0.8; -} -button:hover { - background-color: #040958; - color: white; - transition: .5 ease; - opacity: 1; -} - -button:focus { - outline: none; - box-shadow: 0 0 0 3px rgba(0,0,0,0.2); -} - -button:active { - background-color: #e7e7e7; - color: black; -} - -@media screen and (max-width: 800px) { - .details-container { - margin-right: 3vw; - } - .details-container img { - border: solid 3px white; - scale: 95%; - } - .background { - overflow: scroll; - } -} -@media screen and (max-width: 600px) { - .details-container { - margin-right: 3vw; - } - .details-container img { - border: solid 3px white; - scale: 90%; - } - .background { - overflow: scroll; - } -} - -@media screen and (max-width: 400px) { - .details-container { - margin-top: 5vh; - margin-left: 5vw; - margin-right: 3vw; - } - .details-container img { - border: solid 3px white; - scale: 80%; - } - .background { - overflow: scroll; - } -} - + position: relative; + height: 100vh; + /* Set the height of the container to fill the viewport */ + } + + + .back-btn { + position: absolute; + top: 10px; + /* Adjust the top position as needed */ + left: 10px; + /* Adjust the left position as needed */ + z-index: 1; + /* Set a higher z-index to ensure the button is on top of the background */ + /* Add other styles for the button */ + margin-left: 5vw; + } + + .details-container img { + border: solid 3px white; + } + + button { + background-color: #031244; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 20px; + margin: 4px 2px; + cursor: pointer; + border-radius: 20px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + opacity: 0.8; + } + + button:hover { + background-color: #040958; + color: white; + transition: .5 ease; + opacity: 1; + } + + button:focus { + outline: none; + box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); + } + + button:active { + background-color: #e7e7e7; + color: black; + } + + @media screen and (max-width: 800px) { + .details-container { + margin-right: 3vw; + } + + .details-container img { + border: solid 3px white; + scale: 95%; + } + + .background { + overflow: scroll; + } + } + + @media screen and (max-width: 600px) { + .details-container { + margin-right: 3vw; + } + + .details-container img { + border: solid 3px white; + scale: 90%; + } + + .background { + overflow: scroll; + } + } + + @media screen and (max-width: 400px) { + .details-container { + margin-top: 5vh; + margin-left: 5vw; + margin-right: 3vw; + } + + .details-container img { + border: solid 3px white; + scale: 80%; + } + + .background { + overflow: scroll; + } + } \ No newline at end of file From 53459a257cc2148a0ca7cbdc12f6943b8fa5fb9d Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Sun, 2 Jul 2023 18:35:21 +0200 Subject: [PATCH 6/6] Changed title --- code/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..16eebe179 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -13,7 +13,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Technigo React App + Movie App