[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

@@ -66,95 +66,127 @@
 
 		background-color: $container-bg;
 
-		flex-direction: column;
+		flex-direction:  column;
 		justify-content: flex-start;
-		align-items: stretch;
+		align-items:     stretch;
-		flex-wrap: nowrap;
+		flex-wrap:       nowrap;
+
+		overflow: hidden;
 
 		z-index: 100;
 
-		// {1} Message Container //
+		div.message-stack{
-		div.message{
 
 			display: flex;
+				height: calc( 100% - #{$input-height} );
 
-			margin: 0 1.3em;
+			flex-direction: column;
-			padding: 1em 0;
+			flex-wrap: nowrap;
 
-			border-bottom: 1px solid #474a4f;
+			overflow: auto;
 
-			flex-direction:  row;
+			// {1} Message Container //
-			justify-content: stretch;
+			div.message{
-			align-items:     flex-start;
-			flex-wrap:       wrap;
 
-			transition: transform .1s ease-in-out;
+				display: flex;
-			animation: slide-list .3s cubic-bezier(.49, .4, .26, 1.93);
-
-			// {1} Meta Data //
-			& > span.meta{
-
-				flex: 1 1 90%;
-
-				display: inline-block;
 				position: relative;
 
-				margin: 0 4em;
+				margin: 0 1.3em;
-				margin-bottom: .5em;
+				padding: 1em 0;
 
-				// {2} Author //
+				&:not(:last-child){ border-bottom: 1px solid #474a4f; }
-				& > span.author{
-					padding-right: .5em;
 
-					color: #fff;
+				flex-direction:  row;
-					font-size: .9em;
+				justify-content: stretch;
-					font-weight: bold;
+				align-items:     flex-start;
+				flex-wrap:       wrap;
+
+				transition: transform .1s ease-in-out;
+				animation: slide-list .3s cubic-bezier(.49, .4, .26, 1.93);
+
+				// {1} Meta Data //
+				& > span.meta{
+
+					flex: 1 1 90%;
+
+					display: inline-block;
+					position: relative;
+
+					margin: 0 4em;
+					margin-bottom: .5em;
+
+					// {2} Author //
+					& > span.author{
+						padding-right: .5em;
+
+						color: #fff;
+						font-size: .9em;
+						font-weight: bold;
+
+						cursor: pointer;
+						&:hover{ text-decoration: underline; }
+					}
+
+					// {3} Date //
+					& > span.date{
+						font-size: .8em;
+						color: #595d63;
+					}
+
+				}
+
+				// {2} Message Text //
+				& > span.text{
+					flex: 1 1 90%;
+
+					display: inline-block;
+					position: relative;
+
+					margin: 0 4em;
+
+					color: hsla(0,0%,100%,.7);
+
+				}
+
+				// {3} Icon circle //
+				& > div.icon{
+
+					display: block;
+					position: absolute;
+						width: 2.5em;
+						height: 2.5em;
+
+					border-radius: 50% / 50%;
+
+					background-color: #fff;
 
 					cursor: pointer;
-					&:hover{ text-decoration: underline; }
+
+					transition: opacity .2s ease-in-out;
+
+					&:hover{
+						opacity: .8;
+					}
 				}
 
-				// {3} Date //
-				& > span.date{
-					font-size: .8em;
-					color: #595d63;
-				}
 
 			}
 
-			// {2} Message Text //
+		}
-			& > span.text{
-				flex: 1 1 90%;
 
-				display: inline-block;
-				position: relative;
 
-				margin: 0 4em;
+		div.message-input{
 
-				color: hsla(0,0%,100%,.7);
+			display: block;
+				height: $input-height;
 
-			}
+			margin: 0 1em;
 
-			// {3} Icon circle //
+			border-top: 1px solid #474a4f;
-			& > div.icon{
+			box-shadow: -1em 1em 0 1em #36393f,
+						1em 1em 0 1em #36393f;
 
-				display: block;
+			background-color: #36393f;
-				position: absolute;
-					width: 2.5em;
-					height: 2.5em;
-
-				border-radius: 50% / 50%;
-
-				background-color: #fff;
-
-				cursor: pointer;
-
-				transition: opacity .2s ease-in-out;
-
-				&:hover{
-					opacity: .8;
-				}
-			}
 
 
 		}

webpack/vue/channel.vue

@@ -7,14 +7,23 @@
 		</div>
 
 		<div class='body'>
-			<div class='message' v-for='m in gs.content.messages'>
+
-				<div class='icon'></div>
+			<div class='message-stack'>
-				<span class='meta'>
+
-					<span class='author'>{{ gs.content.user(m.uid).name || 'inconnu' }}</span>
+				<div class='message' v-for='m in gs.content.messages'>
-					<span class='date'  >{{ new Date(m.ts*1000).toLocaleString('fr') || 'inconnu' }}</span>
+					<div class='icon'></div>
-				</span>
+					<span class='meta'>
-				<span class='text'>{{ m.msg }}</span>
+						<span class='author'>{{ gs.content.user(m.uid).name || 'inconnu' }}</span>
+						<span class='date'  >{{ new Date(m.ts*1000).toLocaleString('fr') || 'inconnu' }}</span>
+					</span>
+					<span class='text'>{{ m.msg }}</span>
+				</div>
+
 			</div>
+
+			<div class='message-input'>
+			</div>
+
 		</div>
 
 	</div>