safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-08 06:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-1044: Keep menu header stationary while allowing body to scroll.

Browse Source
This commit is contained in:
Michael Jumper
2015-01-30 14:06:20 -08:00
parent a87d8053f0
commit 7b9449d2da
2 changed files with 128 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,10 +21,10 @@
*/
#menu {
overflow: auto;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
max-width: 100%;
width: 480px;
background: #EEE;
@@ -37,6 +37,43 @@
transition: left 0.125s, opacity 0.125s;
}
.menu-content {
overflow: hidden;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.menu-header {
display: table-row;
height: 0;
}
.menu-header h2 {
margin-bottom: 0;
}
.menu-body {
display: table-row;
height: 100%;
}
.menu-body-content {
position: relative;
width: 100%;
height: 100%;
}
.menu-body-scroll-region {
overflow: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#menu h3 {
margin: 1em;
}

18
guacamole/src/main/webapp/app/client/templates/client.html
View File

@@ -43,7 +43,7 @@
<!-- On-screen keyboard -->
<div class="keyboard-container" ng-show="showOSK">
<guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"/>
<guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"></guac-osk>
</div>
</div>
@@ -51,13 +51,22 @@
</div>
<!-- Menu -->
<div ng-class="{open: menu.shown}" id="menu" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
<div ng-class="{open: menu.shown}" id="menu">
<div class="menu-content">
<!-- Stationary header -->
<div class="menu-header">
<div class="logout-panel">
<a class="home button" href="#/">{{'CLIENT.ACTION_NAVIGATE_HOME' | translate}}</a>
<a class="disconnect danger button" ng-click="disconnect()">{{'CLIENT.ACTION_DISCONNECT' | translate}}</a>
</div>
<h2>{{client.name}}</h2>
</div>
<!-- Scrollable body -->
<div class="menu-body">
<div class="menu-body-content">
<div class="menu-body-scroll-region" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
<!-- Clipboard -->
<h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
@@ -134,5 +143,10 @@
</div>
</div>
</div>
</div>
</div>
</div>
</guac-viewport>