[vue.channel] message input div [scss.container] message input section

webpack/mockup/api-channel-init.json

@@ -22,7 +22,10 @@
 				{ "mid": 101, "uid": 3, "ts": 23894808330, "msg": "Fine n you ?"                      },
 				{ "mid": 102, "uid": 5, "ts": 23894808340, "msg": "fine too, what are you doin' ?"    },
 				{ "mid": 103, "uid": 1, "ts": 23894808350, "msg": "Yay guys i'm ok"                   },
-				{ "mid": 104, "uid": 1, "ts": 23894808360, "msg": "Do you have anything to say ... ?" }
+				{ "mid": 104, "uid": 1, "ts": 23894808360, "msg": "Do you have anything to say ... ?" },
+				{ "mid": 105, "uid": 3, "ts": 23894808360, "msg": "Do you have anything to say ... ?" },
+				{ "mid": 106, "uid": 3, "ts": 23894808360, "msg": "Do you have anything to say ... ?" },
+				{ "mid": 107, "uid": 1, "ts": 23894808360, "msg": "Do you have anything to say ... ?" }
 			]
 
 		},

webpack/scss/constants.scss

@@ -3,6 +3,7 @@
 $menu-width:    4.3em;
 $dialog-width:  15.2em;
 $header-height: 3em;
+$input-height:  5em;
 
 /* (2) Main colors */
 $menu-bg:          #202225;

webpack/scss/container.scss

@@ -71,17 +71,30 @@
 		align-items:     stretch;
 		flex-wrap:       nowrap;
 
+		overflow: hidden;
+
 		z-index: 100;
 
+		div.message-stack{
+
+			display: flex;
+				height: calc( 100% - #{$input-height} );
+
+			flex-direction: column;
+			flex-wrap: nowrap;
+
+			overflow: auto;
+
 			// {1} Message Container //
 			div.message{
 
 				display: flex;
+				position: relative;
 
 				margin: 0 1.3em;
 				padding: 1em 0;
 
-			border-bottom: 1px solid #474a4f;
+				&:not(:last-child){ border-bottom: 1px solid #474a4f; }
 
 				flex-direction:  row;
 				justify-content: stretch;
@@ -159,6 +172,25 @@
 
 			}
 
+		}
+
+
+		div.message-input{
+
+			display: block;
+				height: $input-height;
+
+			margin: 0 1em;
+
+			border-top: 1px solid #474a4f;
+			box-shadow: -1em 1em 0 1em #36393f,
+						1em 1em 0 1em #36393f;
+
+			background-color: #36393f;
+
+
+		}
+
 
 	}
 

webpack/vue/channel.vue

@@ -7,6 +7,9 @@
 		</div>
 
 		<div class='body'>
+
+			<div class='message-stack'>
+
 				<div class='message' v-for='m in gs.content.messages'>
 					<div class='icon'></div>
 					<span class='meta'>
@@ -15,6 +18,12 @@
 					</span>
 					<span class='text'>{{ m.msg }}</span>
 				</div>
+
+			</div>
+
+			<div class='message-input'>
+			</div>
+
 		</div>
 
 	</div>