From 1eb02586dbc937780fc89153ce1c727b31b0353a Mon Sep 17 00:00:00 2001 From: sadjoaldi Date: Thu, 20 Feb 2025 14:04:42 +0100 Subject: [PATCH 1/7] repull --- src/pages/favorite-page.jsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/pages/favorite-page.jsx b/src/pages/favorite-page.jsx index 6fc852e..6999e41 100644 --- a/src/pages/favorite-page.jsx +++ b/src/pages/favorite-page.jsx @@ -1,3 +1,5 @@ +import { Link } from 'react-router-dom'; + import Card from '../components/card'; import '../style/burger.scss'; import '../style/card.scss'; @@ -12,12 +14,14 @@ export default function FavoritePage({ favorites }) {

No favorites added yet.

) : ( favorites.map((character) => ( - + + + )) )} From 126d177c1df01e6c2e8249f5202ba46aeb309d4c Mon Sep 17 00:00:00 2001 From: sadjoaldi Date: Fri, 21 Feb 2025 11:47:03 +0100 Subject: [PATCH 2/7] retouche style --- src/pages/favorite-page.jsx | 16 ++++++---------- src/style/comics-display.scss | 2 -- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/pages/favorite-page.jsx b/src/pages/favorite-page.jsx index 6999e41..6fc852e 100644 --- a/src/pages/favorite-page.jsx +++ b/src/pages/favorite-page.jsx @@ -1,5 +1,3 @@ -import { Link } from 'react-router-dom'; - import Card from '../components/card'; import '../style/burger.scss'; import '../style/card.scss'; @@ -14,14 +12,12 @@ export default function FavoritePage({ favorites }) {

No favorites added yet.

) : ( favorites.map((character) => ( - - - + )) )} diff --git a/src/style/comics-display.scss b/src/style/comics-display.scss index 8fbec68..53d38dc 100644 --- a/src/style/comics-display.scss +++ b/src/style/comics-display.scss @@ -5,13 +5,11 @@ color: $text-color; display: grid; grid-template-columns: 1fr 1fr; - // justify-content: center; height: 76svh; background-color: $background-comics; max-width: 1000px; margin: 0.4% auto; overflow: hidden; - // transition: all 0.3sease; .comics-img { width: 67%; From 66c9c4251c683fff6d4f2d47e603df49b844424e Mon Sep 17 00:00:00 2001 From: sadjoaldi Date: Fri, 21 Feb 2025 12:16:58 +0100 Subject: [PATCH 3/7] pull develop --- src/components/marvel-characters.jsx | 3 +++ src/components/profile.jsx | 1 + src/pages/favorite-page.jsx | 1 + 3 files changed, 5 insertions(+) diff --git a/src/components/marvel-characters.jsx b/src/components/marvel-characters.jsx index e580d72..78b833d 100644 --- a/src/components/marvel-characters.jsx +++ b/src/components/marvel-characters.jsx @@ -26,7 +26,9 @@ export default function MarvelCharacters({ addToFavorites }) { const randomCharacters = data.data.results.sort(() => Math.random() - 1); setMarvelCharacter(randomCharacters); }) + // eslint-disable-next-line no-console .catch((err) => console.error(err)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [MarvelCharacters]); const handleAddToFavorites = (character) => { @@ -62,6 +64,7 @@ export default function MarvelCharacters({ addToFavorites }) { .then((data) => { setComics(data.data.results); }) + // eslint-disable-next-line no-console .catch((err) => console.error(err)); }; diff --git a/src/components/profile.jsx b/src/components/profile.jsx index 757ef2e..9b4908b 100644 --- a/src/components/profile.jsx +++ b/src/components/profile.jsx @@ -11,6 +11,7 @@ export default function Profile({ characterMarvel, img, title, description, comi
{characterMarvel}

{characterMarvel}

+

{title}

