Rebase #1 in #13

iamDistractech · May 18, 2021 · 15841a1 · 15841a1
2 parents 5a053c8 + bbeef8f
commit 15841a1
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 39 deletions.
diff --git a/src/components/OverviewListItem.svelte b/src/components/OverviewListItem.svelte
@@ -0,0 +1,54 @@
+<script>
+  export let titleGame;
+  export let groups;
+  export let game;
+  export let personAmount;
+</script>
+
+<article>
+  <div>
+    <h3>{titleGame}</h3>
+    <div class="label-container">
+      <p class="label">{groups}</p>
+      <p class="label">{game}</p>
+      <p class="label">{personAmount}</p>
+    </div>
+  </div>
+  <span>></span>
+</article>
+
+<style>
+  	article {
+		background-color: #f3f3f3;
+		border-radius: 1em;
+		margin: 1em 0;
+		padding: 1em;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+
+	span {
+		background: var(--color-light-orange);
+		border-radius: 50%;
+		width: 2rem;
+		height: 2rem;
+		display:flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+  .label {
+		background-color: var(--color-light-orange);
+		padding: 0.3rem 1rem;
+		border-radius: 1rem;
+		margin-right: 0.5rem;
+		font-size: 0.8rem;
+		margin-bottom: 0;
+	}
+	.label-container {
+		display: flex;
+		flex-wrap: wrap;
+	}
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -1,23 +1,52 @@
-<header>
-	<h1>John Doe</h1>
-	<h2>Goedemorgen</h2>
-</header>
-<section id="search-container">
-	<input type="text" placeholder="Zoeken" />
-	<button>F</button>
-</section>
-<div class="highlight-image" />
-<section>
-	<h2>Spellen</h2>
-	<article>
-		<h3>Hoepel</h3>
-		<p>Groep 3-6</p>
-	</article>
-	<article>
-		<h3>Verstoppertje</h3>
-		<p>Groep 3-8</p>
-	</article>
-</section>
+<script>
+	import OverviewListItem from '../components/OverviewListItem.svelte';
+
+	let searchInput = '';
+</script>
+
+<div class="container">
+	<header>
+		<h1>John Doe</h1>
+		<h2>Goedemorgen!</h2>
+	</header>
+	<section id="search-container">
+		<input bind:value={searchInput} type="text" placeholder="Zoeken" />
+		<button>F</button>
+	</section>
+	<p>{searchInput}</p>
+	<div class="highlight-image">
+		<p>Nieuw!</p>
+		<div>
+			<h3>Kat en Muis</h3>
+			<div class="label-container">
+				<p class="label">Alle groepen</p>
+				<p class="label">Tikspel</p>
+				<p class="label">Min 5</p>
+			</div>
+		</div>
+	</div>
+	<section>
+		<h2>Spellen</h2>
+		<OverviewListItem
+			titleGame="Pionnenroof"
+			groups="Alle groepen"
+			game="Tikspel"
+			personAmount="Min 2"
+		/>
+		<OverviewListItem
+			titleGame="Fopbal"
+			groups="Alle groepen"
+			game="Balspel"
+			personAmount="Min 3"
+		/>
+		<OverviewListItem
+			titleGame="Leeuwenkooi"
+			groups="Alle groepen"
+			game="Tikspel"
+			personAmount="Min 5"
+		/>
+	</section>
+</div>
 
 <style>
 	header {
@@ -38,23 +67,6 @@
 		font-size: 1em;
 	}
 
-	article {
-		background-color: #f3f3f3;
-		border-radius: 1em;
-		margin: 1em 0;
-		padding: 1em;
-		display: flex;
-		flex-direction: column-reverse;
-	}
-
-	article h3 {
-		margin: 0.5em 0;
-	}
-
-	article p {
-		margin: 0;
-	}
-
 	button:hover {
 		cursor: pointer;
 	}
@@ -69,6 +81,26 @@
 		background-color: var(--color-turquoise);
 		border-radius: 1em;
 		margin: 2em 0;
+		padding: 0.1rem 1rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.highlight-image div {
+		text-align: center;
+	}
+
+	.label {
+		background-color: var(--color-light-orange);
+		padding: 0.3rem 1rem;
+		border-radius: 1rem;
+		margin-right: 0.5rem;
+		font-size: 0.8rem;
+		margin-bottom: 0;
+	}
+	.label-container {
+		display: flex;
+		flex-wrap: wrap;
 	}
 
 	#search-container {
@@ -86,10 +118,12 @@
 	}
 
 	#search-container input[type='text'] {
-		width: 80%;
-		height: 4em;
+		width: 100%;
 		border-radius: 1em;
 		border: none;
 		background-color: #fafafa;
+		padding: 1rem 1.5rem;
+		border: 2px solid var(--color-light-orange);
+		margin-right: 1rem;
 	}
 </style>