From cce2fa5019f7e5b99bb34a8df962c503295702de Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Tue, 14 Jul 2015 18:14:30 -0400
Subject: [PATCH] Responsive battle UI

Instead of our previous minimum width of 640px, the new battle UI is
now responsive down to 320px.

Screenshot: http://d.pr/i/17UYD/1V6IYX2T
---
 js/client-battle.js | 14 +++++++++++++-
 style/client.css    | 32 +++++++++++++++++++++++++++++---
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/js/client-battle.js b/js/client-battle.js
index bbf3f30fb..e25083b7e 100644
--- a/js/client-battle.js
+++ b/js/client-battle.js
@@ -51,11 +51,22 @@
 			return true;
 		},
 		updateLayout: function () {
-			if (this.$el.width() < 950) {
+			var width = this.$el.width();
+			if (width < 950) {
 				this.battle.messageDelay = 800;
 			} else {
 				this.battle.messageDelay = 8;
 			}
+			if (width < 640) {
+				var scale = (width/640);
+				this.$battle.css('transform', 'scale(' + scale + ')');
+				this.$foeHint.css('transform', 'scale(' + scale + ')');
+				this.$controls.css('top', 360 * scale + 10);
+			} else {
+				this.$battle.css('transform', 'none');
+				this.$foeHint.css('transform', 'none');
+				this.$controls.css('top', 370);
+			}
 			if (this.$chat) this.$chatFrame.scrollTop(this.$chat.height());
 		},
 		show: function () {
@@ -937,6 +948,7 @@
 
 			if (x > 335) x = 335;
 			if (y < 140) y = 140;
+			if (x > $(window).width() - 303) x = Math.max($(window).width() - 303, 0);
 			if (!$('#tooltipwrapper').length) $(document.body).append('<div id="tooltipwrapper"></div>');
 			$('#tooltipwrapper').css({
 				left: x,
diff --git a/style/client.css b/style/client.css
index 28e1de5b1..813e59c1f 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1424,12 +1424,28 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
 	border-right: 0;
 	top: 0;
 	left: 0;
+	transform-origin: top left;
+}
+.ps-room .foehint {
+	transform-origin: top left;
 }
 .ps-room .battle-controls {
 	position: absolute;
 	top: 370px;
 	left: 0;
 	width: 640px;
+	background: #EEF2F5;
+}
+@media (max-width:639px) {
+	.ps-room .battle-controls {
+		left: 0;
+		right: 0;
+		width: auto;
+	}
+	.movecontrols, .switchcontrols {
+		max-width: 330px;
+		margin: 0 auto;
+	}
 }
 
 .battle-controls p {
@@ -1638,12 +1654,17 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
 	color: #777777 !important;
 }
 
-@media (max-height:571px) {
+@media (max-height:570px) and (min-width: 440px) {
+	/*
+	 * This is the black move/switch menu for low-res screens
+	 */
+
 	.controls {
 		position: absolute;
 		bottom: 10px;
 		left: 0;
 		right: 0;
+		width: auto;
 		background: #444444;
 		background: rgba(40,40,40,.85);
 		color: #FFFFFF;
@@ -1660,13 +1681,18 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
 		color: #FF7766;
 		border-color: #FF7766;
 	}
+	.battle-controls .movecontrols, .battle-controls .switchcontrols {
+		max-width: 640px;
+	}
 	.movemenu {
 		display: none;
-		padding: 0 100px 0 90px;
+		padding: 0 75px 0 85px;
 	}
 	.switchmenu {
 		display: none;
-		padding: 0 70px 0 210px;
+		max-width: 325px;
+		padding: 0 75px 0 85px;
+		margin: 0 0 0 auto;
 	}
 	.moveselect {
 		position: absolute;