ADD: container/message message viewer according to wss://...../chat

public_html/css/container.css

@@ -0,0 +1,58 @@
+/* Card container */
+#CONTAINER.message{
+	flex-direction: column;
+	justify-content: flex-start;
+	flex-wrap: nowrap;
+
+}
+
+	#CONTAINER.message div{ /* Message item */
+		display: inline-block;
+		position: relative;
+			top: 0;
+			left: 0;
+			height: auto;
+
+		margin: 1em;
+		padding: 1em;
+
+		flex: 1 1 1;
+		align-self: flex-start;
+
+		border-radius: 3px;
+
+		background-color: #fff;
+
+		color: #222;
+	}
+
+	#CONTAINER.message div.me{ /* Message Item (self) */
+		background: #13d89d;
+		align-self: flex-end;
+	}
+
+		#CONTAINER.message div span.author{ /* Message author */
+			display: inline-block;
+			position: relative;
+
+			padding: .2em .4em;
+			margin-right: 1em;
+
+			border: 1px solid #ddd;
+
+			border-radius: 3px;
+
+			background: #eee;
+
+			color: #666;
+		}
+
+		#CONTAINER.message div span.author:after{ /* Add 'dit' */
+			content: ' dit';
+
+			color: #333;
+		}
+
+		#CONTAINER.message div.me span.author{ /* Hide message author if self */
+			display: none;
+		}

public_html/css/layout.css

@@ -71,3 +71,24 @@ body{
 
 	transition: width .2s ease-in-out;
 }
+
+/* Page container */
+#CONTAINER{
+	display: flex;
+	position: absolute;
+		top: 3.5em;
+		left: 15em;
+		width:  calc( 100% - 15em );
+		height: calc( 100% - 3.5em );
+
+	overflow: hidden;
+	overflow-y: auto;
+
+	transition: left .2s ease-in-out,
+			   width .2s ease-in-out;
+}
+
+#WRAPPER.min #CONTAINER{
+	left: 3.5em;
+	width: calc( 100% - 3.5em );
+}

view/home.php

@@ -17,6 +17,7 @@
 	<link rel='stylesheet' type='text/css' href='/css/layout.css'>
 		<link rel='stylesheet' type='text/css' href='/css/menu.css'>
 		<link rel='stylesheet' type='text/css' href='/css/header.css'>
+		<link rel='stylesheet' type='text/css' href='/css/container.css'>
 
 	<!-- JS dependencies -->
 	<script type='text/javascript' src='/js/_SERVER.js'></script>

view/vue-config.js

@@ -10,10 +10,10 @@ window.gstore.add('info', {
 	message: 'Warning! blabla'
 });
 window.gstore.add('notif', [
-	{ class: 'bell',    data: [] },
+	{ class: 'bell',    link: 'notifications', data: [] },
-	{ class: 'message', data: [] },
+	{ class: 'message', link: 'inbox',         data: [] },
-	{ class: 'search',  data: [] },
+	{ class: 'search',  link: 'search',        data: [] },
-	{ class: 'menu',    data: [] }
+	{ class: 'menu',    link: 'menu',          data: [] }
 ])
 
 // Menu

view/vue/container/message.vue

@@ -0,0 +1,20 @@
+<template>
+
+	<div id='CONTAINER' class='message'>
+
+		<div v-for='msg in gstore.notif[1].data' :class="msg[0] == gstore.server.session.name ? 'me' : ''">
+			<span class='author'>{{ msg[0] }}</span>
+			<span class='content'>{{ msg[1] }}</span>
+		</div>
+
+	</div>
+
+</template>
+
+
+<script>
+export default {
+	name: 'CONTAINER_MSG',
+	data(){ return { gstore: window.gstore.data }; },
+}
+</script>

view/vue/wrapper.vue

@@ -7,7 +7,8 @@
 		<!-- Menu -->
 		<menu-comp></menu-comp>
 
-		<span>message: {{ msg }}</span>
+		<!-- Container -->
+		<message-container></message-container>
 
 	</div>
 </template>
@@ -20,17 +21,18 @@
 
 import header_vue           from './header.vue';
 import menu_vue             from './menu.vue';
+import messageContainer_vue from './container/message.vue';
 
 
 export default {
 	name: 'wrapper',
 	data(){ return {
-		msg: 'Main vue component',
 		gstore: window.gstore.data
 	}; },
 	components: {
 		'HeaderComp':       header_vue,
-		'MenuComp': menu_vue
+		'MenuComp':         menu_vue,
+		'MessageContainer': messageContainer_vue
 	}
 }
 </script>