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

…f-poc-leveraging-vanilla-extract 4 develop mobile version of poc leveraging vanilla extract
visoftsolutions · Oct 19, 2023 · 30e960c · 30e960c
2 parents a7b8851 + 63d0af7
commit 30e960c
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 61 deletions.
diff --git a/src/breakpoint.css.ts b/src/breakpoint.css.ts
@@ -0,0 +1,7 @@
+export const breakpoints = {
+  desktop: "768px",
+};
+
+export const mediaQuery = {
+  desktop: `screen and (min-width: ${breakpoints.desktop})`,
+};
diff --git a/src/components/iconButton/iconButton.css.ts b/src/components/iconButton/iconButton.css.ts
@@ -1,4 +1,5 @@
 import { type ComplexStyleRule, style } from "@vanilla-extract/css";
+import { mediaQuery } from "~/breakpoint.css";
 import { vars } from "~/theme.css";
 
 const mobile: ComplexStyleRule = {
@@ -9,23 +10,25 @@ const desktop: ComplexStyleRule = {
   padding: "8px",
 };
 
-export const button = style({
-  display: "grid",
-  justifyItems: "center",
-  alignItems: "center",
-  borderRadius: "8px",
-  transition: "background-color",
-  transitionDuration: vars.transitions.duration,
-  transitionTimingFunction: vars.transitions.timingFunction,
-  ":hover": {
-    backgroundColor: vars.color.backgroundHighlight,
+export const button = style([
+  mobile,
+  {
+    display: "grid",
+    justifyItems: "center",
+    alignItems: "center",
+    borderRadius: "8px",
+    transition: "background-color",
+    transitionDuration: vars.transitions.duration,
+    transitionTimingFunction: vars.transitions.timingFunction,
+    ":hover": {
+      backgroundColor: vars.color.backgroundHighlight,
+    },
+    cursor: "pointer",
+    "@media": {
+      [mediaQuery.desktop]: desktop,
+    },
   },
-  cursor: "pointer",
-  "@media": {
-    "screen and (min-width: 769px)": desktop,
-    "screen and (max-width: 768px)": mobile,
-  },
-});
+]);
 
 export const iconSlot = style({
   width: "24px",

diff --git a/src/components/sidenav/sidenav.css.ts b/src/components/sidenav/sidenav.css.ts
@@ -1,20 +1,25 @@
 import { type ComplexStyleRule, style } from "@vanilla-extract/css";
+import { mediaQuery } from "~/breakpoint.css";
 
 const mobile: ComplexStyleRule = {
   gridTemplateColumns: "repeat( auto-fit, minmax(60px, 1fr) )",
+  gridTemplateRows: "none",
 };
 
 const desktop: ComplexStyleRule = {
+  gridTemplateColumns: "none",
   gridTemplateRows: "repeat(6, 1fr)",
 };
 
-export const sidenav = style({
-  display: "grid",
-  gap: "2px",
-  justifyItems: "center",
-  justifyContent: "center",
-  "@media": {
-    "screen and (min-width: 769px)": desktop,
-    "screen and (max-width: 768px)": mobile,
+export const sidenav = style([
+  mobile,
+  {
+    display: "grid",
+    gap: "2px",
+    justifyItems: "center",
+    justifyContent: "center",
+    "@media": {
+      [mediaQuery.desktop]: desktop,
+    },
   },
-});
+]);
diff --git a/src/routes/header.css.ts b/src/routes/header.css.ts
@@ -1,18 +1,23 @@
 import { type ComplexStyleRule, style } from "@vanilla-extract/css";
+import { mediaQuery } from "~/breakpoint.css";
 import { vars } from "~/theme.css";
 
 const mobile: ComplexStyleRule = {
   display: "none",
+  gridTemplateColumns: "1fr",
 };
 
 const desktop: ComplexStyleRule = {
+  display: "block",
   gridTemplateColumns: "auto 1fr",
 };
 
-export const header = style({
-  backgroundColor: vars.color.background,
-  "@media": {
-    "screen and (min-width: 769px)": desktop,
-    "screen and (max-width: 768px)": mobile,
+export const header = style([
+  mobile,
+  {
+    backgroundColor: vars.color.background,
+    "@media": {
+      [mediaQuery.desktop]: desktop,
+    },
   },
-});
+]);
diff --git a/src/routes/layout.css.ts b/src/routes/layout.css.ts
@@ -1,4 +1,5 @@
 import { type ComplexStyleRule, style } from "@vanilla-extract/css";
+import { mediaQuery } from "~/breakpoint.css";
 import { vars } from "~/theme.css";
 
 const layoutRowMobile: ComplexStyleRule = {
@@ -9,34 +10,40 @@ const layoutRowDesktop: ComplexStyleRule = {
   gridTemplateRows: "auto 1fr",
 };
 
-export const layoutRow = style({
-  height: "100%",
-  display: "grid",
-  gridAutoFlow: "row",
-  backgroundColor: vars.color.backgroundHighlight,
-  gap: "1px",
-  "@media": {
-    "screen and (min-width: 768px)": layoutRowDesktop,
-    "screen and (max-width: 768px)": layoutRowMobile,
+export const layoutRow = style([
+  layoutRowMobile,
+  {
+    height: "100%",
+    display: "grid",
+    gridAutoFlow: "row",
+    backgroundColor: vars.color.backgroundHighlight,
+    gap: "1px",
+    "@media": {
+      [mediaQuery.desktop]: layoutRowDesktop,
+    },
   },
-});
+]);
 
 const layoutColumnMobile: ComplexStyleRule = {
   gridTemplateRows: "1fr auto",
+  gridTemplateColumns: "1fr",
   gridAutoFlow: "row",
 };
 
 const layoutColumnDesktop: ComplexStyleRule = {
+  gridTemplateRows: "1fr",
   gridTemplateColumns: "auto 1fr",
   gridAutoFlow: "column",
 };
 
-export const layoutColumn = style({
-  display: "grid",
-  backgroundColor: vars.color.backgroundHighlight,
-  gap: "1px",
-  "@media": {
-    "screen and (min-width: 769px)": layoutColumnDesktop,
-    "screen and (max-width: 768px)": layoutColumnMobile,
+export const layoutColumn = style([
+  layoutColumnMobile,
+  {
+    display: "grid",
+    backgroundColor: vars.color.backgroundHighlight,
+    gap: "1px",
+    "@media": {
+      [mediaQuery.desktop]: layoutColumnDesktop,
+    },
   },
-});
+]);
diff --git a/src/routes/main.css.ts b/src/routes/main.css.ts
@@ -1,20 +1,27 @@
 import { type ComplexStyleRule, style } from "@vanilla-extract/css";
+import { mediaQuery } from "~/breakpoint.css";
 import { vars } from "~/theme.css";
 
 const mobile: ComplexStyleRule = {
   gridRowStart: "1",
   gridRowEnd: "2",
+  gridColumnStart: "1",
+  gridColumnEnd: "2",
 };
 
 const desktop: ComplexStyleRule = {
+  gridRowStart: "1",
+  gridRowEnd: "2",
   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,
+export const main = style([
+  mobile,
+  {
+    backgroundColor: vars.color.background,
+    "@media": {
+      [mediaQuery.desktop]: desktop,
+    },
   },
-});
+]);
diff --git a/src/routes/nav.css.ts b/src/routes/nav.css.ts
@@ -1,20 +1,27 @@
 import { type ComplexStyleRule, style } from "@vanilla-extract/css";
+import { mediaQuery } from "~/breakpoint.css";
 import { vars } from "~/theme.css";
 
 const mobile: ComplexStyleRule = {
   gridRowStart: "2",
   gridRowEnd: "3",
+  gridColumnStart: "1",
+  gridColumnEnd: "2",
 };
 
 const desktop: ComplexStyleRule = {
+  gridRowStart: "1",
+  gridRowEnd: "2",
   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,
+export const nav = style([
+  mobile,
+  {
+    backgroundColor: vars.color.background,
+    "@media": {
+      [mediaQuery.desktop]: desktop,
+    },
   },
-});
+]);