alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Mobile] IN PROGRESS: Overlay and form cleanups

Browse Source 
open #74
Widths and layout strategy fixed for label and
controls in form when appearing in mobile;
Overlay margins adjusted;
Cleaned up font size, line-height in tree items;
This commit is contained in:
Charles Hacskaylo
2015-08-26 09:43:51 -07:00
parent 07d0706cd1
commit 39bd292886
13 changed files with 196 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
platform/commonUI/general/res/sass/mobile/_constants.scss
View File

@@ -20,11 +20,13 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
/************************** STYLE */
$colorMobilePaneLeft: #222;
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
$mobileListIconSize: 30px;
$mobileTitleDescH: 35px;
$mobile-listRight: 10px;
$mobileOverlayMargin: 10px;
$phoneItemH: floor($ueBrowseGridItemLg/4);
$tabletItemH: floor($ueBrowseGridItemLg/3);

8
platform/commonUI/general/res/sass/mobile/_tree.scss
View File

@@ -26,7 +26,6 @@
li {
//border-top: 1px solid $colorInteriorBorder; // TEMP
span.tree-item {
// Adds some space to the top of each tree item
height: $mobileTreeItemH;
line-height: $mobileTreeItemH;
margin-bottom: 0px;
@@ -40,13 +39,10 @@
}
.label {
// Designates the starting left margin
// (indentation) of 'My Items'
// Also adds right space for selection button
left: 0;
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
font-size: 1.1em;
//font-size: 1.2em; // CH CO
line-height: $mobileTreeItemH;
//font-size: 1.1em; // CH CO
.type-icon {
@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
}

44
platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
View File

@@ -1,11 +1,41 @@
.overlay {
@include phoneandtablet {
@include phoneandtablet {
.overlay {
$m: 0;
// Removes curved edges on the dialog box
// and makes it take up fullscreen
>.holder {
@include border-radius($m);
top: $m; right: $m; bottom: $m; left: $m;
> .holder {
@include border-radius($m);
top: $m;
right: $m;
bottom: $m;
left: $m;
> .contents {
top: $mobileOverlayMargin;
right: $mobileOverlayMargin;
bottom: $mobileOverlayMargin;
left: $mobileOverlayMargin;
.form.editor {
border: none;
.contents {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
}
}
}
@include phone {
.overlay > .holder > .contents .form.editor .contents .form-row {
> .label,
> .controls {
//@include test(blue);
display: block;
float: none;
width: 100%;
}
}
}