Merge pull request #183 from cher-ami/fix-ratio-landscape

Review ratio landscape mobile & tablet

apps/front/src/index-client.tsx

@@ -26,11 +26,6 @@ log("public env:", import.meta.env)
 const base: string = process.env.VITE_APP_BASE || import.meta.env.VITE_APP_BASE
 log("Selected base", base)
 
-/**
- * Init global helpers
- */
-new VhHelper()
-
 /**
  * Create a history for the global router instance
  * @doc https://github.com/remix-run/history/blob/dev/docs/api-reference.md

apps/front/src/styles/_functions.scss

@@ -55,7 +55,7 @@
 /// @param {Number} $value -
 /// @return {string} - pixel value
 @function toPx($value) {
-  @if is-number($value) {
+  @if is-absolute-number($value) {
     @return #{$value} + px;
   } @else {
     @return $value;
@@ -66,7 +66,7 @@
 /// @param {Number} $value -
 /// @return {string} - rem value
 @function toRem($value) {
-  @if is-number($value) {
+  @if is-absolute-number($value) {
     @return #{$value} + rem;
   } @else {
     @return $value;

apps/front/src/styles/_ratio.scss

@@ -33,10 +33,10 @@
 
 /// Set property rem
 /// @param {css property} $property
-/// @param {Number | Number[]} $value1 - desktop value
-/// @param {Number | Number[]} $value2 [] - mobile value
+/// @param {Number | Number[]} $value1 - mobile value
+/// @param {Number | Number[]} $value2 - desktop value
 /// @output
-@mixin propertyRem($property, $value1, $value2: $value1) {
+@mixin rem($property, $value1, $value2: $value1) {
   @if length($value1) == 1 {
     #{$property}: fn.toRem($value1);
   } @else if length($value1) == 2 {
@@ -52,7 +52,7 @@
       fn.toRem(nth($value1, 4));
   }
   @if $value2 != $value1 {
-    @media screen and (max-width: breakpoints.$breakpoint-tablet) {
+    @media (min-width: breakpoints.$breakpoint-tablet) {
       @if length($value2) == 1 {
         #{$property}: fn.toRem($value2);
       } @else if length($value2) == 2 {
@@ -78,10 +78,28 @@
   $breakpoint: breakpoints.$breakpoint-tablet,
   $cap: false
 ) {
-  @include propertyVH($property, $value1);
-  @media screen and (max-width: breakpoints.$breakpoint-tablet) {
-    @include propertyVW($property, $value2);
+  @include propertyVW($property, $value1);
+  @media (min-width: $breakpoint) {
+    @include propertyVH($property, $value2);
   }
+
+  @media (min-width: breakpoints.$breakpoint-tablet) and (orientation: portrait) {
+    @include propertyVW($property, $value2, viewport.$viewport-reference-tablet-width);
+  }
+
+  @media (min-width: breakpoints.$breakpoint-laptop) and (orientation: landscape) {
+    @include propertyVH(
+      $property,
+      $value2,
+      viewport.$viewport-reference-desktop-height,
+      0
+    );
+  }
+
+  @media (max-width: #{breakpoints.$breakpoint-laptop - 1}) and (orientation: landscape) {
+    @include propertyVH($property, $value2, viewport.$viewport-reference-width, 0);
+  }
+
   @if $cap {
     @media (min-width: breakpoints.$breakpoint-bigLaptop) {
       @if length($value1) == 1 {

apps/front/src/styles/_viewport.scss

@@ -1,5 +1,7 @@
 // Used by ratio
 $viewport-reference-width: 375;
 $viewport-reference-height: 667;
+$viewport-reference-tablet-width: 768;
+$viewport-reference-tablet-height: 1024;
 $viewport-reference-desktop-width: 1440;
-$viewport-reference-desktop-height: 900;
+$viewport-reference-desktop-height: 800;