Merge pull request #184 from cher-ami/add-media-queries

Adding desktop, mobile-landscape & desktop-portrait media queries as mixins.

apps/front/src/pages/homePage/HomePage.module.scss

@@ -1,4 +1,22 @@
 @use "../../styles/reference" as *;
 
 .root {
+  background: salmon;
+
+  @include desktop {
+    background: red;
+  }
+
+  @include desktop-portrait {
+    background: green;
+  }
+
+  @include mobile-landscape {
+    background: blue;
+  }
+}
+
+.fontSize {
+  @include absoluteCenter();
+  font-size: 40rem;
 }

apps/front/src/pages/homePage/HomePage.tsx

@@ -1,8 +1,16 @@
 import css from "./HomePage.module.scss"
-import React, { ForwardedRef, forwardRef, Suspense, useEffect, useRef } from "react"
+import React, {
+  ForwardedRef,
+  forwardRef,
+  Suspense,
+  useEffect,
+  useRef,
+  useState
+} from "react"
 import { useStack } from "@cher-ami/router"
 import debug from "@cher-ami/debug"
 import { MetasManager, TMetaTags } from "~/libs/dom/MetaManager"
+import { listen } from "@cher-ami/utils"
 const TestComponent = React.lazy(() => import("./LazyTest"))
 
 interface IProps {
@@ -19,8 +27,21 @@ const log = debug(`front:${componentName}`)
  * @name HomePage
  */
 function HomePage(props: IProps, handleRef: ForwardedRef<any>) {
+  //--------------------------------------------------------------------- REFS
   const rootRef = useRef<HTMLDivElement>(null)
 
+  //--------------------------------------------------------------------- STATE
+  const [fontSize, setFontSize] = useState<string>("0")
+
+  //--------------------------------------------------------------------- EFFECTS
+
+  useEffect(() => {
+    setFontSize(window.getComputedStyle(document.body).getPropertyValue("font-size"))
+    return listen(window, "resize", () =>
+      setFontSize(window.getComputedStyle(document.body).getPropertyValue("font-size"))
+    )
+  }, [])
+
   /**
    * Client meta
    */
@@ -53,6 +74,7 @@ function HomePage(props: IProps, handleRef: ForwardedRef<any>) {
         <TestComponent />
       </Suspense>
       {componentName}
+      <div className={css.fontSize}>{fontSize}</div>
       <br />
       <br />
       <div>data from getStaticProps: </div>

apps/front/src/styles/_breakpoints.scss

@@ -1,6 +1,7 @@
 // breakpoints
 // need both for scss and css
 $breakpoint-mobile: 320px;
+$breakpoint-mobile-horizontal: 500px;
 $breakpoint-tablet: 768px;
 $breakpoint-laptop: 1024px;
 $breakpoint-bigLaptop: 1440px;

apps/front/src/styles/_ratio.scss

@@ -71,32 +71,34 @@
   }
 }
 
+/// Mixin pour manipuler les propriétés des vues en fonction des breakpoints.
+/// @param {string} $property - La propriété CSS à manipuler.
+/// @param {any} $value1 - La première valeur pour cette propriété.
+/// @param {any} [$value2=$value1] - La deuxième valeur pour cette propriété (par défaut égale à $value1).
+/// @param {string} [$breakpoint=breakpoints.$breakpoint-tablet] - Le point de rupture (breakpoint) pour les médias queries (par défaut égal à breakpoints.$breakpoint-tablet).
+/// @param {boolean} [$cap=false] - Indique si les valeurs doivent être plafonnées (par défaut false).
 @mixin propertyViewport(
   $property,
   $value1,
   $value2: $value1,
   $breakpoint: breakpoints.$breakpoint-tablet,
   $cap: false
 ) {
+  //Mobile
   @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);
+  //Horizontal Desktop & Tablet
+  @include desktop($breakpoint) {
+    @include propertyVH($property, $value2, $ratioVW: 0);
   }
 
-  @media (min-width: breakpoints.$breakpoint-laptop) and (orientation: landscape) {
-    @include propertyVH(
-      $property,
-      $value2,
-      viewport.$viewport-reference-desktop-height,
-      0
-    );
+  //Portrait Desktop & Tablet
+  @include desktop-portrait {
+    @include propertyVW($property, $value2, viewport.$viewport-reference-tablet-width);
   }
 
-  @media (max-width: #{breakpoints.$breakpoint-laptop - 1}) and (orientation: landscape) {
+  //Horizontal mobile
+  @include mobile-landscape {
     @include propertyVH($property, $value2, viewport.$viewport-reference-width, 0);
   }
 
@@ -119,3 +121,30 @@
     }
   }
 }
+
+/// Desktop 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(
+  $horizontalBreakpoint: breakpoints.$breakpoint-tablet,
+  $verticalBreakpoint: breakpoints.$breakpoint-mobile-horizontal
+) {
+  @media (min-width: $horizontalBreakpoint) and (min-height: $verticalBreakpoint) and (orientation: landscape) {
+    @content;
+  }
+}
+
+/// 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) {
+    @content;
+  }
+}
+
+/// Mobile 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 mobile-landscape($breakpoint: breakpoints.$breakpoint-laptop) {
+  @media (max-width: #{$breakpoint - 1}) and (orientation: landscape) {
+    @content;
+  }
+}

apps/front/src/styles/breakpoints-inline.scss

@@ -2,6 +2,7 @@
 
 :root {
   --breakpoint-mobile: #{$breakpoint-mobile};
+  --breakpoint-mobile-horizontal: #{$breakpoint-mobile-horizontal};
   --breakpoint-tablet: #{$breakpoint-tablet};
   --breakpoint-laptop: #{$breakpoint-laptop};
   --breakpoint-bigLaptop: #{$breakpoint-bigLaptop};