From 568a9fb16abae642b5e5c8f1338d6ad2e349465e Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Thu, 22 Mar 2018 16:01:41 +0100
Subject: [PATCH] [scss.container] message layout [vue.channel] message display

---
 webpack/scss/container.scss | 90 +++++++++++++++++++++++++++++++++++++
 webpack/vue/channel.vue     |  9 +++-
 2 files changed, 97 insertions(+), 2 deletions(-)

diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 321bd1d..4611bff 100644
--- a/webpack/scss/container.scss
+++ b/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;
+				}
+			}
+
+
+		}
+
+
 	}
 
 }
\ No newline at end of file
diff --git a/webpack/vue/channel.vue b/webpack/vue/channel.vue
index 412cb6e..1df3158 100644
--- a/webpack/vue/channel.vue
+++ b/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>