back to %

backend/zeno_backend/processing/project_home.py

@@ -21,10 +21,6 @@
 async def create_project_home(project_uuid) -> list[ProjectHomeElement]:
     """Create the data for a project's home page.
 
-    The home page is a 3x3 grid of elements indexed from 1.
-    X and Y positions indicate the grid position, width and height the
-    number of grid cells the element occupies.
-
     Args:
         project_uuid (str): the uuid of the project for which to create home elements.
 
@@ -44,10 +40,10 @@ async def create_project_home(project_uuid) -> list[ProjectHomeElement]:
         ProjectHomeElement(
             id=-1,
             type=ProjectHomeElementType.LIST,
-            x_pos=2,
-            y_pos=1,
-            width=2,
-            height=3,
+            x_pos=30,
+            y_pos=0,
+            width=70,
+            height=100,
         ),
     )
 
@@ -98,10 +94,10 @@ async def create_overview_table(project_uuid: str):
             id=-1,
             type=ProjectHomeElementType.CHART,
             data=str(table_id),
-            x_pos=1,
-            y_pos=1,
-            width=1,
-            height=1,
+            x_pos=0,
+            y_pos=0,
+            width=30,
+            height=50,
         ),
     )
 
@@ -144,10 +140,10 @@ async def create_overview_charts(project_uuid: str, metrics: list[Metric]):
                 id=-1,
                 type=ProjectHomeElementType.CHART,
                 data=str(chart_id),
-                x_pos=1,
-                y_pos=2,
-                width=1,
-                height=1,
+                x_pos=0,
+                y_pos=50,
+                width=30,
+                height=50,
             ),
         )
     else:

frontend/src/routes/(app)/project/[uuid]/[name]/+page.svelte

@@ -11,13 +11,15 @@
 	}
 </script>
 
-<div class="grid h-full min-h-0 w-full min-w-0 gap-4 overflow-auto bg-yellowish p-4">
+<div class="relative h-full w-full">
 	{#each data.elements as element}
 		<div
-			class="min-w-[300px] overflow-auto bg-white shadow"
-			style="grid-column: {element.xPos} / span {element.width}; grid-row: {element.yPos} / span {element.width};"
+			class="absolute overflow-auto p-2"
+			style="width: {element.width}%; height: {element.height}%; top: {element.yPos}%; left: {element.xPos}%;"
 		>
-			<Element {element} />
+			<div class="h-full w-full p-4">
+				<Element {element} />
+			</div>
 		</div>
 	{/each}
 </div>