refactor(flat-pages): implement grid layout (up to 6 items)

netless-io · Mar 6, 2023 · 0ea4c6b · 0ea4c6b
1 parent 6f6ccfc
commit 0ea4c6b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/flat-pages/src/components/UserWindows.less b/packages/flat-pages/src/components/UserWindows.less
@@ -19,9 +19,10 @@
 
     &.is-grid {
         display: flex;
+        flex-wrap: wrap;
 
         .window {
-            flex: 1;
+            flex: 1 0 21%;
             display: flex;
         }
     }
@@ -35,3 +36,21 @@
 .user-windows.is-hovering>.user-windows-mask {
     box-shadow: inset 0 0 0 2px var(--primary);
 }
+
+.user-windows.is-grid[data-size="4"],
+.user-windows.is-grid[data-size="5"] {
+
+    .window:nth-child(1),
+    .window:nth-child(2) {
+        flex-basis: 45%;
+    }
+}
+
+.user-windows.is-grid[data-size="6"] {
+
+    .window:nth-child(1),
+    .window:nth-child(2),
+    .window:nth-child(3) {
+        flex-basis: 30%;
+    }
+}
diff --git a/packages/flat-pages/src/components/UserWindows.tsx b/packages/flat-pages/src/components/UserWindows.tsx
@@ -95,6 +95,7 @@ export const UserWindows = observer<UserWindowsProps>(function UserWindows({ cla
                 "is-grid": isGrid,
                 "is-hovering": hovering,
             })}
+            data-size={users.length}
         >
             {users.map(({ userUUID, window }) => (
                 <UserAvatarWindow