safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-10-28 23:53:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-1052: Migrate to flexbox layout for client view.

Browse Source
This commit is contained in:
Michael Jumper
2015-02-18 15:02:58 -08:00
parent 0190317264
commit 7a4c606efd
2 changed files with 62 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
guacamole/src/main/webapp/app/client/styles/client.css
View File

@@ -38,21 +38,71 @@ body.client {
} }
.client-view { .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; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.client-view .client-body { .client-view .client-body {
display: table-cell; -ms-flex: 1 1 auto;
width: 100%; -moz-box-flex: 1;
height: 100%; -webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
position: relative;
} }
.client-view .client-bottom { .client-view .client-bottom {
display: table-row; -ms-flex: 0 0 auto;
height: 0; -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;
}

12
guacamole/src/main/webapp/app/client/styles/menu.css
View File

@@ -120,11 +120,11 @@
.menu-header > h2 { .menu-header > h2 {
-ms-flex: 1 0 auto; -ms-flex: 1 1 auto;
-moz-box-flex: 1; -moz-box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1 0 auto; -webkit-flex: 1 1 auto;
flex: 1 0 auto; flex: 1 1 auto;
border: none; border: none;
padding: 0; padding: 0;
@@ -136,11 +136,11 @@
.menu-body { .menu-body {
-ms-flex: 0 1 auto; -ms-flex: 1 1 auto;
-moz-box-flex: 1; -moz-box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 0 1 auto; -webkit-flex: 1 1 auto;
flex: 0 1 auto; flex: 1 1 auto;
padding: 1em; padding: 1em;
overflow: auto; overflow: auto;