Merge pull request #5 from visoftsolutions/4-develop-mobile-version-o…

…f-poc-leveraging-vanilla-extract

mobile & desktop view

compose.yaml

@@ -6,4 +6,4 @@ services:
       context: ./
       dockerfile: ./ksox-finance.dockerfile
     ports:
-      - 3000:80
+      - 0.0.0.0:3000:80

src/components/iconButton/iconButton.css.ts

@@ -1,11 +1,18 @@
-import { style } from "@vanilla-extract/css";
+import { type ComplexStyleRule, style } from "@vanilla-extract/css";
 import { vars } from "~/theme.css";
 
+const mobile: ComplexStyleRule = {
+  padding: "16px",
+};
+
+const desktop: ComplexStyleRule = {
+  padding: "8px",
+};
+
 export const button = style({
   display: "grid",
   justifyItems: "center",
   alignItems: "center",
-  padding: "8px",
   borderRadius: "8px",
   transition: "background-color",
   transitionDuration: vars.transitions.duration,
@@ -14,6 +21,10 @@ export const button = style({
     backgroundColor: vars.color.backgroundHighlight,
   },
   cursor: "pointer",
+  "@media": {
+    "screen and (min-width: 769px)": desktop,
+    "screen and (max-width: 768px)": mobile,
+  },
 });
 
 export const iconSlot = style({

src/components/sidenav/sidenav.css.ts

@@ -1,7 +1,20 @@
-import { style } from "@vanilla-extract/css";
+import { type ComplexStyleRule, style } from "@vanilla-extract/css";
+
+const mobile: ComplexStyleRule = {
+  gridTemplateColumns: "repeat( auto-fit, minmax(60px, 1fr) )",
+};
+
+const desktop: ComplexStyleRule = {
+  gridTemplateRows: "repeat(6, 1fr)",
+};
 
 export const sidenav = style({
   display: "grid",
-  gridTemplateRows: "repeat(6, 1fr)",
   gap: "2px",
+  justifyItems: "center",
+  justifyContent: "center",
+  "@media": {
+    "screen and (min-width: 769px)": desktop,
+    "screen and (max-width: 768px)": mobile,
+  },
 });

src/global.css

@@ -28,8 +28,9 @@ html {
     "Noto Color Emoji";
 }
 
+html,
 body {
-  padding: 0;
+  height: 100%;
   margin: 0;
-  line-height: inherit;
+  padding: 0;
 }

src/routes/header.css.ts

@@ -1,6 +1,18 @@
-import { style } from "@vanilla-extract/css";
+import { type ComplexStyleRule, style } from "@vanilla-extract/css";
 import { vars } from "~/theme.css";
 
+const mobile: ComplexStyleRule = {
+  display: "none",
+};
+
+const desktop: ComplexStyleRule = {
+  gridTemplateColumns: "auto 1fr",
+};
+
 export const header = style({
   backgroundColor: vars.color.background,
+  "@media": {
+    "screen and (min-width: 769px)": desktop,
+    "screen and (max-width: 768px)": mobile,
+  },
 });

src/routes/layout.css.ts

@@ -1,18 +1,42 @@
-import { style } from "@vanilla-extract/css";
+import { type ComplexStyleRule, style } from "@vanilla-extract/css";
 import { vars } from "~/theme.css";
 
+const layoutRowMobile: ComplexStyleRule = {
+  gridTemplateRows: "1fr",
+};
+
+const layoutRowDesktop: ComplexStyleRule = {
+  gridTemplateRows: "auto 1fr",
+};
+
 export const layoutRow = style({
-  width: "100vw",
-  height: "100vh",
+  height: "100%",
   display: "grid",
-  gridTemplateRows: "auto 1fr",
+  gridAutoFlow: "row",
   backgroundColor: vars.color.backgroundHighlight,
   gap: "1px",
+  "@media": {
+    "screen and (min-width: 768px)": layoutRowDesktop,
+    "screen and (max-width: 768px)": layoutRowMobile,
+  },
 });
 
+const layoutColumnMobile: ComplexStyleRule = {
+  gridTemplateRows: "1fr auto",
+  gridAutoFlow: "row",
+};
+
+const layoutColumnDesktop: ComplexStyleRule = {
+  gridTemplateColumns: "auto 1fr",
+  gridAutoFlow: "column",
+};
+
 export const layoutColumn = style({
   display: "grid",
-  gridTemplateColumns: "auto 1fr",
-  gap: "1px",
   backgroundColor: vars.color.backgroundHighlight,
+  gap: "1px",
+  "@media": {
+    "screen and (min-width: 769px)": layoutColumnDesktop,
+    "screen and (max-width: 768px)": layoutColumnMobile,
+  },
 });

src/routes/main.css.ts

@@ -1,6 +1,20 @@
-import { style } from "@vanilla-extract/css";
+import { type ComplexStyleRule, style } from "@vanilla-extract/css";
 import { vars } from "~/theme.css";
 
+const mobile: ComplexStyleRule = {
+  gridRowStart: "1",
+  gridRowEnd: "2",
+};
+
+const desktop: ComplexStyleRule = {
+  gridColumnStart: "2",
+  gridColumnEnd: "3",
+};
+
 export const main = style({
   backgroundColor: vars.color.background,
+  "@media": {
+    "screen and (min-width: 769px)": desktop,
+    "screen and (max-width: 768px)": mobile,
+  },
 });

src/routes/nav.css.ts

@@ -1,6 +1,20 @@
-import { style } from "@vanilla-extract/css";
+import { type ComplexStyleRule, style } from "@vanilla-extract/css";
 import { vars } from "~/theme.css";
 
+const mobile: ComplexStyleRule = {
+  gridRowStart: "2",
+  gridRowEnd: "3",
+};
+
+const desktop: ComplexStyleRule = {
+  gridColumnStart: "1",
+  gridColumnEnd: "2",
+};
+
 export const nav = style({
   backgroundColor: vars.color.background,
+  "@media": {
+    "screen and (min-width: 769px)": desktop,
+    "screen and (max-width: 768px)": mobile,
+  },
 });