Merge pull request #4 from ParkerGagliano/grid

improve grid

www/src/components/QR.jsx

@@ -20,10 +20,11 @@ const QR = (props)=>{
   });
 
   return (
-    <div class="flex flex-col justify-center align-middle relative w-full h-full">
-    <h1 class="text-slate-700 text-center w-full font-semibold text-lg z-[900] absolute left-0 top-0">{props.label}</h1>
-    <a href="#"  onDblClick={[qrClick, props.qrString]} class='z-200 absolute left-0 top-0 w-full text-align-center' innerHTML={qrUrl}/>
-    </div>
+    <div class="flex items-center flex-col justify-center relative w-full h-full">
+    <h1 class="text-slate-200 text-center w-full font-semibold text-xs lg:text-base xl:text-xl z-[900] overflow-hidden  left-0 top-0">{props.label}</h1>
+    <a href="#" onDblClick={[qrClick, props.qrString]} class="z-200 w-full text-center" innerHTML={qrUrl}/>
+</div>
+
   );
 };
 

www/src/components/QRArray.jsx

@@ -1,31 +1,30 @@
 import QR from './QR'
 
 //import conf from '../configs/default';
-
 const gridCalc = {
-
-    cols: (arrLen)=>{
-        return `grid-cols-${Math.ceil((arrLen+1) / 2)}`
-    },
-
-    rows: (arrLen)=>{
-        return `grid-rows-${Math.ceil((arrLen+1) / 4)}`
+    cols: (arrLen) => {
+        let additionalCols = Math.ceil((arrLen-6) / 3); 
+        let xs = 2 + additionalCols;
+        let small = 3 + additionalCols;
+        let medium = 3 + additionalCols;
+        let large = 3 + additionalCols;
+        let xl = 4 + additionalCols;
+        if (arrLen < 5) {
+            xs = small = medium = large = xl = arrLen;
+        }
+        return `grid-cols-${xs} sm:grid-cols-${small} md:grid-cols-${medium} lg:grid-cols-${large} xl:grid-cols-${xl}`;
     }
-
 };
 
 
-
-const QRArray = (props)=>{
-
-
+//${gridCalc.cols(props.qrList.length)}
+const QRArray = (props) => {
     return (
-        <div class={`w-full h-full grid grid-flow-col ${gridCalc.cols(props.qrList.length)} ${gridCalc.rows(props.qrList.length)} gap-20`}>
+        <div className={`w-full mx-auto h-full grid ${gridCalc.cols(props.qrList.length)} justify-center gap-5 md:gap-10`}>
             <For each={props.qrList}>{
-                (qr, i)=><QR rounded="rounded-none" label={qr.label} qrString={qr.value}></QR>
+                (qr, i) => <QR rounded="rounded-none" label={qr.label} qrString={qr.value}></QR>
             }</For>
         </div>
-
     );
 };
 

www/tailwind.config.js

@@ -1,15 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
   safelist: [
-    {pattern: /grid-cols-./},
-    {pattern: /grid-rows-./},
+    ...Array.from({ length: 12 }).map((_, i) => `grid-cols-${i + 1}`),
+    ...Array.from({ length: 12 }).map((_, i) => `sm:grid-cols-${i + 1}`),
+    ...Array.from({ length: 12 }).map((_, i) => `md:grid-cols-${i + 1}`),
+    ...Array.from({ length: 12 }).map((_, i) => `lg:grid-cols-${i + 1}`),
+    ...Array.from({ length: 12 }).map((_, i) => `xl:grid-cols-${i + 1}`),
   ],
   theme: {
     extend: {},
   },
   plugins: [],
-}
-
+};