Better Css

chat/views.py

@@ -61,7 +61,7 @@ class ChatsView(APIView):
 						continue
 					for member2 in MemberModel.objects.filter(member_id=user_id2):
 						if (member1.channel_id == member2.channel_id):
-							messages = MessageModel.objects.filter(channel_id=member1.channel_id)
+							messages = MessageModel.objects.filter(channel_id=member1.channel_id).order_by("time")
 							messages = serializers.serialize("json", messages) 
 							return Response({'channel_id': member1.channel_id, 'messages':messages}, status=status.HTTP_200_OK)
 							

frontend/static/css/index.css

@@ -1,7 +1,7 @@
 body {
     margin: 10;
     font-family: 'Quicksand', sans-serif;
-    font-size: 18px;
+    font-size: 3vh;
 }
 
 a {

frontend/static/css/search.css

@@ -1,11 +1,12 @@
 #app img
 {
-	max-height: 100px;
+	max-height: 10vh;
-	max-width: 100px;
+	max-width: 10vh;
 }
 
 #app ul
 {
+	font-size: 2vh;
 	margin: 5px 0 0 0;
 	padding: 0 0 0 0;
 	list-style-type: none;
@@ -22,17 +23,34 @@
 	text-align: left;
 }
 #app #users {
-	margin-right: 50px;
+	margin-right: 5vh;
 }
 
 #app #chat {
 	position: relative;
-	height: 100%;
+	max-height: 80vh;
 	width: 60%;
-	/*border: 4px	solid green;*/
+	/*border: 2px	solid green;*/
 	overflow: hidden;
-	/*overflow-y: scroll;
+}
-	overflow-x: hidden;*/
+
+#app #add_chat_off {
+	text-decoration: underline;
+}
+
+#app #messages {
+	max-height: 50vh;
+	overflow: scroll;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	font-size: 2vh;
+}
+
+#app #input_user{
+	color: green;
+	width: 20vh;
+	height: 3vh;
+	font-size: 2vh;
 }
 
 #app #input_chat{
@@ -42,8 +60,10 @@
 	width: 100%;
 	border: none;
 	outline: none;
-	border-bottom: 2px	solid green;
+	border-bottom: 0.5vh	solid green;
 	caret-color: green;
+	color: green;
+	font-size: 2vh;
 }
 
 #app #you {

frontend/static/js/index.js

@@ -3,7 +3,6 @@ import { Client } from "./api/client.js";
 import LoginView from "./views/accounts/LoginView.js";
 import Dashboard from "./views/Dashboard.js";
 import Search from "./views/Search.js";
-import Chat from "./views/Chat.js";
 import HomeView from "./views/HomeView.js";
 import RegisterView from "./views/accounts/RegisterView.js";
 import LogoutView from "./views/accounts/LogoutView.js";
@@ -44,7 +43,6 @@ const router = async (uri) => {
         { path: "/logout", view: LogoutView },
         { path: "/register", view: RegisterView },
         { path: "/search", view: Search },
-        { path: "/chat", view: Chat },
         { path: "/home", view: HomeView },
         { path: "/me", view: MeView },
         { path: "/matchmaking", view: MatchMakingView },

frontend/static/js/views/Chat.js

@@ -1,56 +0,0 @@
-import AbstractView from "./AbstractView.js";
-
-export default class extends AbstractView {
-    constructor(params) {
-        super(params, "Chat");
-
-		let url = `ws://${window.location.host}/ws/chat/`
-
-		this.chatSocket = new WebSocket(url)
-		this.chatSocket.onmessage = function(e){
-			let data = JSON.parse(e.data)
-			console.log('Data:', data)
-			if (data.type === 'chat') {
-				let messages = document.getElementById('messages')
-
-				let username = data.username === null || data.username.length <= 0 ? "NoName" : data.username;
-				messages.insertAdjacentHTML('beforeend', `
-					<div><p>${username}: ${data.message}</p></div>
-				`)
-			}
-
-		}
-    }
-
-	async postInit() {
-		let form = document.getElementById('form')
-		form.addEventListener('submit', (e)=> {
-			e.preventDefault()
-			let message = e.target.message.value
-			this.chatSocket.send(JSON.stringify({
-				'message':message
-			}))
-			form.reset()
-		})
-
-	}
-
-	async leavePage() {
-		this.chatSocket.close();
-	}
-
-    async getHtml() {
-        return `
-			<h1>Chat</h1>
-
-			<form id="form">
-				<input type="text" name="message" placeholder="message"/>
-			</form>
-
-			<div id="messages">
-
-			</div>
-
-        `;
-    }
-}

frontend/static/js/views/Search.js

@@ -45,7 +45,9 @@ export default class extends AbstractView {
 			// chat
 			if (logged && client.me.user_id != user.user_id) {
 				let add_chat = document.createElement("a");
+				add_chat.id = "add_chat_off";
 				add_chat.addEventListener("click", async () => {
+					add_chat.id = "add_chat_off";
 					if (client.channel != undefined) {
 						client.channel.members_id.forEach((member_id) => {
 							if (member_id == user.user_id)
@@ -60,24 +62,20 @@ export default class extends AbstractView {
 
 					client.channel = await client.channels.createChannel([client.me.user_id , user.user_id], this.chat);
 					this.chat();
+					add_chat.id = "add_chat_on";
 				});
 				add_chat.appendChild(document.createTextNode("Chat"));
 				new_user.appendChild(add_chat);
 				
-				/*new_user.appendChild(document.createTextNode(" "));
+				new_user.appendChild(document.createTextNode(" "));
 
-				let remove = document.createElement("a");
+				let block = document.createElement("a");
-				remove.addEventListener("click", async () => {
+				block.addEventListener("click", async () => {
 					if (client.me.user_id != user.user_id) {
-						await client.channels.deleteChannel([client.me.user_id , user.user_id]);
-						if 
-						client.channel.disconnect();
-						client.channel = undefined;
-						this.chat()
 					}
 				});
-				remove.appendChild(document.createTextNode("Remove"));
+				block.appendChild(document.createTextNode("Block"));
-				new_user.appendChild(remove);*/
+				new_user.appendChild(block);
 			}
 			
 			// break line