From 8f3f8354067b08823df03a162952af6303d676ae Mon Sep 17 00:00:00 2001 From: benoitMarie09 Date: Fri, 12 May 2023 13:36:47 +0200 Subject: [PATCH 1/8] modif : breakpoint du responsive mobile en bas de page cssz --- .../src/components/CubicMenu/CubicMenu.scss | 2 +- .../src/components/Project/Cube/Cube.jsx | 2 +- .../src/components/Project/Cube/Cube.scss | 25 ++-- .../src/components/Project/Info/Info.scss | 54 +++++-- portfolio/src/components/Project/Project.scss | 135 +++++++++++++----- portfolio/src/components/Sidebar/Sidebar.scss | 20 ++- portfolio/src/components/Slide/VSlide.scss | 4 +- .../src/pages/ProjectsPage/ProjectsPage.scss | 25 +++- 8 files changed, 203 insertions(+), 64 deletions(-) diff --git a/portfolio/src/components/CubicMenu/CubicMenu.scss b/portfolio/src/components/CubicMenu/CubicMenu.scss index d898c9e..774dd25 100644 --- a/portfolio/src/components/CubicMenu/CubicMenu.scss +++ b/portfolio/src/components/CubicMenu/CubicMenu.scss @@ -4,7 +4,7 @@ .nav { position: absolute; - width: 100vw; + width: 97vw ; height: 0; padding: 10px; padding-top: 30px; diff --git a/portfolio/src/components/Project/Cube/Cube.jsx b/portfolio/src/components/Project/Cube/Cube.jsx index a9186c8..ef59de9 100644 --- a/portfolio/src/components/Project/Cube/Cube.jsx +++ b/portfolio/src/components/Project/Cube/Cube.jsx @@ -224,7 +224,7 @@ export default function Cube(props) { }`} id={`scene${id}`} > -
+
md +@media screen and ( min-width: $md ) { + // Increase font size and middle line. + .info{ + font-size: 1em; + line-height: 1em; + border-right: thick double $primary-color; + + // Replace description table and increse font size. + &__description { + line-height: 1.5em; + font-size: 1.4em; + } + } + +} + +// When viewport width > lg +@media screen and ( min-width: $xl ) { + // Increase font size and middle line. + .info{ + font-size: 1.2em; + line-height: 1.2em; + border-right: thick double $primary-color; + + // Replace description table and increse font size. + &__description { + align-items: flex-start; + line-height: 1.5em; + font-size: 1.4em; + padding-top: 40%; + } + } + +} + +// when viewport width < $md and height < $sm ( mobile landscape mode ) +@media screen and ( max-width: $md ) and ( max-height: $sm ) { + .info{ + border-right: thick double $primary-color; + } +} \ No newline at end of file diff --git a/portfolio/src/components/Project/Project.scss b/portfolio/src/components/Project/Project.scss index de15fb6..7be46b9 100644 --- a/portfolio/src/components/Project/Project.scss +++ b/portfolio/src/components/Project/Project.scss @@ -9,15 +9,7 @@ grid-template-columns: 100%; overflow: hidden; border: thick double $primary-color; - @include breakpoint(sm){ - width: 85vw; - height: 80%; - margin: 70px 7.5vw; - } - @include breakpoint(md) { - grid-template-rows: 70px 1fr; - grid-template-columns: min(400px, 50%) auto; - } + &__title { height: 100%; background-color: fade-out($color: $primary-color, $amount: 0.5); @@ -26,23 +18,13 @@ justify-content: center; align-items: center; z-index: 100; - @include breakpoint(md) { - grid-column-start: 1; - grid-column-end: 3; - } + h2 { color: black; } } &__cube { height: 100%; - @include breakpoint(md) { - grid-column-start: 2; - grid-column-end: 3; - grid-row-start: 2; - grid-row-end: 3; - height: 100%; - } .layout { width: 100%; height: calc(100% - 60px); @@ -50,10 +32,6 @@ .scene { position: relative; top: 20%; - @include breakpoint(md) { - top: -10%; - left: 5%; - } .cube { user-select: none; pointer-events: none; @@ -63,14 +41,6 @@ } &__info { height: 100%; - @include breakpoint(md) { - grid-column-start: 1; - grid-column-end: 2; - grid-row-start: 2; - grid-row-end: 3; - height: 100%; - overflow-y: hidden; - } &::-webkit-scrollbar { width: 11px; } @@ -86,3 +56,104 @@ } } } + +// When viewport width > sm +@media screen and (min-width: $sm) { + .project{ + // shorten the size of the project card to include sidebars. + width: calc(100% - 140px); + height: calc(100% - 90px); + } + +} + +// When viewport width > md +@media screen and (min-width: $md) { + .project{ + // Switch to 2 columns with shoter header. + grid-template-rows: 70px 1fr; + grid-template-columns: min(400px, 50%) auto; + + // the header spread to 2 columns. + &__title{ + grid-column-start: 1; + grid-column-end: 3; + } + + // The cube goes on the right side column + &__cube { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 2; + grid-row-end: 3; + height: 100%; + // adjust cube position + .layout{ + .scene{ + top: -10%; + left: 5%; + } + } + } + + // The info goes on the left side column + &__info { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 2; + grid-row-end: 3; + height: 100%; + overflow-y: hidden; + } + } +} + +// When viewport width > sm +@media screen and (min-width: $xl) { + .project{ + // shorten the size of the project card to include sidebars. + width: calc(100% - 140px); + height: 90%; + margin: 0 0; + + } + +} + +// when viewport width < $md and height < $sm ( mobile landscape mode ) +@media screen and ( max-width: $md ) and ( max-height: $sm ) and (orientation: landscape) { + .project{ + // Switch to 2 columns. + grid-template-rows: 100px 1fr; + grid-template-columns: 50% 50%; + justify-content: start; + align-items: start; + width: 100vw; + height: 100%; + margin: 0 0; + + // the header spread to 2 columns. + &__title{ + grid-column-start: 1; + grid-column-end: 3; + } + + // The cube goes on the right side column + &__cube { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 2; + grid-row-end: 3; + height: 100%; + // adjust cube position + .layout{ + .scene{ + top: -10%; + left: 5%; + } + } + } + } +} + + diff --git a/portfolio/src/components/Sidebar/Sidebar.scss b/portfolio/src/components/Sidebar/Sidebar.scss index 491a0cf..c92ca12 100644 --- a/portfolio/src/components/Sidebar/Sidebar.scss +++ b/portfolio/src/components/Sidebar/Sidebar.scss @@ -4,9 +4,7 @@ .Sidebar { position: absolute; height: 100%; - width: 7.5%; - min-width: 30px; - max-width: 70px; + width: 70px; background-color: fade-out($primary-color, 0.85); transition: opacity 1.4s ease, background-color 2s ease; display: none; @@ -15,9 +13,6 @@ z-index: 900; user-select: none; cursor: url(../../../public/images/cursors-pointer.png), pointer; - @include breakpoint(sm){ - display : flex; - } &__text { color: lighten($primary-color, 40%); writing-mode: vertical-rl; @@ -57,3 +52,16 @@ } } } + +@media screen and ( min-width: $sm ){ + .Sidebar{ + display : flex; + } +} + +// when viewport width < $md and height < $sm ( mobile landscape mode ) +@media screen and ( max-width: $md ) and ( max-height: $sm ) { + .Sidebar{ + display: none; + } +} \ No newline at end of file diff --git a/portfolio/src/components/Slide/VSlide.scss b/portfolio/src/components/Slide/VSlide.scss index d719b56..acc469a 100644 --- a/portfolio/src/components/Slide/VSlide.scss +++ b/portfolio/src/components/Slide/VSlide.scss @@ -3,9 +3,11 @@ .Vslide { display: flex; - flex-direction: column; + + justify-content: center; flex-wrap: wrap; height: 100%; + width: 100%; position: absolute; overflow: hidden; transform: translateY(0); diff --git a/portfolio/src/pages/ProjectsPage/ProjectsPage.scss b/portfolio/src/pages/ProjectsPage/ProjectsPage.scss index aa7915e..84b744c 100644 --- a/portfolio/src/pages/ProjectsPage/ProjectsPage.scss +++ b/portfolio/src/pages/ProjectsPage/ProjectsPage.scss @@ -19,10 +19,7 @@ z-index: 1000; perspective: 170vw; perspective-origin: 170% -60%; - @include breakpoint(sm){ - top : auto; - bottom: 0px; - } + .scene { position: relative; transform-style: preserve-3d; @@ -42,3 +39,23 @@ } } } + +// when viewport width > $sm +@media screen and ( min-width: $sm ) { + .projects{ + // place the navigation cubes at the bottom of the page + &__navigation{ + top : auto; + bottom: 0px; + } + } +} + +// when viewport width < $md and height < $sm ( mobile landscape mode ) +@media screen and ( max-width: $md ) and ( max-height: $sm ) { + .projects{ + &__navigation{ + top : 30px; + } + } +} \ No newline at end of file From 36b8144d114dc37691b67ed175bb9b94a78cdcb0 Mon Sep 17 00:00:00 2001 From: benoitMarie09 Date: Fri, 12 May 2023 13:37:34 +0200 Subject: [PATCH 2/8] modif : taille des cube avec nouvelle class et mixin scss --- .../src/components/CubicMenu/CubicMenu.jsx | 2 +- .../src/pages/ProjectsPage/ProjectsPage.jsx | 2 +- portfolio/src/styles/_cubes.scss | 28 ++++++++++++++----- portfolio/src/styles/_variables.scss | 20 ++++++++++--- 4 files changed, 39 insertions(+), 13 deletions(-) diff --git a/portfolio/src/components/CubicMenu/CubicMenu.jsx b/portfolio/src/components/CubicMenu/CubicMenu.jsx index 30a8ed5..e020645 100644 --- a/portfolio/src/components/CubicMenu/CubicMenu.jsx +++ b/portfolio/src/components/CubicMenu/CubicMenu.jsx @@ -54,7 +54,7 @@ const CubicMenu = () => {
setMenuOpen(!isMenuOpen)} > diff --git a/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx b/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx index 083883a..787bba3 100644 --- a/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx +++ b/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx @@ -36,7 +36,7 @@ export default function ProjectsPage() { {projects.getProjects().map((projectsItems) => (
Date: Fri, 12 May 2023 14:24:39 +0200 Subject: [PATCH 3/8] modif : deplacement des buttons en landscape et taille du cube --- .../src/components/Project/Info/Info.scss | 10 +++++- portfolio/src/components/Project/Project.scss | 4 ++- .../src/pages/ProjectsPage/ProjectsPage.jsx | 2 +- .../src/pages/ProjectsPage/ProjectsPage.scss | 5 ++- portfolio/src/styles/_cubes.scss | 19 +++++++++-- portfolio/src/styles/_mixins.scss | 33 +++++++++++++++++++ 6 files changed, 67 insertions(+), 6 deletions(-) diff --git a/portfolio/src/components/Project/Info/Info.scss b/portfolio/src/components/Project/Info/Info.scss index 66777e7..572b8b9 100644 --- a/portfolio/src/components/Project/Info/Info.scss +++ b/portfolio/src/components/Project/Info/Info.scss @@ -96,6 +96,14 @@ // when viewport width < $md and height < $sm ( mobile landscape mode ) @media screen and ( max-width: $md ) and ( max-height: $sm ) { .info{ - border-right: thick double $primary-color; + border-right: thick double $primary-color;* + + &__table{ + transform : translateY(60px) + } + + &__links{ + transform: translateX(calc(100% + 7px) ); + } } } \ No newline at end of file diff --git a/portfolio/src/components/Project/Project.scss b/portfolio/src/components/Project/Project.scss index 7be46b9..57e698b 100644 --- a/portfolio/src/components/Project/Project.scss +++ b/portfolio/src/components/Project/Project.scss @@ -124,7 +124,7 @@ @media screen and ( max-width: $md ) and ( max-height: $sm ) and (orientation: landscape) { .project{ // Switch to 2 columns. - grid-template-rows: 100px 1fr; + grid-template-rows: 70px 1fr; grid-template-columns: 50% 50%; justify-content: start; align-items: start; @@ -136,6 +136,8 @@ &__title{ grid-column-start: 1; grid-column-end: 3; + align-items: end; + padding-bottom: 5px; } // The cube goes on the right side column diff --git a/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx b/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx index 787bba3..7e085dd 100644 --- a/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx +++ b/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx @@ -36,7 +36,7 @@ export default function ProjectsPage() { {projects.getProjects().map((projectsItems) => (
Date: Fri, 12 May 2023 15:07:39 +0200 Subject: [PATCH 4/8] modif : resize button in project using grid --- .../src/components/Project/Info/Info.scss | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/portfolio/src/components/Project/Info/Info.scss b/portfolio/src/components/Project/Info/Info.scss index 572b8b9..7645fbf 100644 --- a/portfolio/src/components/Project/Info/Info.scss +++ b/portfolio/src/components/Project/Info/Info.scss @@ -96,14 +96,26 @@ // when viewport width < $md and height < $sm ( mobile landscape mode ) @media screen and ( max-width: $md ) and ( max-height: $sm ) { .info{ - border-right: thick double $primary-color;* - + width : 100vw; + border-right: thick double $primary-color; + grid-template-columns: 50% 50%; + grid-template-rows: auto 60px; + column-gap: 2px; + + &__description { + padding: auto auto; + overflow: hidden; + grid-column-start: 1; + grid-column-end: 2; + } &__table{ - transform : translateY(60px) + grid-column-start: 1; + grid-column-end: 2; } &__links{ - transform: translateX(calc(100% + 7px) ); + grid-column-start: 2; + grid-column-end: 3; } } } \ No newline at end of file From 82f0c94dd8b6af480974c89989e434b235f21862 Mon Sep 17 00:00:00 2001 From: benoitMarie09 Date: Fri, 12 May 2023 16:04:35 +0200 Subject: [PATCH 5/8] fix : bug landscape --- portfolio/src/components/Project/Info/Info.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/portfolio/src/components/Project/Info/Info.scss b/portfolio/src/components/Project/Info/Info.scss index 7645fbf..3a3353c 100644 --- a/portfolio/src/components/Project/Info/Info.scss +++ b/portfolio/src/components/Project/Info/Info.scss @@ -94,7 +94,7 @@ } // when viewport width < $md and height < $sm ( mobile landscape mode ) -@media screen and ( max-width: $md ) and ( max-height: $sm ) { +@media screen and ( max-width: $md ) and ( max-height: $sm ) and (orientation: landscape) { .info{ width : 100vw; border-right: thick double $primary-color; From 0eb3a1a9490ace65785d640d2e9b94c021903a2b Mon Sep 17 00:00:00 2001 From: ben Date: Thu, 19 Oct 2023 09:38:20 +0200 Subject: [PATCH 6/8] fix cube rotation --- portfolio/src/components/Project/Project.jsx | 2 +- portfolio/src/pages/ProjectsPage/ProjectsPage.jsx | 8 ++++---- portfolio/src/styles/_cubes.scss | 3 +++ portfolio/src/styles/_variables.scss | 2 +- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/portfolio/src/components/Project/Project.jsx b/portfolio/src/components/Project/Project.jsx index e22df99..b58e2ca 100644 --- a/portfolio/src/components/Project/Project.jsx +++ b/portfolio/src/components/Project/Project.jsx @@ -17,7 +17,7 @@ export default function Project(props) {

{projectItems.details.name}

- +
diff --git a/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx b/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx index 539011a..fcc3ce7 100644 --- a/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx +++ b/portfolio/src/pages/ProjectsPage/ProjectsPage.jsx @@ -68,13 +68,13 @@ export default function ProjectsPage() {