feat: layouts and styles for desktop and mobile

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -68,11 +68,12 @@ const FunnelDnd = <
         dots: true,
         infinite: false,
         speed: 500,
-        slidesToShow: 1,
+        slidesToShow: 1.1,
         slidesToScroll: 1,
         draggable: !activeItem && !activeContainer,
         swipe: !activeItem && !activeContainer,
         arrows: false,
+        swipeToSlide: true,
     };
 
     const renderContainers = () =>
@@ -145,7 +146,7 @@ const FunnelDnd = <
                     renderBody()
                 ) : (
                     <Group
-                        gap="xs"
+                        gap={0}
                         wrap="nowrap"
                         align="start">
                         {renderBody()}

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -8,6 +8,7 @@ import React, {
     useState,
 } from "react";
 import { Active, DndContext, DragEndEvent } from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { SortableContext } from "@dnd-kit/sortable";
 import { LexoRank } from "lexorank";
 import { Box, Flex } from "@mantine/core";
@@ -100,6 +101,7 @@ const SortableDnd = <T extends BaseItem>({
 
     return (
         <DndContext
+            modifiers={[restrictToHorizontalAxis]}
             sensors={sensors}
             onDragStart={({ active }) => setActive(active)}
             onDragEnd={onDragEndLocal}

src/components/layout/PageBlock/PageBlock.module.css

@@ -9,7 +9,15 @@
     }
     @media (min-width: 48em) {
         padding: rem(35);
-        border-radius: rem(40);
+        border-radius: rem(20);
+    }
+}
+
+.mobile-padding-height {
+    height: 100% !important;
+    @media (min-width: 48em) {
+        padding: rem(40);
+        height: 89vh;
     }
 }
 
@@ -41,3 +49,10 @@
         overflow-y: auto;
     }
 }
+
+.transparent {
+    @media (min-width: 48em) {
+        box-shadow: none !important;
+        background-color: transparent !important;
+    }
+}

src/components/layout/PageBlock/PageBlock.tsx

@@ -1,23 +1,27 @@
 import { CSSProperties, FC, ReactNode } from "react";
 import classNames from "classnames";
 import styles from "./PageBlock.module.css";
-5
+
 type Props = {
     children: ReactNode;
     style?: CSSProperties;
+    className?: string;
     fullHeight?: boolean;
     fullHeightFixed?: boolean;
     noBorderRadius?: boolean;
     fullScreenMobile?: boolean;
+    transparent?: boolean;
 };
 
 const PageBlock: FC<Props> = ({
     children,
     style,
+    className = "",
     fullHeight = false,
     fullHeightFixed = false,
     noBorderRadius = false,
     fullScreenMobile = false,
+    transparent = false,
 }) => {
     return (
         <div
@@ -27,7 +31,9 @@ const PageBlock: FC<Props> = ({
                 fullHeight && styles["container-full-height"],
                 fullHeightFixed && styles["container-full-height-fixed"],
                 noBorderRadius && styles["container-no-border-radius"],
-                fullScreenMobile && styles["container-full-screen-mobile"]
+                fullScreenMobile && styles["container-full-screen-mobile"],
+                transparent && styles.transparent,
+                styles[className]
             )}>
             {children}
         </div>

src/components/layout/PageContainer/PageContainer.module.css

@@ -1,7 +1,10 @@
 .container {
     display: flex;
     flex-direction: column;
-    gap: rem(10);
-    min-height: 86vh;
+    min-height: 100vh;
     background-color: transparent;
+
+    @media (min-width: 48em) {
+        gap: rem(10);
+    }
 }

src/components/layout/SmallPageBlock/SmallPageBlock.module.css

@@ -0,0 +1,36 @@
+
+.container {
+    border-radius: 20px;
+    margin: 18px;
+
+    @mixin dark {
+        background-color: #212121;
+        box-shadow: 1px 1px 10px 1px var(--mantine-color-dark-6);
+    }
+    @mixin light {
+        background-color: #fcfdff;
+        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.04);
+    }
+}
+
+.container-active {
+    @mixin dark {
+        background-color: var(--mantine-color-dark-8);
+        box-shadow: 5px 5px 20px 1px var(--mantine-color-dark-6);
+    }
+    @mixin light {
+        background-color: white;
+        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.16);
+    }
+}
+
+.container:hover {
+    @mixin dark {
+        background-color: var(--mantine-color-dark-8);
+        box-shadow: 5px 5px 20px 1px var(--mantine-color-dark-6);
+    }
+    @mixin light {
+        background-color: white;
+        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.16);
+    }
+}

src/components/layout/SmallPageBlock/SmallPageBlock.tsx

@@ -0,0 +1,23 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import classNames from "classnames";
+import styles from "@/components/layout/SmallPageBlock/SmallPageBlock.module.css";
+
+type Props = {
+    children: ReactNode;
+    style?: CSSProperties;
+    active?: boolean;
+};
+
+const SmallPageBlock: FC<Props> = ({ children, style, active = false }) => {
+    return (
+        <div
+            className={classNames(
+                styles.container,
+                active && styles["container-active"]
+            )}
+            style={style}>
+            {children}
+        </div>
+    );
+};
+export default SmallPageBlock;