Update ratio breakpoints to cover larger sizes landscape and portrait

cher-ami · Oct 15, 2024 · acbc423 · acbc423
1 parent 76ed1a3
commit acbc423
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 13 deletions.
diff --git a/apps/front/src/styles/_breakpoints.scss b/apps/front/src/styles/_breakpoints.scss
@@ -3,6 +3,8 @@
 $breakpoint-mobile: 320px;
 $breakpoint-mobile-horizontal: 500px;
 $breakpoint-tablet: 768px;
+$breakpoint-tablet-height: 950px;
 $breakpoint-laptop: 1024px;
+$breakpoint-bigLaptop-min: 1366px;
 $breakpoint-bigLaptop: 1440px;
 $breakpoint-desktop: 1680px;
diff --git a/apps/front/src/styles/_ratio.scss b/apps/front/src/styles/_ratio.scss
@@ -1,6 +1,7 @@
 @use "./_viewport" as viewport;
 @use "./_breakpoints" as breakpoints;
 @use "./_functions" as fn;
+@use "./_utils" as utils;
 
 /// Set property calculated with VH & VW ratio
 /// @param {css property} $property
@@ -22,6 +23,20 @@
   }
 }
 
+@mixin mobileVH(
+  $property,
+  $n1,
+  $ratioVH: viewport.$viewport-reference-height,
+  $ratioVW: viewport.$viewport-reference-width
+) {
+  #{$property}: #{fn.ratioVH($n1, $ratioVH)};
+  @if $ratioVW > 0 {
+    @media (max-aspect-ratio: #{ #{$ratioVW} / #{$ratioVH+1} }) {
+      #{$property}: #{fn.ratioVW($n1, $ratioVW)};
+    }
+  }
+}
+
 /// Set property calculated with VW ratio
 /// @param {css property} $property
 /// @param {Number} $n1
@@ -87,29 +102,39 @@
   //Mobile
   @include propertyVW($property, $value1);
 
-  //Horizontal Desktop & Tablet
-  @include desktop($breakpoint) {
-    @include propertyVH($property, $value2, $ratioVW: 0);
+  // Landscape mobile
+  @include mobile-landscape {
+    @include propertyVH($property, $value2, viewport.$viewport-reference-width, 0);
   }
 
-  //Portrait Desktop & Tablet
-  @include desktop-portrait {
-    @include propertyVW($property, $value2, viewport.$viewport-reference-tablet-width);
+  // Portrait Tablet
+  @include tablet-portrait {
+    @include propertyVH(
+      $property,
+      $value2,
+      $ratioVW: viewport.$viewport-reference-tablet-width,
+      $ratioVH: viewport.$viewport-reference-tablet-height
+    );
   }
 
   // Landscape Tablet
   @include tablet-landscape {
     @include propertyVH(
       $property,
       $value2,
-      $ratioVW: viewport.$viewport-reference-desktop-width,
-      $ratioVH: viewport.$viewport-reference-desktop-height
+      $ratioVW: viewport.$viewport-reference-tablet-width,
+      $ratioVH: viewport.$viewport-reference-tablet-height
     );
   }
 
-  // Landscape mobile
-  @include mobile-landscape {
-    @include propertyVH($property, $value2, viewport.$viewport-reference-width, 0);
+  //Portrait Desktop & Tablet
+  @include desktop-portrait {
+    @include propertyVW($property, $value2, viewport.$viewport-reference-tablet-width);
+  }
+
+  //Horizontal Desktop & Tablet
+  @include desktop($breakpoint) {
+    @include propertyVH($property, $value2, $ratioVW: 0);
   }
 
   @if $cap {
@@ -146,7 +171,7 @@
 /// Desktop & Tablet portrait media query
 /// @param {string} [$breakpoint=breakpoints.$breakpoint-tablet] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-tablet).
 @mixin desktop-portrait($breakpoint: breakpoints.$breakpoint-tablet) {
-  @media (min-width: $breakpoint) and (orientation: portrait) {
+  @media (min-width: $breakpoint) and (min-height: breakpoints.$breakpoint-bigLaptop) and (orientation: portrait) {
     @content;
   }
 }
@@ -162,7 +187,15 @@
 /// Tablet landscape media query.
 /// @param {string} [$breakpoint=breakpoints.$breakpoint-laptop] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-laptop).
 @mixin tablet-landscape($breakpoint: breakpoints.$breakpoint-laptop) {
-  @media (max-width: #{$breakpoint + 1}) and (orientation: landscape) {
+  @media (max-width: #{breakpoints.$breakpoint-bigLaptop-min + 1}) and (min-width: #{$breakpoint}) and (orientation: landscape) {
+    @content;
+  }
+}
+
+/// Tablet portrait media query.
+/// @param {string} [$breakpoint=breakpoints.$breakpoints-tablet-height] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-laptop).
+@mixin tablet-portrait($breakpoint: breakpoints.$breakpoint-tablet-height) {
+  @media (min-height: #{$breakpoint}) and (orientation: portrait) {
     @content;
   }
 }
diff --git a/apps/front/src/styles/breakpoints-inline.scss b/apps/front/src/styles/breakpoints-inline.scss
@@ -4,7 +4,9 @@
   --breakpoint-mobile: #{$breakpoint-mobile};
   --breakpoint-mobile-horizontal: #{$breakpoint-mobile-horizontal};
   --breakpoint-tablet: #{$breakpoint-tablet};
+  --breakpoint-tablet-height: #{$breakpoint-tablet-height};
   --breakpoint-laptop: #{$breakpoint-laptop};
+  --breakpoint-bigLaptop-min: #{$breakpoint-bigLaptop-min};
   --breakpoint-bigLaptop: #{$breakpoint-bigLaptop};
   --breakpoint-desktop: #{$breakpoint-desktop};
 }