displaying Rows & Columns as a grid / grid-area with content (#81)

MarieanneWU20 · Dec 15, 2021 · 9ba1299 · 9ba1299
1 parent 62d5e9e
commit 9ba1299
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 111 deletions.
diff --git a/example/src/App.svelte b/example/src/App.svelte
@@ -6,15 +6,16 @@
 <main>
     <Grid>
         <Row height=1>
+            <Column width=1></Column>
             <Column width=1><p>Test 1 från App</p></Column>
             <Column width=1><p>Test 2 från App</p></Column>
-            <Column width=2><p>Test 3 från App</p></Column>
         </Row>
         <Row height=2>
+            <Column width=2><p>Test 3 från App</p></Column>
             <Column width=2><p>Test 4 från App</p></Column>
             <Column width=1><p>Test 5 från App</p></Column>
-            <Column width=1><p>Test 6 från App</p></Column>
         </Row>
+        <Row height=1></Row>
     </Grid>
 </main>
 

diff --git a/svelte-layout-editor/src/LayoutEditor.svelte b/svelte-layout-editor/src/LayoutEditor.svelte
@@ -1,11 +1,11 @@
 <script>
-	// import { onMount } from "svelte";
+	import { onMount } from "svelte";
 	import ArrowButton from "./components/ArrowButton.svelte";
 	import { gridDataStore, calculateRows, calculateColumns } from "./store/gridDataStore";
 
-	// onMount(() => {
-	// 	$gridDataStore = { rows: [{ columns: [{}, {}] }] };
-	// });
+	onMount(() => {
+		$gridDataStore = { rows: [{ columns: [{}, {}] }] };
+	});
  </script>
 
  <div class="editor">
@@ -15,53 +15,23 @@
 	  <!-- {/if} -->
 	</div>
 	<div class="row">
-	  <div class="left-arrow">
+	  	<div class="left-arrow">
 		 <!-- {#if calculateColumns() > 3} -->
 			<ArrowButton index=N/A placing="outer" id="left"/>
 		 <!-- {/if} -->
-	  </div>
-
-	  <div class="container">
-		<slot >
-		 {#each $gridDataStore.rows as row, rowIndex} 
-
-				{#each row.columns as column, columnIndex}
-
-						<div id={column.id} class="section" style="grid-area: { `${rowIndex + 1}/${columnIndex + 1}/${rowIndex+1+row.height}/${columnIndex+1+column.width}` } ;">
-
-							<div class="up-arrow">
-									{#if row.height > 1 && columnIndex !== 0 && columnIndex + 1 !== calculateColumns()}
-									<ArrowButton placing="inner" index={rowIndex} id="up" />
-									{/if}
-								</div>
-								<div class="left-arrow">
-									{#if column.width > 1}
-									<ArrowButton placing="inner" index={columnIndex} id="left" />
-									{/if}
-								</div>
-								<div class="right-arrow">
-									<ArrowButton placing="inner" index={columnIndex} id="right" />
-								</div>
-								<div class="down-arrow">
-									{#if columnIndex !== 0 && columnIndex + 1 !== calculateColumns()}
-									<ArrowButton placing="inner" index={rowIndex}  id="down" />
-									{/if}
-								</div>
-						</div>
-				{/each}
-		 	{/each}
-		</slot>
-	  </div>
-
-	  <div class="right-arrow">
-		 {#if calculateRows() < 5}
-			<ArrowButton index=N/A placing="outer" id="right"/>
-		 {/if}
-	  </div>
+	  	</div>
+	  	<div class="container">
+			<slot ></slot>
+	  	</div>
+	  	<div class="right-arrow">
+		 	{#if calculateRows() < 5}
+				<ArrowButton index=N/A placing="outer" id="right"/>
+		 	{/if}
+	  	</div>
 	</div>
-	 <div class="down-arrow">
-	  {#if calculateColumns() < 5}
-		  <ArrowButton index=N/A placing="outer" id="down"/>
+	<div class="down-arrow">
+	  	{#if calculateColumns() < 5}
+		  	<ArrowButton index=N/A placing="outer" id="down"/>
 		{/if}
 	</div>
  </div>
@@ -72,7 +42,7 @@
 	  height: auto;
 	}
 	.editor>.up-arrow {
-		 display: flex;
+		display: flex;
 		 justify-content: center;
 		 align-items: center;
 		 margin: 30px 0 10px 0;
@@ -106,46 +76,14 @@
 		 justify-content: center;
 		 align-items: center;
 		 margin: 10px 0 30px 0;
-	 }
-	.section {
-		 width: auto;
-		 height: auto;
-		 border-radius: 20px;
-		 background-color: #ffffff;
-		 text-align: center;
-		 vertical-align: middle;
-	 }
-	 .section>.up-arrow {
-		 justify-content: center;
-		 height: 25px;
-	 }
-	 .section>.left-arrow {
-		 float: left;
-		 width: 25px;
-		 height: 25px;
-	 }
-	 .section>.right-arrow {
-		 float: right;
-		 width: 25px;
-		 height: 45px;
-	 }
-	 .section>.down-arrow {
-		 justify-content: center;
-		 height: 25px;
-		 margin-top: 20%;
-	 }
-
+	}
 	@media screen and (min-width: 480px) {
 	  .container {
 		 padding: 15px;
 		 gap: 0.8rem 0.8rem;
 		 min-height: 75vh;
-	  }
-	  .section{
-		 border-radius: 25px;
-		 padding: 15px;
-	 }
-	.container .left-arrow,
+	}
+	.left-arrow,
 	  .right-arrow {
 		 top: 35%;
 	  }
@@ -155,18 +93,14 @@
 		 padding: 18px;
 		 gap: 1rem 1rem;
 		 min-height: 100vh;
-	  }
-	  .section{
-		 border-radius: 30px;
-		 padding: 20px;
-		 }
-	  .container .left-arrow,
+	}
+	  .left-arrow,
 	  .right-arrow {
 		 top: 37%;
 	  }
 	}
 	@media screen and (min-width: 1024px) {
-	  .container .left-arrow,
+	  .left-arrow,
 	  .right-arrow {
 		 top: 40%;
 	}

diff --git a/svelte-layout-editor/src/components/Column.svelte b/svelte-layout-editor/src/components/Column.svelte
@@ -1,13 +1,30 @@
 <script>
+	import ArrowButton from "./ArrowButton.svelte";
     export let width;
 	console.log('Column width: ', width);
 </script>
 
 <div class="section">
-    <h1>COLUMN</h1>
-    <slot/>
+	<div class="up-arrow">
+		<!-- index={rowIndex} -->
+		<ArrowButton placing="inner"  id="up" />
+	</div>
+	<slot><h1>COLUMN</h1></slot>
+	<div class="left-arrow">
+		<!-- index={columnIndex}  -->
+		<ArrowButton placing="inner" id="left" />
+	</div>
+	<div class="right-arrow">
+		<!-- index={columnIndex}  -->
+		<ArrowButton placing="inner" id="right" />
+	</div>
+	<div class="down-arrow">
+		<!-- index={rowIndex} -->
+		<ArrowButton placing="inner" id="down" />
+	</div>
 </div>
 
+
 <style>
     h1 {
         color: darkred;
@@ -20,4 +37,44 @@
 		 text-align: center;
 		 vertical-align: middle;
 	}
+	.section {
+		 width: auto;
+		 height: auto;
+		 border-radius: 20px;
+		 background-color: #ffffff;
+		 text-align: center;
+		 vertical-align: middle;
+	 }
+	 .section>.up-arrow {
+		 justify-content: center;
+		 height: 25px;
+	 }
+	 .section>.left-arrow {
+		 float: left;
+		 width: 25px;
+		 height: 25px;
+	 }
+	 .section>.right-arrow {
+		 float: right;
+		 width: 25px;
+		 height: 45px;
+	 }
+	 .section>.down-arrow {
+		 justify-content: center;
+		 height: 25px;
+		 margin-top: 20%;
+	 }
+	 @media screen and (min-width: 480px) {
+
+	  .section{
+		 border-radius: 25px;
+		 padding: 15px;
+	 }
+	}
+	@media screen and (min-width: 768px) {
+	  .section{
+		 border-radius: 30px;
+		 padding: 20px;
+		 }
+	}
 </style>
diff --git a/svelte-layout-editor/src/components/Grid.svelte b/svelte-layout-editor/src/components/Grid.svelte
@@ -1,3 +1,4 @@
+<!-- TODO: DELETE ??? -->
 <!-- <script>
   import ArrowButton from "./ArrowButton.svelte";
   import { gridDataStore, calculateRows, calculateColumns } from "../store/gridDataStore";

diff --git a/svelte-layout-editor/src/components/GridItem.svelte b/svelte-layout-editor/src/components/GridItem.svelte
@@ -1,4 +1,4 @@
-<!-- TODO: REMOVE ??? -->
+<!-- TODO: DELETE ??? -->
 <!-- <script>
 	import { onMount } from "svelte";
 	import ArrowButton from "./ArrowButton.svelte";

diff --git a/svelte-layout-editor/src/components/Row.svelte b/svelte-layout-editor/src/components/Row.svelte
@@ -1,26 +1,20 @@
 <script>
+	import { gridDataStore } from "../store/gridDataStore";
+
 	export let height;
-	console.log('Row height: ',height);
+	console.log('Row: height: ',height);
 </script>
 
-<!-- <div class="container"> -->
-    <h1>ROW</h1>
-    <slot/> 
-<!-- </div> -->
-
+<slot><h1>ROW</h1></slot>
 
+	{#each $gridDataStore.rows as row, rowIndex} 
+		{#each row.columns as column, columnIndex}
+			<div id={column.id} class="section" style="grid-area: { `${rowIndex + 1}/${columnIndex + 1}/${rowIndex+1+row.height}/${columnIndex+1+column.width}` } ;"></div>
+	{/each}
+{/each}
+
 <style>
     h1 {
         color: darkred;
     }
-    /* .container {
-	  padding: 10px;
-	  background-color: #edf1f7;
-	  border: 1px solid #3d5f99;
-	  min-height: 50vh;
-	  display: grid;
-	  grid-auto-columns: 1fr 1fr;
-	  grid-auto-rows: 1fr 1fr;
-	  gap: 0.6rem 0.6rem;
-	} */
 </style>