comment textbox styling

Author: deep9c

src/components/Comments.vue

@@ -25,7 +25,7 @@
         </ul>
         <form class="form-inline" role="form">
             <div class="form-group">
-                <input class="form-control" type="text" placeholder="Your comments" v-model="newcomment"/>
+                <input class="form-control" type="text" id="box" style="width: 300px; height: 20px" placeholder="Your comments" v-model="newcomment" v-on:focus='textboxFocus($event)' v-on:blur='textboxBlur($event)'/>
             </div>
             <div class="form-group">
                 <!-- <button class="btn btn-default" v-on:click='submit($event)'>Add</button> -->
@@ -81,7 +81,25 @@
 						this.newcomment = '';
 					});
 				
-			}
+			},
+
+			textboxFocus(e){
+				$(e.currentTarget).animate({
+    				width: '150px',
+    				height: '100px'
+  				}, 500, function() {
+    			// Animation complete.
+  				});
+			},
+
+			textboxBlur(e){
+				$(e.currentTarget).animate({
+     				width: '100px',
+     				height: '20px'
+   				}, 500, function() {
+     			// Animation complete.
+   			});
+			},
 		},
 
 		beforeUpdate(){