newMessage auto resize

src/App.vue

@@ -26,9 +26,7 @@
         <message msg="und Kuchen :P" />
         <div class="spacer" style="height: 1rem;"></div>
       </div>
-      <div class="newMessageBanner">
+      <newMessage />
-        <input class="newMessageInput" placeholder="type a message ..." type="text"/>
-      </div>
     </div>
   </div>
 </template>
@@ -36,12 +34,14 @@
 <script>
 import message from './components/message.vue';
 import messageReceive from './components/messageReceive.vue';
+import newMessage from './components/newMessage.vue';
 
 export default {
   name: 'App',
   components: {
     message,
-    messageReceive
+    messageReceive,
+    newMessage
   }
 }
 </script>
@@ -52,9 +52,6 @@ body{
 }
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   position: absolute;
   color: #ffffff;
   background-color: #1d1d1d;
@@ -81,25 +78,6 @@ body{
   width: 100%;
   overflow-y: auto;
 }
-.newMessageBanner{
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  min-height: 4rem;
-  background-color: #1d1d1d;
-  border-radius: 1rem 1rem 0 0;
-}
-.newMessageInput{
-  position: absolute;
-  top: 0.5rem;
-  left: 2rem;
-  height: 3rem;
-  width: calc(100% - 7rem);
-  background-color: #fff0;
-  border: 0;
-  color: #fff;
-}
 
 @media (max-width: 55rem){
   .content{

src/components/icon.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="iconContainer" >
+    <img class="icon" :src="ic" alt="" />
+  </div>
+</template>
+
+<script>
+export default {
+name: "icon",
+  props: {
+    ic: String
+  }
+}
+</script>
+
+<style scoped>
+  .iconContainer{
+    width: 3rem;
+    height: 3rem;
+    border-radius: 1.5rem;
+    background-color: #42a7b9;
+    box-shadow: 3px 3px 10px #111;
+    cursor: pointer;
+    user-select: none;
+  }
+  .icon{
+    position: absolute;
+    height: 1.5rem;
+    width: auto;
+    top: 0.75rem;
+    left: 0.75rem;
+  }
+</style>

src/components/message.vue

@@ -29,9 +29,9 @@ export default {
     min-width: 5rem;
     max-width: calc(100% - 3rem);
     padding: 1rem;
-    right: 0rem;
+    right: 0;
     background-color: #42b983;
-    border-radius: 1rem 1rem 0rem 1rem;
+    border-radius: 1rem 1rem 0 1rem;
     text-align: left;
   }
 </style>

src/components/messageReceive.vue

@@ -28,9 +28,9 @@ export default {
     min-width: 5rem;
     max-width: calc(100% - 3rem);
     padding: 1rem;
-    left: 0rem;
+    left: 0;
     background-color: #42a7b9;
-    border-radius: 1rem 1rem 1rem 0rem;
+    border-radius: 1rem 1rem 1rem 0;
     text-align: left;
   }
 </style>

src/components/newMessage.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="newMessageBanner">
+    <textarea name="input" id="newMessageInput" class="newMessageInput" placeholder="type a message ..." type="text" v-model="content" />
+    <icon style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
+  </div>
+</template>
+
+<script>
+import icon from './icon.vue';
+
+export default {
+  name: "newMessage",
+  components: {
+    icon
+  },
+  props: {
+    content: String,
+  },
+  mounted() {
+    ResizeListener(document.getElementById("newMessageInput"));
+  }
+}
+
+export const ResizeListener = (id) => {
+  id.addEventListener("input", resize);
+}
+function resize() {
+  this.style.height = "auto";
+  this.style.height = `${this.scrollHeight}px`;
+}
+</script>
+
+<style scoped>
+  .newMessageBanner{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: min-content;
+    min-height: 4rem;
+    background-color: #1d1d1d;
+    border-radius: 1rem 1rem 0 0;
+  }
+  .newMessageInput{
+    position: relative;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    left: 2rem;
+    min-height: 3rem;
+    max-height: 14rem;
+    width: calc(100% - 7rem);
+    background-color: #fff0;
+    border: 0 solid #fff0;
+    color: #fff;
+    font-size: 1rem;
+    resize: none;
+    vertical-align: middle;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+  }
+</style>

src/sym/ic_send_white_24px.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>