Mercurial Hosting > chat

changeset 27:809193524522

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
responsive
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 06 Nov 2024 16:01:42 -0700
parents 5bdbbd0a65e1
children 637bf1df2070
files src/chat.css src/chat.js src/get_chat.js.luan src/images/arrow_back.svg src/index.html.luan
diffstat 5 files changed, 56 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/src/chat.css	Tue Nov 05 23:06:58 2024 -0700
+++ b/src/chat.css	Wed Nov 06 16:01:42 2024 -0700
@@ -2,14 +2,9 @@
 	margin-bottom: 0;
 	display: flex;
 	height: calc(100vh - 32px);
-	margin-left: calc(3% - 8px);
-	margin-right: 0;
 }
 
 div[chats] {
-	width: 250px;
-	padding-right: 8px;
-	flex-shrink: 0;
 	overflow-y: auto;
 }
 
@@ -30,8 +25,6 @@
 }
 
 div[posts] {
-	padding-left: 8px;
-	border-left: 1px solid;
 	width: 100%;
 	display: flex;
 	flex-direction: column;
@@ -108,3 +101,46 @@
 	width: 600px;
 	max-width: 80vw;
 }
+
+
+@media (min-width: 700px) {
+	div[content] {
+		margin-left: calc(3% - 8px);
+		margin-right: 0;
+	}
+
+	div[chats] {
+		width: 250px;
+		padding-right: 8px;
+		flex-shrink: 0;
+	}
+
+	div[posts] {
+		padding-left: 8px;
+		border-left: 1px solid;
+	}
+
+	div[top] img {
+		display: none;
+	}
+}
+
+@media (max-width: 699px) {
+	div[content][show="chats"] div[posts],
+	div[content][show="posts"] div[chats] {
+		display: none;
+	}
+
+	div[chats] {
+		width: 100%;
+	}
+
+	div[content][show="posts"] {
+		margin-right: 0;
+	}
+
+	div[top] h3 {
+		display: flex;
+		gap: 6px;
+	}
+}
--- a/src/chat.js	Tue Nov 05 23:06:58 2024 -0700
+++ b/src/chat.js	Wed Nov 06 16:01:42 2024 -0700
@@ -15,6 +15,7 @@
 }
 
 function selectChat(div) {
+	document.querySelector('div[content]').setAttribute('show','posts');
 	let chatId = div.getAttribute('chat');
 	if( chatId === currentChatId )
 		return;
@@ -29,6 +30,10 @@
 	eventSource.onmessage = evalEvent;
 }
 
+function back() {
+	document.querySelector('div[content]').setAttribute('show','chats');
+}
+
 function gotChat(html) {
 	document.querySelector('div[posts]').innerHTML = html;
 	fixPosts();
--- a/src/get_chat.js.luan	Tue Nov 05 23:06:58 2024 -0700
+++ b/src/get_chat.js.luan	Wed Nov 06 16:01:42 2024 -0700
@@ -13,6 +13,8 @@
 local post_search = Post.search or error()
 local Shared = require "site:/lib/Shared.luan"
 local post_html = Shared.post_html or error()
+local Logging = require "luan:logging/Logging.luan"
+local logger = Logging.logger "get_chat.js"
 
 
 local function html()
@@ -22,7 +24,10 @@
 	local posts = post_search( "post_chat_id:"..chat.id, "id" )
 %>
 	<div top>
-		<h3><%= chat.other_users_email(user) %></h3>
+		<h3>
+			<img back onclick="back()" src="/images/arrow_back.svg">
+			<span><%= chat.other_users_email(user) %></span>
+		</h3>
 		<button onclick='deleteChat()'>delete</button>
 	</div>
 	<div main>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/images/arrow_back.svg	Wed Nov 06 16:01:42 2024 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>
\ No newline at end of file
--- a/src/index.html.luan	Tue Nov 05 23:06:58 2024 -0700
+++ b/src/index.html.luan	Wed Nov 06 16:01:42 2024 -0700
@@ -98,7 +98,7 @@
 	</head>
 	<body>
 <%		header() %>
-		<div content>
+		<div content show="chats">
 			<div chats>
 <%				chats_html() %>
 			</div>