more layout tinkering

dankoster · Dec 17, 2024 · 84229eb · 84229eb
1 parent 3e10ee3
commit 84229eb
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/VideoCall.css b/src/VideoCall.css
@@ -53,7 +53,7 @@
 
 		video {
 			max-width: 150px;
-			transform: scale(0.5) translateX(10px);
+			transform: scale(0.5) translateY(-50%);
 			/* position: fixed;
 			top: 0;
 			right: 0; */

diff --git a/src/main.css b/src/main.css
@@ -150,19 +150,41 @@ body {
 	padding: 1rem;
 	/* border-top: 1px solid var(--separator-color); */
 	bottom: 0;
+	position: absolute;
+    width: 100%;
 
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 
-	gap: 1rem;
+	column-gap: 2rem;
+	row-gap: 0.5rem;
 	justify-content: center;
 	align-items: center;
 	touch-action: none;
 
 	container-type: inline-size;
 	container-name: toolbar;
 
+	.stats {
+		touch-action: none;
+		font-size: small;
+		display: flex;
+		column-gap: 1rem;
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: center;
+
+		h2 {
+			margin-block: 0;
+		}
+
+		.userCount {
+			text-wrap: nowrap;
+		}
+	}
+
+
 	input[type="text"] {
 		touch-action: none;
 		font-size: 16px;

diff --git a/src/main.tsx b/src/main.tsx
@@ -92,6 +92,12 @@ function App() {
 
 
 			<div class="toolbar">
+				<div class="stats">
+					<h2 class="logo">⨳</h2>
+					<div class="userCount"><b>{server.stats()?.online ?? "?"}</b> online 👀</div>
+					<div class="userCount"><b>{server.stats()?.offline ?? "?"}</b> offline 😴</div>
+				</div>
+
 				<div class="user">
 
 					{/* <div class="color-picker">