From 5ca45742e4c191e80982e21e4605445f6dff4751 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Fri, 6 Nov 2020 16:20:42 +0100
Subject: [PATCH] chatInfo styling

---
 src/components/chatInformation.vue  | 48 +++++++++++++++++++++++++++++
 src/components/chatInformations.vue | 18 -----------
 src/components/topBanner.vue        |  7 ++++-
 src/views/chat.vue                  |  5 ++-
 4 files changed, 58 insertions(+), 20 deletions(-)
 create mode 100644 src/components/chatInformation.vue
 delete mode 100644 src/components/chatInformations.vue

diff --git a/src/components/chatInformation.vue b/src/components/chatInformation.vue
new file mode 100644
index 0000000..a665ec5
--- /dev/null
+++ b/src/components/chatInformation.vue
@@ -0,0 +1,48 @@
+<template>
+  <div id="chatInformation" class="chatInformation">
+    <h1>open chat</h1>
+    <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
+  </div>
+</template>
+<script>
+import icon from './icon.vue';
+
+export default {
+  name: "chatInformation",
+  components:{
+    icon
+  }
+}
+</script>
+<style scoped>
+.chatInformation{
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+  top: 5rem;
+  width: calc(100% - 8rem);
+  max-width: 30rem;
+  height: calc(100% - 10rem);
+  background-color: #1d1d1d;
+  box-shadow: 6px 6px 20px #111;
+  border-radius: 1rem;
+  text-align: center;
+}
+.closeBtn{
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: #0000;
+  box-shadow: none;
+}
+
+@media (max-width: 30rem) {
+  .chatInformation{
+    transform: unset;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/chatInformations.vue b/src/components/chatInformations.vue
deleted file mode 100644
index a70cc1c..0000000
--- a/src/components/chatInformations.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="chatInformations">
-
-  </div>
-</template>
-<script >
-  export default {
-    name: "chatInformations"
-  }
-</script>
-<style scoped>
-.chatInformations{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: #f00;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/topBanner.vue b/src/components/topBanner.vue
index ed151e4..98005f0 100644
--- a/src/components/topBanner.vue
+++ b/src/components/topBanner.vue
@@ -7,7 +7,7 @@
         <div id="chatName">{{roomInfo.name}}</div>
         <div id="users">{{roomInfo.user.length}} members</div>
       </div>
-      <icon class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
+      <icon v-on:click.native="showChatInfo()" class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
     </div>
   </div>
 </template>
@@ -19,6 +19,11 @@ export default {
   components:{
     icon
   },
+  methods:{
+    showChatInfo(){
+      document.getElementById("chatInformation").style.display = 'block';
+    }
+  },
   data(){
     return {
       roomInfo: {
diff --git a/src/views/chat.vue b/src/views/chat.vue
index 353a6f0..c510341 100644
--- a/src/views/chat.vue
+++ b/src/views/chat.vue
@@ -27,6 +27,7 @@
     </div>
     <newMessage />
     <topBanner />
+    <chatInformation />
   </div>
 </template>
 
@@ -35,6 +36,7 @@ import message from '@/components/message.vue';
 import messageReceive from '@/components/messageReceive.vue';
 import newMessage from '@/components/newMessage.vue';
 import topBanner from "@/components/topBanner";
+import chatInformation from "@/components/chatInformation";
 
 export default {
   name: 'chat',
@@ -42,7 +44,8 @@ export default {
     message,
     messageReceive,
     newMessage,
-    topBanner
+    topBanner,
+    chatInformation
   }
 }
 </script>