Merge pull request #243 from hasan-deriv/hasan/landscape-mode-in-useD…

…evice

landscape mode to useDevice hook

src/components/PageLayout/__test__/PageLayout.spec.tsx

@@ -32,6 +32,7 @@ describe("PageLayout Component", () => {
             isDesktop: false,
             isTablet: false,
             isTabletPortrait: false,
+            isMobileOrTabletLandscape: false
         }));
         const sidebar = <div>Sidebar</div>;
         render(<PageLayout sidebar={sidebar} />);

src/hooks/useDevice.ts

@@ -10,6 +10,9 @@ export const useDevice = () => {
     const isTabletPortrait = useMediaQuery(
         `(min-width: 601px) and (max-width: 1279px) and (orientation: portrait)`,
     );
+    const isMobileOrTabletLandscape = useMediaQuery(
+        `(max-width: 1279px) and (orientation: landscape)`,
+    );
     return {
         /** returns Larger screen tablets [min-width: 1280px] */
         isDesktop,
@@ -19,5 +22,7 @@ export const useDevice = () => {
         isTablet,
         /** returns tablet screen with portrait orientation [min-width: 601px and max-width: 1279px and orientation: portrait] */
         isTabletPortrait,
+        /** returns mobile or medium screens in landscape orientation [max-width: 1279px and orientation: landscape] */
+        isMobileOrTabletLandscape
     };
 };

src/styles/abstracts/_devices.scss

@@ -42,6 +42,13 @@
     }
 }
 
+@mixin mobile-or-tablet-landscape {
+    @media only screen and (max-width: #{$desktop-width - 1}) and (orientation: landscape) {
+        @content;
+    }
+}
+
+
 @mixin touch-device {
     // add css interaction media query to detect touch devices
     // refer to: https://caniuse.com/#feat=css-media-interaction