Add xl option to grid for responsiveness

AnswerDotAI · Dec 17, 2024 · c029283 · c029283
1 parent 14cc259
commit c029283
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/docs/api_reference/api_reference.py b/docs/api_reference/api_reference.py
@@ -272,8 +272,7 @@ def team_member(name, role, location="Remote"):
         team_member("Emma Brown", "DevOps Engineer", "Toronto"),
         team_member("Marcus Johnson", "Frontend Developer", "Berlin")
     ]
-
-    return Grid(*team)
+    return Grid(*team, cols_sm=1, cols_md=1, cols_lg=2, cols_xl=3)
 
 docs_cards = create_doc_section(
     Card,

diff --git a/monsterui/franken.py b/monsterui/franken.py
@@ -616,17 +616,17 @@ def _generate_next_value_(name, start, count, last_values): return str2ukcls('fl
     nowrap, wrap, wrap_reverse = auto(), auto(), auto()
 
 # %% ../nbs/02_franken.ipynb
-def Grid(*div, cols_min=1, cols_max=None, cols_sm=None, cols_md=None, cols_lg=None, cols=None, cls='gap-4', **kwargs):
+def Grid(*div, cols_min=1, cols_max=None, cols_sm=None, cols_md=None, cols_lg=None, cols_xl=None, cols=None, cls='gap-4', **kwargs):
     "Creates a responsive grid layout with smart defaults based on content"
-    if cols: cols_min = cols_sm = cols_md = cols_lg = cols
+    if cols: cols_min = cols_sm = cols_md = cols_lg = cols_xl = cols
     else:
         n = len(div)
         cols_max = min(n, cols_max or 4)
-        cols_sm = cols_sm or min(n, cols_min+1, cols_max)
-        cols_md = cols_md or min(n, cols_min+2, cols_max) 
-        cols_lg = cols_lg or cols_max
-    return Div(cls=(f'grid grid-cols-{cols_min} sm:grid-cols-{cols_sm} md:grid-cols-{cols_md} lg:grid-cols-{cols_lg}', 
-                    stringify(cls)), **kwargs)(*div)
+        cols_sm = cols_sm or min(n, cols_min, cols_max)
+        cols_md = cols_md or min(n, cols_min+1, cols_max) 
+        cols_lg = cols_lg or min(n, cols_min+2, cols_max) 
+        cols_xl = cols_xl or cols_max
+    return Div(cls=(f'grid grid-cols-{cols_min} sm:grid-cols-{cols_sm} md:grid-cols-{cols_md} lg:grid-cols-{cols_lg} xl:grid-cols-{cols_xl}', stringify(cls)), **kwargs)(*div)
 
 # %% ../nbs/02_franken.ipynb
 def DivFullySpaced(*c,                # Components

diff --git a/nbs/02_franken.ipynb b/nbs/02_franken.ipynb
@@ -1308,17 +1308,17 @@
    "outputs": [],
    "source": [
     "#|export\n",
-    "def Grid(*div, cols_min=1, cols_max=None, cols_sm=None, cols_md=None, cols_lg=None, cols=None, cls='gap-4', **kwargs):\n",
+    "def Grid(*div, cols_min=1, cols_max=None, cols_sm=None, cols_md=None, cols_lg=None, cols_xl=None, cols=None, cls='gap-4', **kwargs):\n",
     "    \"Creates a responsive grid layout with smart defaults based on content\"\n",
-    "    if cols: cols_min = cols_sm = cols_md = cols_lg = cols\n",
+    "    if cols: cols_min = cols_sm = cols_md = cols_lg = cols_xl = cols\n",
     "    else:\n",
     "        n = len(div)\n",
     "        cols_max = min(n, cols_max or 4)\n",
-    "        cols_sm = cols_sm or min(n, cols_min+1, cols_max)\n",
-    "        cols_md = cols_md or min(n, cols_min+2, cols_max) \n",
-    "        cols_lg = cols_lg or cols_max\n",
-    "    return Div(cls=(f'grid grid-cols-{cols_min} sm:grid-cols-{cols_sm} md:grid-cols-{cols_md} lg:grid-cols-{cols_lg}', \n",
-    "                    stringify(cls)), **kwargs)(*div)"
+    "        cols_sm = cols_sm or min(n, cols_min, cols_max)\n",
+    "        cols_md = cols_md or min(n, cols_min+1, cols_max) \n",
+    "        cols_lg = cols_lg or min(n, cols_min+2, cols_max) \n",
+    "        cols_xl = cols_xl or cols_max\n",
+    "    return Div(cls=(f'grid grid-cols-{cols_min} sm:grid-cols-{cols_sm} md:grid-cols-{cols_md} lg:grid-cols-{cols_lg} xl:grid-cols-{cols_xl}', stringify(cls)), **kwargs)(*div)"
    ]
   },
   {