feat(edit): grid layout for toggle lines (#1110)

entur · Jul 6, 2023 · 245d3c4 · 245d3c4
1 parent d22b92e
commit 245d3c4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/next-tavla/src/Admin/scenarios/SelectLines/index.tsx b/next-tavla/src/Admin/scenarios/SelectLines/index.tsx
@@ -27,21 +27,23 @@ function SelectLines<T extends TStopPlaceTile | TQuayTile>({
     return (
         <div className={classes.lineToggleContainer}>
             <ExpandablePanel title="Velg linjer">
-                {uniqLines.map((line) => (
-                    <div key={line.id}>
-                        <Switch
-                            checked={
-                                tile.whitelistedLines?.includes(line.id) ??
-                                false
-                            }
-                            onChange={() => {
-                                toggleLine(line.id)
-                            }}
-                        >
-                            {line.publicCode} {line.name}
-                        </Switch>
-                    </div>
-                ))}
+                <div className={classes.linesGrid}>
+                    {uniqLines.map((line) => (
+                        <div key={line.id}>
+                            <Switch
+                                checked={
+                                    tile.whitelistedLines?.includes(line.id) ??
+                                    false
+                                }
+                                onChange={() => {
+                                    toggleLine(line.id)
+                                }}
+                            >
+                                {line.publicCode} {line.name}
+                            </Switch>
+                        </div>
+                    ))}
+                </div>
             </ExpandablePanel>
         </div>
     )

diff --git a/next-tavla/src/Admin/scenarios/SelectLines/styles.module.css b/next-tavla/src/Admin/scenarios/SelectLines/styles.module.css
@@ -1,3 +1,8 @@
 .lineToggleContainer {
     margin-bottom: 0.5em;
 }
+
+.linesGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(30em, 1fr));
+}