[scss.container] message layout [vue.channel] message display

webpack/scss/container.scss

@@ -60,7 +60,97 @@
 
 		background-color: $container-bg;
 
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: stretch;
+		flex-wrap: nowrap;
+
 		z-index: 100;
+
+		// {1} Message Container //
+		div.message{
+
+			display: flex;
+
+			margin: 0 1.3em;
+			padding: 1em 0;
+
+			border-bottom: 1px solid #474a4f;
+
+			flex-direction:  row;
+			justify-content: stretch;
+			align-items:     flex-start;
+			flex-wrap:       wrap;
+
+			// {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;
+
+				transition: opacity .2s ease-in-out;
+
+				&:hover{
+					opacity: .8;
+				}
+			}
+
+
+		}
+
+
 	}
 
 }

webpack/vue/channel.vue

@@ -7,8 +7,13 @@
 		</div>
 
 		<div class='body'>
-			<div class='message' v-for='msg in gs.content.messages'>
-				{{ msg.msg }}
+			<div class='message' v-for='m in gs.content.messages'>
+				<div class='icon'></div>
+				<span class='meta'>
+					<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>