Added data grid

web-atoms · Jan 11, 2024 · 1247e2c · 1247e2c
1 parent 5267975
commit 1247e2c
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 3 deletions.
diff --git a/src/styled.ts b/src/styled.ts
@@ -21,7 +21,7 @@ function *divide (text: string) {
         }
 
         if (lastMatch.includes("}")) {
-            yield [lastMatch];
+            yield [lastMatch.trim()];
             lastIndex = m.index + match.length;
             lastMatch = match;
             continue;
@@ -32,8 +32,8 @@ function *divide (text: string) {
         lastMatch = match;
     }
 
-    if(lastMatch?.endsWith("}")) {
-        yield [lastMatch];
+    if(lastMatch?.includes("}")) {
+        yield [lastMatch.trim()];
     }
 };
 

diff --git a/src/styles/layouts/data-grid/data-grid.ts b/src/styles/layouts/data-grid/data-grid.ts
@@ -0,0 +1,91 @@
+import styled from "../../../styled";
+import vars from "../../../vars";
+
+styled.add({
+    "data-layout": {
+        "data-grid": styled.css `
+        display: table;
+        padding: ${vars.spacing};
+
+        & > * {
+            display: table-row;
+            padding: ${vars.spacing};
+
+
+            & > * {
+                padding: ${vars.spacing};
+                display: table-cell;
+            }
+
+            & > br {
+                display: none;
+            }
+
+            & > button {
+                margin: ${vars.spacing};
+            }
+        }
+
+        @media only screen and (max-width: 500px) {
+
+            & > * {
+                display: flex;
+                gap: ${vars.spacing};
+                align-items: center;
+                justify-items: stretch;
+                position: relative;
+                flex-wrap: wrap;
+                & > * {
+                    display: inline-block;
+                }
+
+                & > br {
+                    display: block;
+                    content: "";
+                    flex: 1 1 100%;
+                    width: 100%;
+                    height: 0;
+                    margin: -10px;
+                }
+
+                & > input[type=checkbox]:first-child {
+                    position: absolute;
+                    left: 10px;
+                    top: 10px;
+                    justify-self: start;
+                    flex: 1 1 100%;
+                    & + * {
+                        margin-left: 30px;
+                        flex: 1 1 100%;
+                    }
+                }
+            }
+
+            &[data-cells="2"] > * {
+                display: grid;
+                gap: ${vars.spacing};
+                align-items: center;
+                justify-items: stretch;
+                grid-auto-flow: row;
+                position: relative;
+                & > * {
+                    display: inline-block;
+                }
+
+                & > input[type=checkbox]:first-child {
+                    grid-column: 1;
+                    grid-row: 1;
+                    margin-left: 10px;
+                    justify-self: start;
+                    & + * {
+                        grid-column: 1 / span 2;
+                        grid-row: 1;
+                        margin-left: 30px;
+                    }
+                }
+            }
+        }
+
+    `
+    }
+}, "low");
diff --git a/src/tests/data-grid/index.html b/src/tests/data-grid/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Data Grid Sample</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+        <link rel="stylesheet" href="../../../data-styles.css"/>
+    </head>
+    <body>
+        <div data-layout="data-grid">
+            <div>
+                <input type="checkbox"/>
+                <label>Akash Kava</label>
+                <label>github.com/ackava</label>
+                <label>twitter.com/akashkava</label>
+                <label>gitlab.com/ackava</label>
+                <br/>
+                <button>Email</button>
+                <button>Phone</button>
+            </div>
+            <div>
+                <input type="checkbox"/>
+                <label>Akash Kava</label>
+                <label>github</label>
+                <label>twitter</label>
+                <label>gitlab</label>
+                <br/>
+                <button>Email</button>
+                <button>Phone</button>
+            </div>
+        </div>
+    </body>
+</html>