add socket.io back, cleanup
Change-Id: I74e043268c23fb45371f1e397ca2931ca177afc3
diff --git a/client/src/index.scss b/client/src/index.scss
index 970825f..ab30741 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -30,7 +30,17 @@
"n m"
"r m"
"r m"
- "r s";
+ "r m";
+}
+
+.messenger {
+ grid-area: m;
+ display: grid;
+ grid-template-rows: 73px 1fr 72px;
+ grid-template-areas:
+ "h"
+ "m"
+ "i";
}
.MuiContainer-root {
@@ -53,12 +63,26 @@
grid-area: r;
}
+.conversation-header {
+ grid-area: h;
+}
+
.message-list {
grid-area: m;
+ position: relative;
+}
+
+.message-list-inner {
+ max-height: 100%;
+ position: absolute;
+ overflow-y: auto;
+ width: 100%;
+ bottom: 0;
+ padding: 24px;
}
.send-message-form {
- grid-area: s;
+ grid-area: i;
}
/* REST OF CSS */
@@ -88,83 +112,6 @@
text-overflow: ellipsis;
}
-/*
-.rooms-list {
- box-sizing: border-box;
- padding: 10px;
- background-color: var(--main-color);
- overflow: scroll;
- height: 100%;
-}
-
-.rooms-list ul {
- list-style-type: none;
- padding: 0;
- overflow: scoll;
-}
-
-.rooms-list li {
- margin: 10px 0;
-}
-
-.rooms-list h3 {
- margin: 5px 0;
- color: var(--secondary-color);
-}
-
-.rooms-list .room a {
- color: var(--secondary-text-color);
- font-weight: 600;
- text-decoration: none;
-
-}
-
-.rooms-list .room.active a {
- color: var(--secondary-color);
-}
-*/
-/*
-.new-room-form {
- padding: 0 5px;
- background: var(--secondary-color);
- color: var(--main-text-color);
-}
-
-.new-room-form form {
- height: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.new-room-form input {
- width: 135px;
- background: var(--secondary-color);
-}
-
-.new-room-form button {
- background: var(--secondary-color);
- color: var(--main-text-color);
- border: 0;
-}
-
-.new-room-form input::placeholder {
- color: var(--main-text-color);
- font-weight: 200;
-}
-
-.new-room-form input:focus {
- outline-width: 0;
-}
-
-.new-room-form input {
- border: 0;
-}
-
-.new-room-form button {
- border: 0;
-}*/
-
.list-placeholder {
margin: 32px auto;
width: 256px;
@@ -197,50 +144,8 @@
.send-message-card {
border-radius: 8px;
margin: 16px;
- /*padding: 8px;*/
-}
-/*
-.message-list {
- box-sizing: border-box;
- padding-left: 6px;
- width: 100%;
- height: 100%;
- overflow: scroll;
- background: var(--third-color);
}
-.message-list .join-room {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- font-size: 34px;
- font-weight: 300;
-}*/
-/*
-.send-message-form {
- background: var(--send-message-form);
- display: flex;
-}
-
-.send-message-form input {
- width: 100%;
- padding: 15px 10px;
- margin: 0;
- border-style: none;
- background: var(--send-message-form);
- font-weight: 200;
-
-}
-
-.send-message-form input:focus {
- outline-width: 0;
-}
-
-.send-message-form input::placeholder {
- color: var(--main-text-color);
-}
-*/
.help-text {
position: absolute;
top: 10px;