From 9bacaf19b025ca9e3d8a9ac8c10dc490ba761999 Mon Sep 17 00:00:00 2001
From: Anthony Debucquoy <debucquoy.anthony@gmail.com>
Date: Fri, 22 Mar 2024 10:13:10 +0100
Subject: [PATCH] msg page with basic layouyt

---
 frontend/src/App.vue         |  9 +++++----
 frontend/src/Apps/Msg.vue    | 37 ++++++++++++++++++++++++++++++++++++
 frontend/src/assets/main.css |  7 +++++++
 frontend/src/rest/apps.js    |  2 ++
 4 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/Apps/Msg.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7d79e82..d5d55a4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -86,12 +86,9 @@ window.addEventListener('hashchange', () => {
     </ul>
     </div>
     <div class="page">
-      <div style=" margin:50px;">
         <Suspense>
-        
-		<component :is="currentView" />
+				<component :is="currentView" />
         </Suspense>
-      </div>
     </div>
   </div>
 </template>
@@ -99,6 +96,8 @@ window.addEventListener('hashchange', () => {
 <style scoped>
   
   .container{
+			height: 100%;
+			width: 100%;
     display:grid;
     grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
     grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
@@ -111,6 +110,8 @@ window.addEventListener('hashchange', () => {
 
   .page {
     grid-area:page;
+		height: 100%;
+		width: 100%;
     place-self:center;
   }
 
diff --git a/frontend/src/Apps/Msg.vue b/frontend/src/Apps/Msg.vue
new file mode 100644
index 0000000..feecdbe
--- /dev/null
+++ b/frontend/src/Apps/Msg.vue
@@ -0,0 +1,37 @@
+<script setup>
+	import { ref } from 'vue'
+
+</script>
+
+<template>
+	<div id="msg">
+		<div id="discList"></div>
+		<div id="discussion"></div>
+	</div>
+</template>
+
+<style scoped>
+
+div#msg{
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	display: grid;
+	grid-template-columns: 20% auto;
+}
+
+div#discList{
+	margin: 30px 0 30px 30px;
+	background-color: rgba(255, 255, 255, 0.05);
+	border-radius: 10px;
+
+}
+
+div#discussion{
+	margin: 30px;
+	background-color: rgba(255, 255, 255, 0.05);
+	border-radius: 10px;
+}
+
+</style>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 55e6d15..54ce8d8 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,4 +1,11 @@
 body {
    background-color: rgb(53, 25, 60);
    margin:0;
+   width: 100vw;
+   height: 100vh;
+}
+
+#app {
+   width: 100%;
+   height: 100%;
 }
diff --git a/frontend/src/rest/apps.js b/frontend/src/rest/apps.js
index 99cbc10..b6568e8 100644
--- a/frontend/src/rest/apps.js
+++ b/frontend/src/rest/apps.js
@@ -9,6 +9,7 @@ import Profil from "@/Apps/Profil.vue"
 import Courses from "@/Apps/ManageCourses.vue"
 import Users from "@/Apps/UsersList.vue"
 import Students from "@/Apps/StudentsList.vue"
+import Msg from "@/Apps/Msg.vue"
 
 const apps = {
 		'/login': LoginPage,
@@ -17,6 +18,7 @@ const apps = {
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
+		'/msg' : Msg,
 }
 
 const appsList = {