Update CSS to look good on mobile

webapp/src/css/style.scss

@@ -35,6 +35,9 @@ html {
 }
 
 #bottomLinks {
+	@media screen and (max-height: 500px) {
+		display: none;
+	}
 	font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
 	background-color: silver;
 	box-shadow:
@@ -77,6 +80,13 @@ html {
 	}
 }
 
+#logonWindow {
+	min-width: 250px;
+	@media screen and (min-width: 500px) {
+		min-width: 500px;
+	};
+}
+
 #logonWindowLogo {
 	background-color: #ffffff;
 	margin: 0;
@@ -105,16 +115,14 @@ html {
 #logonUsername,
 #logonRoom {
 	align-self: flex-end;
+	width: 81%;
 	margin-left: auto;
-	width: 300px;
-	margin-right: 90px;
 	margin-bottom: 10px;
 }
 
 #logonButton {
 	align-self: flex-end;
 	margin-left: auto;
-	margin-right: 90px;
 }
 
 #roomSettingsBody {
@@ -175,7 +183,8 @@ html {
 		inset 1px 1px #dfdfdf,
 		inset -2px -2px grey,
 		inset 2px 2px #fff;
-	height: 3vh;
+	min-height: 20px;
+	max-height: 3vh;
 	padding: 4px;
 	padding-left: 0px;
 }
@@ -184,7 +193,6 @@ html {
 	flex-grow: 1;
 	margin-right: 4px;
 	margin-left: 4px;
-	height: 100%;
 }
 
 #chatSendBtn {

webapp/src/ts/MSWindow.ts

@@ -1,6 +1,6 @@
 export interface MSWindowConfig {
-	minWidth: number;
+	minWidth?: number | undefined;
-	minHeight: number;
+	minHeight?: number | undefined;
 	maxWidth?: number | undefined;
 	maxHeight?: number | undefined;
 	startPosition: MSWindowStartPosition; // TODO: Should be a union with the enum and a "Point" (containing X and Y)
@@ -27,8 +27,10 @@ export class MSWindow {
 		this.wnd = wnd;
 		this.shown = false;
 		this.config = config;
-		this.wnd.style.minWidth = config.minWidth + 'px';
+		this.x = 0;
-		this.wnd.style.minHeight = config.minHeight + 'px';
+		this.y = 0;
+		if (config.minWidth) this.wnd.style.minWidth = config.minWidth + 'px';
+		if (config.minHeight) this.wnd.style.minHeight = config.minHeight + 'px';
 
 		if (config.maxWidth) this.wnd.style.maxWidth = config.maxWidth + 'px';
 		if (config.maxHeight) this.wnd.style.maxHeight = config.maxHeight + 'px';
@@ -52,21 +54,6 @@ export class MSWindow {
 
 		// Register window move handlers
 		this.dragging = false;
-		switch (this.config.startPosition) {
-			case MSWindowStartPosition.TopLeft: {
-				this.x = 0;
-				this.y = 0;
-				break;
-			}
-			case MSWindowStartPosition.Center: {
-				this.x = document.documentElement.clientWidth / 2 - this.config.minWidth / 2;
-				this.y = document.documentElement.clientHeight / 2 - this.config.minHeight / 2;
-				break;
-			}
-			default: {
-				throw new Error('Invalid start position');
-			}
-		}
 		this.setLoc();
 
 		this.lastTouchX = 0;
@@ -137,6 +124,22 @@ export class MSWindow {
 	show() {
 		this.wnd.classList.remove('d-none');
 		this.shown = true;
+		switch (this.config.startPosition) {
+			case MSWindowStartPosition.TopLeft: {
+				this.x = 0;
+				this.y = 0;
+				break;
+			}
+			case MSWindowStartPosition.Center: {
+				this.x = document.documentElement.clientWidth / 2 - this.wnd.clientWidth / 2;
+				this.y = document.documentElement.clientHeight / 2 - this.wnd.clientHeight / 2;
+				break;
+			}
+			default: {
+				throw new Error('Invalid start position');
+			}
+		}
+		this.setLoc();
 	}
 
 	hide() {
@@ -147,8 +150,8 @@ export class MSWindow {
 	private setLoc() {
 		if (this.x < 0) this.x = 0;
 		if (this.y < 0) this.y = 0;
-		if (this.x > document.documentElement.clientWidth - this.config.minWidth) this.x = document.documentElement.clientWidth - this.config.minWidth;
+		if (this.x > document.documentElement.clientWidth - this.wnd.clientWidth) this.x = document.documentElement.clientWidth - this.wnd.clientWidth;
-		if (this.y > document.documentElement.clientHeight - this.config.minHeight) this.y = document.documentElement.clientHeight - this.config.minHeight;
+		if (this.y > document.documentElement.clientHeight - this.wnd.clientHeight) this.y = document.documentElement.clientHeight - this.wnd.clientHeight;
 		this.wnd.style.top = this.y + 'px';
 		this.wnd.style.left = this.x + 'px';
 	}

webapp/src/ts/main.ts

@@ -41,14 +41,11 @@ function roomInit() {
 }
 
 let motdWindow = new MSWindow(elements.motdWindow, {
-	minWidth: 600,
-	minHeight: 300,
 	maxWidth: 600,
 	startPosition: MSWindowStartPosition.Center
 });
 
 let logonWindow = new MSWindow(elements.logonWindow, {
-	minWidth: 500,
 	minHeight: 275,
 	startPosition: MSWindowStartPosition.Center
 });