From 89265151f10fa95e76af600fde618417657eadea Mon Sep 17 00:00:00 2001
From: Ricki Hastings <rickihastings22@gmail.com>
Date: Tue, 4 Mar 2014 18:55:12 +0000
Subject: [PATCH] Tearing out some more flexbox and replacing with traditional
 CSS floats and other techniques for better IE support. Should improve the
 situation in #22

---
 client/css/ie.css             | 13 -----------
 client/js/views/input.view.js |  1 +
 client/less/input.less        | 41 +++++++++++++++++++++++++++--------
 client/less/userlist.less     |  9 +++-----
 client/templates/input.hbs    | 12 ++++++++--
 5 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/client/css/ie.css b/client/css/ie.css
index 77bc8c0..b8aef2d 100755
--- a/client/css/ie.css
+++ b/client/css/ie.css
@@ -26,17 +26,4 @@
 
 .backlog .row {
 	padding: 3px;
-}
-
-.channel-input input {
-	width: 85%;
-}
-
-.userlist ul li a span.prefix {
-	padding: 4px 6px 6px 0;
-}
-
-.userlist ul li a span.name {
-	height: auto;
-	padding: 2px 6px 0 0;
 }
\ No newline at end of file
diff --git a/client/js/views/input.view.js b/client/js/views/input.view.js
index 4529f0a..fd10b0e 100755
--- a/client/js/views/input.view.js
+++ b/client/js/views/input.view.js
@@ -1,5 +1,6 @@
 App.InputView = Ember.View.extend({
 	templateName: 'input',
+	tagName: 'table',
 	classNames: 'channel-input',
 
 	didInsertElement: function() {
diff --git a/client/less/input.less b/client/less/input.less
index 69d67eb..55088d6 100755
--- a/client/less/input.less
+++ b/client/less/input.less
@@ -2,33 +2,56 @@
 
 .channel-input {
 	padding: 0;
+	margin: 0;
 	border-top: 2px solid #D9D9D9;
 	background: @white;
-	.flex;
+	width: 100%;
 	.snap-notop;
 
+	td:first-child {
+		width: 100px;
+	}
+
+	td:last-child {
+		padding-right: 6px;
+	}
+
 	.nick-button {
 		width: auto;
 		margin: 0;
-		padding: 10px 14px 10px 91px;
+		padding: 9px 14px 9px 91px;
 		float: left;
 		font-size: 13px;
 		font-weight: bold;
 	}
 
-	input {
+	form.input-area {
+		padding: 0 4px;
+		margin: 0;
 		border: 1px solid #0069D6;
-		color: #000000;
+		color: #000;
+		background: #fff;
+		.border-radius(3px);
+	}
+
+	textarea {
+		outline: 0;
+		border: 0;
+		margin: 0;
 		display: inline-block;
 		font-size: 13px;
 		min-height: 18px;
 		line-height: 18px;
-		margin: 6px;
-		padding: 4px;
-		outline: none;
-		background: #ffffff;
+		padding: 4px 0;
 		text-align: left;
 		resize: none;
-		.setflex(1);	
+		width: 100%;
+		.box-shadow;
+	}
+
+	textarea:focus {
+		outline: 0;
+		border: 0;
+		.box-shadow;
 	}
 }
\ No newline at end of file
diff --git a/client/less/userlist.less b/client/less/userlist.less
index 7f5e84b..6ec4f1d 100755
--- a/client/less/userlist.less
+++ b/client/less/userlist.less
@@ -42,17 +42,16 @@
 
 			a {
 				text-decoration: none;
-				padding: 6px;
 				font-weight: bold;
 				color: inherit;
-				.flex;
+				display: block;
 
 				span {
 					&.prefix {
 						width: 18px;
 						display: inline-block;
 						text-align: center;
-						.setflex(1);
+						padding: 6px 0 6px 6px;
 
 						&.op { color: darkRed; }
 						&.halfop { color: darkOrange; }
@@ -60,11 +59,9 @@
 					}
 
 					&.name {
-						display: inline-block;
-						width: 85%;
 						overflow: hidden;
 						text-overflow: ellipsis;
-						height: 15px;
+						padding: 6px;
 					}
 				}
 			}
diff --git a/client/templates/input.hbs b/client/templates/input.hbs
index e7b6d26..f300068 100755
--- a/client/templates/input.hbs
+++ b/client/templates/input.hbs
@@ -1,2 +1,10 @@
-<label for="chat" class="nick-button">{{nick}}</label>
-{{input class="command-field" type="text" tabindex="1" valueBinding="inputValue" value=""}}
\ No newline at end of file
+<tr>
+	<td>
+		<label for="chat" class="nick-button">{{nick}}</label>
+	</td>
+	<td>
+		<form class="input-area">
+			{{textarea class="command-field" type="text" tabindex="1" valueBinding="inputValue" value=""}}
+		</form>
+	</td>
+</tr>
\ No newline at end of file