diff --git a/src/pages/favorite-page.jsx b/src/pages/favorite-page.jsx index 7c45a6a..cc40d81 100644 --- a/src/pages/favorite-page.jsx +++ b/src/pages/favorite-page.jsx @@ -20,6 +20,7 @@ export default function FavoritePage({ favorites }) { .then((data) => { setComics(data.data.results.filter((comic) => comic.description)); }) + // eslint-disable-next-line no-console .catch((err) => console.error(err)); }; From f27ad74939d2cca9994681c85ba446a93e6bd323 Mon Sep 17 00:00:00 2001 From: sadjoaldi Date: Mon, 24 Feb 2025 13:40:10 +0100 Subject: [PATCH 4/7] deseable delete --- src/components/marvel-characters.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/marvel-characters.jsx b/src/components/marvel-characters.jsx index 78b833d..85303c4 100644 --- a/src/components/marvel-characters.jsx +++ b/src/components/marvel-characters.jsx @@ -88,9 +88,7 @@ export default function MarvelCharacters({ addToFavorites }) {
- +
{displayedCharacters.map((character) => ( From 3a58609fc16b88972d32b49384118f026cb7091d Mon Sep 17 00:00:00 2001 From: sadjoaldi Date: Mon, 24 Feb 2025 15:25:57 +0100 Subject: [PATCH 5/7] modif fichiers style, ajout conditionnel de l'appartition de la bio --- src/components/profile.jsx | 2 +- src/style/card.scss | 2 +- src/style/characters.scss | 10 +++++----- src/style/comics-display.scss | 24 +++++++++++++++--------- src/style/comics-page.scss | 31 ++++++++++++++----------------- src/style/comics.scss | 10 +++++----- src/style/favorite-page.scss | 12 ++++++------ src/style/footer.scss | 3 ++- src/style/modal.scss | 2 +- src/style/navbar.scss | 8 ++++---- src/style/not-found.scss | 10 +++++----- src/style/profile-page.scss | 8 ++++++-- src/style/search.scss | 2 +- 13 files changed, 66 insertions(+), 58 deletions(-) diff --git a/src/components/profile.jsx b/src/components/profile.jsx index 9b4908b..36daaa9 100644 --- a/src/components/profile.jsx +++ b/src/components/profile.jsx @@ -18,7 +18,7 @@ export default function Profile({ characterMarvel, img, title, description, comi {' '} Bio :

-

{description}

+

{description ? description : 'Description not avalable'}

diff --git a/src/style/card.scss b/src/style/card.scss index 022947e..45f0a99 100644 --- a/src/style/card.scss +++ b/src/style/card.scss @@ -98,7 +98,7 @@ width: 150px; border: solid, $text-color; - background-color: black; + background-color: $background-card; opacity: 85%; height: 70px; // margin-top: 10px; diff --git a/src/style/characters.scss b/src/style/characters.scss index 0ba5163..80770f1 100644 --- a/src/style/characters.scss +++ b/src/style/characters.scss @@ -15,7 +15,7 @@ align-items: center; width: 100%; padding: 30px 0; - background-color: white; + background-color: $text-color; z-index: 200; } @@ -58,7 +58,7 @@ align-items: center; border: solid 4px, - white; + $text-color; border-radius: 8px; cursor: pointer; @@ -72,7 +72,7 @@ .character-img { width: 150px; height: 150px; - border: solid 4px white; + border: solid 4px $text-color; border-radius: 8px; } .character-title { @@ -81,7 +81,7 @@ align-items: center; margin: 0 auto; width: 150px; - border: solid, white; + border: solid, $text-color; background-color: black; opacity: 85%; height: 70px; @@ -90,7 +90,7 @@ } h2 { - color: white; + color: $text-color; text-align: center; font-size: 0.7em; font-family: $font-family; diff --git a/src/style/comics-display.scss b/src/style/comics-display.scss index 53d38dc..f0376e2 100644 --- a/src/style/comics-display.scss +++ b/src/style/comics-display.scss @@ -1,16 +1,23 @@ @use 'settings.scss' as *; .comics-display { - font-family: $font-family; - color: $text-color; - display: grid; - grid-template-columns: 1fr 1fr; - height: 76svh; - background-color: $background-comics; + font-family: 'Aclonica', sans-serif; + color: #f4f4f4; + display: flex; + justify-content: space-around; + align-items: center; + gap: 12%; + background-color: rgba(0, 0, 0, 0.5); max-width: 1000px; margin: 0.4% auto; overflow: hidden; + //mobile + @media (max-width: 768px) { + flex-wrap: wrap; + gap: 10px; + } + .comics-img { width: 67%; margin: 1.5rem 1rem; @@ -22,8 +29,7 @@ border-radius: 0.5rem; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); border-radius: 2.5rem; - border: 2px solid red; - margin: 1rem; + border: 1px solid $text-color; } } @@ -32,7 +38,7 @@ flex-direction: column; justify-content: left; width: 80%; - margin: 2.5rem 0; + padding: 2rem; height: 83%; gap: 2.5rem; diff --git a/src/style/comics-page.scss b/src/style/comics-page.scss index e879d63..2042660 100644 --- a/src/style/comics-page.scss +++ b/src/style/comics-page.scss @@ -11,9 +11,9 @@ top: 10px; button { - background-color: #670208; + background-color: $primary-color; border: none; - color: white; + color: $text-color; padding: 10px 20px; border-radius: 5px; font-size: 1em; @@ -23,20 +23,17 @@ } } .typo-comics { - background-color: #670208; - font-family: 'Aclonica', sans-serif; - padding-top: 60px; + background-color: $primary-color; + font-family: $font-family; width: 140px; font-size: 18px; padding: 14px; border-radius: 10px; margin-left: 157px; - color: white; - box-shadow: 0px 2px 6px black; - align-items: center; - justify-content: center; - text-shadow: 3px 2px 8px black; - display: flex; + color: $text-color; + text-align: center; + box-shadow: 0px 2px 6px $background-card; + text-shadow: 3px 2px 8px $background-card; } } .comics { @@ -61,7 +58,7 @@ font-weight: 700; font-size: 1.2em; text-transform: lowercase; - color: black; + color: $background-card; } .comic-card { @@ -74,7 +71,7 @@ text-decoration: none; border: solid 4px, - white; + $text-color; border-radius: 8px; .caption { @@ -83,9 +80,9 @@ flex-wrap: wrap; justify-content: center; align-items: center; - color: white; + color: $text-color; text-align: center; - background-color: #0000004b; + background: $background-card; height: 100%; &.bottom { @@ -94,7 +91,7 @@ left: 50%; transform: translateX(-50%); opacity: 0; - color: white; + color: $text-color; text-decoration: underline; width: 60%; } @@ -103,7 +100,7 @@ &:hover { cursor: pointer; filter: grayscale(0); - box-shadow: 6px 6px black; + box-shadow: 6px 6px $background-card; transform: translate(-2px, -2px); .caption { diff --git a/src/style/comics.scss b/src/style/comics.scss index 276e20d..956c6a5 100644 --- a/src/style/comics.scss +++ b/src/style/comics.scss @@ -19,7 +19,7 @@ text-decoration: none; border: solid 4px, - white; + $text-color; border-radius: 8px; .comics-title { @@ -28,9 +28,9 @@ flex-wrap: wrap; justify-content: center; align-items: center; - color: white; + color: $text-color; text-align: center; - background-color: #0000004b; + background-color: $background-card; height: 100%; h3 { @@ -38,7 +38,7 @@ font-weight: 700; font-size: 1em; text-transform: lowercase; - color: white; + color: $text-color; :hover { transition: all 0.2s linear; } @@ -48,7 +48,7 @@ &:hover { cursor: pointer; filter: grayscale(0); - box-shadow: 6px 6px black; + box-shadow: 6px 6px $background-card; transform: translate(-2px, -2px); transition: all 0.2s linear; diff --git a/src/style/favorite-page.scss b/src/style/favorite-page.scss index 459b4e7..0a82360 100644 --- a/src/style/favorite-page.scss +++ b/src/style/favorite-page.scss @@ -1,13 +1,13 @@ +@use 'settings.scss' as *; .favorite { - padding-top: 20px; - padding-left: 20px; + padding: 20px 0 0 20px; .favor { display: none; } .typo { - background-color: #670208; + background: $primary-color; font-family: 'Aclonica', sans-serif; padding-top: 60px; width: 240px; @@ -15,9 +15,9 @@ padding: 14px; border-radius: 10px; margin-left: 160px; - color: white; - box-shadow: 0px 2px 6px black; + color: $text-color; + box-shadow: 0px 2px 6px $background-card; align-items: center; - text-shadow: 3px 2px 8px black; + text-shadow: 3px 2px 8px $background-card; } } diff --git a/src/style/footer.scss b/src/style/footer.scss index fff4332..dc0eb78 100644 --- a/src/style/footer.scss +++ b/src/style/footer.scss @@ -1,4 +1,5 @@ @use 'settings' as *; + .footer { display: flex; flex-direction: row; @@ -41,7 +42,7 @@ font-size: clamp(16px, 2vw, 20px); text-decoration: none; list-style-type: none; - color: white; + color: $text-color; padding: 5px 10px; @media screen and (min-width: 301px) and (max-width: 644px) { diff --git a/src/style/modal.scss b/src/style/modal.scss index c371e40..6c2b71d 100644 --- a/src/style/modal.scss +++ b/src/style/modal.scss @@ -8,7 +8,7 @@ right: 0; bottom: 0; z-index: 1000; - background: rgba(0, 0, 0, 0.5); + background: $background-comics; .modal-content { padding: 0 20px; diff --git a/src/style/navbar.scss b/src/style/navbar.scss index 4a8d70f..5bc83a3 100644 --- a/src/style/navbar.scss +++ b/src/style/navbar.scss @@ -19,7 +19,7 @@ gap: 40px; .my-link { - color: white; + color: $text-color; text-decoration: none; display: flex; } @@ -35,7 +35,7 @@ display: flex; align-items: center; font-size: 22px; - color: white; + color: $text-color; font-family: $font-family; margin-left: 20px; } @@ -56,11 +56,11 @@ background-color: transparent; font-size: 20px; width: 140px; - color: white; + color: $text-color; } input::placeholder { - color: white; + color: $text-color; } input:focus { diff --git a/src/style/not-found.scss b/src/style/not-found.scss index d80b016..992b624 100644 --- a/src/style/not-found.scss +++ b/src/style/not-found.scss @@ -1,7 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap'); .notFound { - background: linear-gradient(#670208, #151414 25% 76%, #670208); + background: linear-gradient($primary-color, #151414 25% 76%, $primary-color); height: 1100px; display: column; justify-content: center; @@ -11,7 +11,7 @@ display: flex; justify-content: center; font-size: 100px; - color: white; + color: $text-color; padding-top: 60px; font-family: 'Aclonica', sans-serif; } @@ -19,7 +19,7 @@ display: flex; justify-content: center; font-size: 50px; - color: white; + color: $text-color; font-family: 'Aclonica', sans-serif; } img { @@ -52,11 +52,11 @@ p { font-family: 'Aclonica', sans-serif; font-size: 50px; - color: white; + color: $text-color; } p:hover { - color: #670208; + color: $primary-color; transition: 0.4s; } diff --git a/src/style/profile-page.scss b/src/style/profile-page.scss index bd8e14f..f1721a2 100644 --- a/src/style/profile-page.scss +++ b/src/style/profile-page.scss @@ -41,8 +41,12 @@ } } .bio { - margin-left: 16%; - margin-top: 2%; + margin: 2% 0 0 10%; + border: 1px solid $background-card; + padding: 1rem; + border-radius: $border-radius; + background: $background-card; + h3 { font-size: 3.3rem; font-family: $font-family; diff --git a/src/style/search.scss b/src/style/search.scss index 9e2fdcd..6d1605a 100644 --- a/src/style/search.scss +++ b/src/style/search.scss @@ -16,6 +16,6 @@ input { background-color: transparent; font-size: 22px; width: 100%; - color: black; + color: $background-card; outline: none; } From 86d6baa86fc7633c0bfeccfe69256bdc7d6199ba Mon Sep 17 00:00:00 2001 From: sadjoaldi Date: Tue, 25 Feb 2025 09:26:00 +0100 Subject: [PATCH 6/7] =?UTF-8?q?modifs=20apport=C3=A9es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/marvel-characters.jsx | 1 - src/components/profile.jsx | 5 ++--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/marvel-characters.jsx b/src/components/marvel-characters.jsx index 85303c4..7dbb5d6 100644 --- a/src/components/marvel-characters.jsx +++ b/src/components/marvel-characters.jsx @@ -107,7 +107,6 @@ export default function MarvelCharacters({ addToFavorites }) { comic.description).slice(0, 5)} /> diff --git a/src/components/profile.jsx b/src/components/profile.jsx index 36daaa9..eb54221 100644 --- a/src/components/profile.jsx +++ b/src/components/profile.jsx @@ -2,7 +2,7 @@ import { Link } from 'react-router-dom'; import '../style/profile-page.scss'; -export default function Profile({ characterMarvel, img, title, description, comics }) { +export default function Profile({ characterMarvel, img, description, comics }) { return (
@@ -11,14 +11,13 @@ export default function Profile({ characterMarvel, img, title, description, comi
{characterMarvel}

{characterMarvel}

-

{title}

{' '} Bio :

-

{description ? description : 'Description not avalable'}

+

{description ? description : 'Description not available'}

From 5897ffe9a939fceca1eceaefeb385baec58dc7cd Mon Sep 17 00:00:00 2001 From: sadjoaldi Date: Tue, 25 Feb 2025 09:46:36 +0100 Subject: [PATCH 7/7] ajout de variable dans settings et correction du check --- src/style/card.scss | 3 +-- src/style/characters.scss | 10 +++++----- src/style/comics-display.scss | 8 ++++---- src/style/not-found.scss | 8 +++----- src/style/settings.scss | 3 ++- 5 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/style/card.scss b/src/style/card.scss index 45f0a99..11c724b 100644 --- a/src/style/card.scss +++ b/src/style/card.scss @@ -11,7 +11,7 @@ padding-top: 20px; .card { - background-image: url(pictures/background-amended.jpg); + background-image: $background-image-comics; width: 170px; height: 293px; object-fit: cover; @@ -159,7 +159,6 @@ display: flex; justify-content: center; align-items: end; - background-color: yellow; } } } diff --git a/src/style/characters.scss b/src/style/characters.scss index 80770f1..a230cf3 100644 --- a/src/style/characters.scss +++ b/src/style/characters.scss @@ -21,17 +21,17 @@ button.close-search { font-size: 22px bold; - border: 2px black solid; + border: 2px $background-card solid; border-radius: 20px; padding: 10px; background-color: transparent; - color: black; + color: $background-card; cursor: pointer; &:hover { cursor: pointer; filter: grayscale(0); - box-shadow: 6px 6px black; + box-shadow: 6px 6px $background-card; transform: translate(-2px, -2px); } } @@ -65,7 +65,7 @@ &:hover { cursor: pointer; filter: grayscale(0); - box-shadow: 6px 6px black; + box-shadow: 6px 6px $background-card; transform: translate(-2px, -2px); } @@ -82,7 +82,7 @@ margin: 0 auto; width: 150px; border: solid, $text-color; - background-color: black; + background-color: $background-card; opacity: 85%; height: 70px; margin-top: 10px; diff --git a/src/style/comics-display.scss b/src/style/comics-display.scss index f0376e2..28b4149 100644 --- a/src/style/comics-display.scss +++ b/src/style/comics-display.scss @@ -1,13 +1,13 @@ @use 'settings.scss' as *; .comics-display { - font-family: 'Aclonica', sans-serif; - color: #f4f4f4; + font-family: $font-family; + color: $text-color; display: flex; justify-content: space-around; align-items: center; gap: 12%; - background-color: rgba(0, 0, 0, 0.5); + background-color: $background-comics; max-width: 1000px; margin: 0.4% auto; overflow: hidden; @@ -27,7 +27,7 @@ width: 100%; height: 100%; border-radius: 0.5rem; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 0 10px 0 $background-comics; border-radius: 2.5rem; border: 1px solid $text-color; } diff --git a/src/style/not-found.scss b/src/style/not-found.scss index 992b624..90a9ce4 100644 --- a/src/style/not-found.scss +++ b/src/style/not-found.scss @@ -1,11 +1,12 @@ -@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap'); +@use 'settings.scss' as *; .notFound { - background: linear-gradient($primary-color, #151414 25% 76%, $primary-color); + background: linear-gradient($primary-color, $not-found-color 25% 76%, $primary-color); height: 1100px; display: column; justify-content: center; align-items: center; + font-family: $font-family; h1 { display: flex; @@ -13,14 +14,12 @@ font-size: 100px; color: $text-color; padding-top: 60px; - font-family: 'Aclonica', sans-serif; } h2 { display: flex; justify-content: center; font-size: 50px; color: $text-color; - font-family: 'Aclonica', sans-serif; } img { height: 450px; @@ -50,7 +49,6 @@ } p { - font-family: 'Aclonica', sans-serif; font-size: 50px; color: $text-color; } diff --git a/src/style/settings.scss b/src/style/settings.scss index 8089059..feb2323 100644 --- a/src/style/settings.scss +++ b/src/style/settings.scss @@ -2,11 +2,12 @@ $text-color: #f4f4f4; $background-image: url('/pictures/background.png'); -$background-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +$background-image-comics: url('/pictures/background-amended.jpg'); $background-comics: rgba(0, 0, 0, 0.5); $background-card: #000000bf; $button-color-hover: rgb(32, 73, 211); $primary-color: #670208; +$not-found-color: #151414; //border-radius $border-radius: 0.4rem;