From 4d0c36bb3e6d894c609b2cc80bf92f3dca652222 Mon Sep 17 00:00:00 2001
From: Jan Gutsche <7gutsche@informatik.uni-hamburg.de>
Date: Sun, 8 Mar 2020 17:48:00 +0100
Subject: [PATCH 1/2] Add card component

---
 src/colors.scss             |  2 ++
 src/components/AposCard.vue | 33 +++++++++++++++++++++++++++++++++
 src/views/Home.vue          | 17 +++++++++++++----
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/components/AposCard.vue

diff --git a/src/colors.scss b/src/colors.scss
index 4e14261..d610414 100644
--- a/src/colors.scss
+++ b/src/colors.scss
@@ -2,3 +2,5 @@ $blue: #027CCB;
 $white: #F7F1FC;
 $lightgray: #D6D6D6;
 $darkgray: #95989A;
+$black: #333333;
+$lightbackground: #F7FAFC;
diff --git a/src/components/AposCard.vue b/src/components/AposCard.vue
new file mode 100644
index 0000000..8b33cb1
--- /dev/null
+++ b/src/components/AposCard.vue
@@ -0,0 +1,33 @@
+<!--
+    @author JanGut
+    @date 2020-03-08
+-->
+<template>
+    <div class="apos-card">
+        <h3 class="apos-card-title">{{ this.CardTitle }}</h3>
+        <div class="apos-card-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "AposCard",
+
+        props: {
+            CardTitle: String
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "src/colors.scss";
+
+    .apos-card {
+        padding: 1em;
+        border-radius: 4px;
+        box-shadow: rgba(1, 78, 128, 0.1) 0px 2px 8px 0px, rgba(2, 124, 203, 0.1) 0px 15px 16px 0px;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0842105..c004c05 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,18 +6,28 @@
     <div class="home">
         <apos-input input-hint="Testinput"></apos-input>
         <apos-button @click="onLogout" :is-filled="true">Logout</apos-button>
+        <apos-card card-title="FOO">
+            <p>
+                Taciti. Netus sapien arcu facilisis ornare semper faucibus felis mi, taciti pharetra rhoncus. Viverra blandit nostra curae. Volutpat semper, odio aenean. Tincidunt proin malesuada felis faucibus metus mi purus ullamcorper nisi. Nibh, lacus scelerisque nec, urna nam lacinia nascetur morbi vehicula augue. Gravida urna adipiscing aptent ad vehicula posuere id hac amet. Egestas nulla ac vel penatibus. Odio neque placerat, metus non imperdiet, ornare enim curabitur varius. Conubia curae class dui urna lobortis dis. Quam auctor ve et. Ornare hac congue taciti. Nostra dolor magna. Eros fusce aptent. Nibh adipiscing elit etiam venenatis cum gravida class eni morbi hendrerit. Sit nibh feugiat at, senectus.
+            </p>
+            <p>
+                Suspendisse mus, cras. Odio. Ultrices pulvinar, augue diam per. Metus sodales libero pede et quam. Sodales at dui enim vel sociis imperdiet. Malesuada facilisi, sociis montes cum tempus sapien ipsum nostra at. Cubilia mus id turpis gravida. Congue eget, scelerisque mi. Placerat a, accumsan sit, iaculis velit erat semper. Phasellus ac ve nisl. Cursus senectus, cras, mauris. Natoque cras hymenaeos primis taciti, netus convallis eni, massa nullam. A amet morbi montes justo. Congue nisl et venenatis a, ultricies. Per adipiscing parturient id fermentum metus facilisis suspendisse nec nunc sociis id est nulla.
+            </p>
+        </apos-card>
     </div>
 </template>
 
 <script>
     import AposButton from "components/AposButton";
     import AposInput from "components/AposInput";
+    import AposCard from "components/AposCard";
     export default {
         name: 'Home',
 	    
 	    components: {
             AposButton,
-            AposInput
+            AposInput,
+            AposCard
 	    },
         
         data() {
@@ -39,7 +49,6 @@
 </script>
 
 <style scoped lang="scss">
-    .home {
-    
-    }
+    @import "src/colors.scss";
+
 </style>

From 0a579bd4c219aa8bcbc04c7c2b43991712548a4f Mon Sep 17 00:00:00 2001
From: Jan Gutsche <34797331+JanGut@users.noreply.github.com>
Date: Sun, 8 Mar 2020 18:09:08 +0100
Subject: [PATCH 2/2] Apply suggestions from code review

Co-Authored-By: Benjamin Schmidt <github@bfx.re>
---
 src/components/AposCard.vue | 4 ++--
 src/views/Home.vue          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AposCard.vue b/src/components/AposCard.vue
index 8b33cb1..8f5c7a6 100644
--- a/src/components/AposCard.vue
+++ b/src/components/AposCard.vue
@@ -16,7 +16,7 @@
         name: "AposCard",
 
         props: {
-            CardTitle: String
+            cardTitle: String
         },
     }
 </script>
@@ -30,4 +30,4 @@
         box-shadow: rgba(1, 78, 128, 0.1) 0px 2px 8px 0px, rgba(2, 124, 203, 0.1) 0px 15px 16px 0px;
     }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c004c05..d88c9d9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -49,6 +49,6 @@
 </script>
 
 <style scoped lang="scss">
-    @import "src/colors.scss";
+    @import "src/colors";
 
 </style>