From 7a4c606efd4bfc818abe97625ac5256b0042285d Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Wed, 18 Feb 2015 15:02:58 -0800
Subject: [PATCH] GUAC-1052: Migrate to flexbox layout for client view.

---
 .../main/webapp/app/client/styles/client.css  | 62 +++++++++++++++++--
 .../main/webapp/app/client/styles/menu.css    | 12 ++--
 2 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/guacamole/src/main/webapp/app/client/styles/client.css b/guacamole/src/main/webapp/app/client/styles/client.css
index af8c41f03..04bd3af67 100644
--- a/guacamole/src/main/webapp/app/client/styles/client.css
+++ b/guacamole/src/main/webapp/app/client/styles/client.css
@@ -38,21 +38,71 @@ body.client {
 }
 
 .client-view {
-    display: table;
+
+    /* IE10 */
+    display: -ms-flexbox;
+    -ms-flex-align: stretch;
+    -ms-flex-direction: column;
+    -ms-flex-pack: end;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: stretch;
+    -moz-box-orient: vertical;
+    -moz-box-pack: end;
+    
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: stretch;
+    -webkit-box-orient: vertical;
+    -webkit-box-pack: end;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: stretch;
+    -webkit-flex-direction: column;
+    -webkit-flex-pack: end;
+
+    /* W3C */
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    flex-pack: end;
+
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+
 }
 
 .client-view .client-body {
-    display: table-cell;
-    width: 100%;
-    height: 100%;
+    -ms-flex: 1 1 auto;
+    -moz-box-flex: 1;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+    position: relative;
 }
 
 .client-view .client-bottom {
-    display: table-row;
-    height: 0;
+    -ms-flex: 0 0 auto;
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
 }
+
+.client-view .client-body .main {
+
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    width: auto;
+    height: auto;
+
+}
\ No newline at end of file
diff --git a/guacamole/src/main/webapp/app/client/styles/menu.css b/guacamole/src/main/webapp/app/client/styles/menu.css
index 132b72b40..102713f4e 100644
--- a/guacamole/src/main/webapp/app/client/styles/menu.css
+++ b/guacamole/src/main/webapp/app/client/styles/menu.css
@@ -120,11 +120,11 @@
 
 .menu-header > h2 {
 
-    -ms-flex: 1 0 auto;
+    -ms-flex: 1 1 auto;
     -moz-box-flex: 1;
     -webkit-box-flex: 1;
-    -webkit-flex: 1 0 auto;
-    flex: 1 0 auto;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
 
     border: none;
     padding: 0;
@@ -136,11 +136,11 @@
 
 .menu-body {
 
-    -ms-flex: 0 1 auto;
+    -ms-flex: 1 1 auto;
     -moz-box-flex: 1;
     -webkit-box-flex: 1;
-    -webkit-flex: 0 1 auto;
-    flex: 0 1 auto;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
 
     padding: 1em;
     overflow: auto;