Merge branch 'chat-message-width'

zhangzhong1018 · Aug 11, 2017 · daafab3 · daafab3
2 parents 9098f3a + 5a41f81
commit daafab3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/components/vuestic-components/vuestic-chat/VuesticChat.vue b/src/components/vuestic-components/vuestic-chat/VuesticChat.vue
@@ -9,7 +9,7 @@
         <fieldset>
           <div class="form-group form-group-w-btn">
             <div class="input-group">
-              <input @keypress="keyHandler($event)" v-model="inputMessage" required title=""/>
+              <textarea class="chat" @keypress="keyHandler($event)" v-model="inputMessage" required title=""></textarea>
               <label class="control-label">Your message</label><i class="bar"></i>
             </div>
             <div class="btn btn-sm btn-primary" @click="sendMessage()">Send</div>
@@ -87,6 +87,8 @@
     padding: $chat-message-py $chat-message-px;
     margin-bottom: $chat-message-mb;
     border-radius: $chat-message-br;
+    max-width: 70%;
+    overflow-wrap: break-word;
 
     &:last-child {
       margin-bottom: 0;
@@ -103,6 +105,10 @@
       border-top-right-radius: 0;
       background-color: $brand-primary;
     }
+
+    .chat-message-input {
+      resize: vertical !important;
+    }
   }
 
 

diff --git a/src/sass/_material-forms.scss b/src/sass/_material-forms.scss
@@ -113,7 +113,7 @@ fieldset {
 
   &.form-group-w-btn {
     .btn {
-      align-self: flex-start;
+      align-self: flex-end;
     }
   }
 
@@ -191,7 +191,7 @@ fieldset {
 
 .form-group {
   // scss-lint:disable QualifyingElement, NestingDepth
-  input {
+  input, textarea.chat {
     height: ($mf-font-size * 1.9);
   }