GUAC-587: Contain each menu section within its own div.

This commit is contained in:
Michael Jumper
2015-05-05 15:26:37 -07:00
parent 3128b69db6
commit d8512531c6
2 changed files with 68 additions and 58 deletions

View File

@@ -127,12 +127,6 @@
flex: 0 0 auto; flex: 0 0 auto;
} }
#menu h3 {
margin: 0;
padding: 0;
padding-bottom: 1em;
}
#menu .content { #menu .content {
padding: 0; padding: 0;
@@ -165,7 +159,13 @@
} }
#menu .content + h3 { .menu-section h3 {
margin: 0;
padding: 0;
padding-bottom: 1em;
}
.menu-section ~ .menu-section h3 {
padding-top: 1em; padding-top: 1em;
} }

View File

@@ -66,21 +66,26 @@
<div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState"> <div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
<!-- Clipboard --> <!-- Clipboard -->
<div class="menu-section" id="clipboard-settings">
<h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3> <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
<div class="content" id="clipboard-settings"> <div class="content">
<p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p> <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
<textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea> <textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea>
</div> </div>
</div>
<!-- File transfers --> <!-- File transfers -->
<div class="menu-section" id="file-transfers">
<h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3> <h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
<div class="content" id="file-transfers"> <div class="content">
<guac-file-transfer-manager client="client"></guac-file-transfer-manager> <guac-file-transfer-manager client="client"></guac-file-transfer-manager>
</div> </div>
</div>
<!-- Input method --> <!-- Input method -->
<div class="menu-section" id="keyboard-settings">
<h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3> <h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
<div class="content" id="keyboard-settings"> <div class="content">
<!-- No IME --> <!-- No IME -->
<div class="choice"> <div class="choice">
@@ -102,10 +107,12 @@
</div> </div>
</div> </div>
</div>
<!-- Mouse mode --> <!-- Mouse mode -->
<div class="menu-section" id="mouse-settings">
<h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3> <h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
<div class="content" id="mouse-settings"> <div class="content">
<p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p> <p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p>
<!-- Touchscreen --> <!-- Touchscreen -->
@@ -127,8 +134,10 @@
</div> </div>
</div> </div>
</div>
<!-- Display options --> <!-- Display options -->
<div class="menu-section" id="display-settings">
<h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3> <h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3>
<div class="content"> <div class="content">
<div id="zoom-settings"> <div id="zoom-settings">
@@ -138,6 +147,7 @@
</div> </div>
<div><label><input ng-model="menu.autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label></div> <div><label><input ng-model="menu.autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label></div>
</div> </div>
</div>
</div> </div>