From ce6d74390e8c1b909159eb50703d90b63011cc5a Mon Sep 17 00:00:00 2001 From: Shivam Dave Date: Mon, 20 Jul 2015 09:39:06 -0700 Subject: [PATCH] [Mobile] Clean-Up Removed unnecessary classes. Also added comments and adjusted menu sizes. --- .../commonUI/browse/res/templates/browse.html | 12 +- .../res/templates/create/create-button.html | 2 +- .../res/templates/create/create-menu.html | 6 +- platform/commonUI/general/res/css/forms.css | 2 +- platform/commonUI/general/res/css/items.css | 16 +-- .../general/res/css/theme-espresso.css | 119 +++++++++--------- platform/commonUI/general/res/css/tree.css | 2 +- .../general/res/sass/mobile/_constants.scss | 12 +- .../general/res/sass/mobile/_item.scss | 10 +- .../general/res/sass/mobile/_layout.scss | 53 ++++---- .../res/sass/mobile/controls/_menus.scss | 42 ++++--- 11 files changed, 139 insertions(+), 137 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index d126d672cb..72d1ab3f1f 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -23,14 +23,9 @@
- - -
- - -
+
- - -
+ +
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html index 4fce8d8f9c..527afd9882 100644 --- a/platform/commonUI/browse/res/templates/create/create-button.html +++ b/platform/commonUI/browse/res/templates/create/create-button.html @@ -23,7 +23,7 @@
Create
-
+
diff --git a/platform/commonUI/browse/res/templates/create/create-menu.html b/platform/commonUI/browse/res/templates/create/create-menu.html index e0de7ecc2d..3386d2d266 100644 --- a/platform/commonUI/browse/res/templates/create/create-menu.html +++ b/platform/commonUI/browse/res/templates/create/create-menu.html @@ -20,11 +20,11 @@ at runtime from the About dialog for additional information. -->
-
+
-
+
{{representation.activeMetadata.glyph}}
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index 2630143bbf..7d80703443 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -72,7 +72,7 @@ /************************** WINDOW DIMENSIONS FOR RWD */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ -/************************** DEVICE PARAMETERS FOR MENUS */ +/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index 0706514394..b4152de66d 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -72,7 +72,7 @@ /************************** WINDOW DIMENSIONS FOR RWD */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ -/************************** DEVICE PARAMETERS FOR MENUS */ +/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -351,25 +351,21 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 24, ../sass/mobile/_item.scss */ + /* line 28, ../sass/mobile/_item.scss */ .items-holder .item.grid-item { width: 100%; height: 50px; } } @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 24, ../sass/mobile/_item.scss */ + /* line 28, ../sass/mobile/_item.scss */ .items-holder .item.grid-item { width: 100%; height: 100px; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 24, ../sass/mobile/_item.scss */ + /* line 28, ../sass/mobile/_item.scss */ .items-holder .item.grid-item { width: 200px; height: 200px; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 49, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .icon { - display: none; } } -@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 49, ../sass/mobile/_item.scss */ +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { + /* line 52, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .icon { display: none; } } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 01221fca13..6f0704c532 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -73,7 +73,7 @@ /************************** WINDOW DIMENSIONS FOR RWD */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ -/************************** DEVICE PARAMETERS FOR MENUS */ +/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -737,7 +737,7 @@ mct-container { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 25, ../sass/mobile/_layout.scss */ .browse-wrapper, - .pane-special { + .mobile-pane { position: absolute; left: 0; top: 0; @@ -747,15 +747,15 @@ mct-container { height: 100%; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 37, ../sass/mobile/_layout.scss */ + /* line 38, ../sass/mobile/_layout.scss */ .desktop-browse { min-width: 150px; max-width: 800px; width: 25%; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 48, ../sass/mobile/_layout.scss */ - .browse-hidetree .pane-special.left { + /* line 50, ../sass/mobile/_layout.scss */ + .browse-hidetree .mobile-pane.left-menu { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; -webkit-transition-duration: 0.35s; @@ -779,8 +779,8 @@ mct-container { overflow-y: hidden; overflow-x: hidden; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 60, ../sass/mobile/_layout.scss */ - .browse-hidetree .pane-special.right { + /* line 62, ../sass/mobile/_layout.scss */ + .browse-hidetree .mobile-pane.right-repr { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; -webkit-transition-duration: 0.35s; @@ -790,8 +790,8 @@ mct-container { width: 100% !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 70, ../sass/mobile/_layout.scss */ - .browse-showtree .pane-special.left { + /* line 77, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.left-menu { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; -webkit-transition-duration: 0.35s; @@ -813,24 +813,24 @@ mct-container { display: block !important; width: auto !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 70, ../sass/mobile/_layout.scss */ - .browse-showtree .pane-special.left { + /* line 77, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.left-menu { right: 19px !important; } } @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 70, ../sass/mobile/_layout.scss */ - .browse-showtree .pane-special.left { + /* line 77, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.left-menu { right: 66% !important; } } @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 70, ../sass/mobile/_layout.scss */ - .browse-showtree .pane-special.left { - right: 600px !important; } } + /* line 77, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.left-menu { + right: 500px !important; } } @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 70, ../sass/mobile/_layout.scss */ - .browse-showtree .pane-special.left { + /* line 77, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.left-menu { right: 78% !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 91, ../sass/mobile/_layout.scss */ - .browse-showtree .pane-special.right { + /* line 98, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.right-repr { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; -webkit-transition-duration: 0.35s; @@ -838,29 +838,24 @@ mct-container { transition-timing-function: ease; left: auto !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 91, ../sass/mobile/_layout.scss */ - .browse-showtree .pane-special.right { + /* line 98, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.right-repr { width: 19px !important; } } @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 91, ../sass/mobile/_layout.scss */ - .browse-showtree .pane-special.right { + /* line 98, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.right-repr { width: 66% !important; } } @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 91, ../sass/mobile/_layout.scss */ - .browse-showtree .pane-special.right { - width: 600px !important; } } + /* line 98, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.right-repr { + width: 500px !important; } } @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 91, ../sass/mobile/_layout.scss */ - .browse-showtree .pane-special.right { + /* line 98, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.right-repr { width: 78% !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 111, ../sass/mobile/_layout.scss */ - .mobile-splitter { - display: none; } } - -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 117, ../sass/mobile/_layout.scss */ + /* line 119, ../sass/mobile/_layout.scss */ .button-pos { position: absolute; -moz-transition-duration: 0.35s; @@ -870,23 +865,23 @@ mct-container { transition-timing-function: ease; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 124, ../sass/mobile/_layout.scss */ + /* line 129, ../sass/mobile/_layout.scss */ .object-header-mobile { position: relative; left: 30px; } } @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 124, ../sass/mobile/_layout.scss */ + /* line 129, ../sass/mobile/_layout.scss */ .object-header-mobile { position: relative; left: 35px; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 135, ../sass/mobile/_layout.scss */ + /* line 141, ../sass/mobile/_layout.scss */ .mobile-hide { display: none; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 141, ../sass/mobile/_layout.scss */ + /* line 148, ../sass/mobile/_layout.scss */ .phone-hide { display: none; } } @@ -2892,39 +2887,43 @@ label.checkbox.custom { right: 0; width: auto; } -/* line 2, ../sass/mobile/controls/_menus.scss */ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/* line 25, ../sass/mobile/controls/_menus.scss */ .mobile-menu-icon { display: inline-block; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 2, ../sass/mobile/controls/_menus.scss */ + /* line 25, ../sass/mobile/controls/_menus.scss */ .mobile-menu-icon { font-size: 25px; } } @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 2, ../sass/mobile/controls/_menus.scss */ + /* line 25, ../sass/mobile/controls/_menus.scss */ .mobile-menu-icon { font-size: 29px; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 2, ../sass/mobile/controls/_menus.scss */ + /* line 25, ../sass/mobile/controls/_menus.scss */ .mobile-menu-icon { display: none; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 15, ../sass/mobile/controls/_menus.scss */ - .mobile-super-menu { - border-right: 0px !important; - padding-right: 0px !important; } } - -/* line 22, ../sass/mobile/controls/_menus.scss */ -.mobile-super-menu-text { - overflow-x: hidden !important; - text-overflow: ellipsis !important; } - -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 27, ../sass/mobile/controls/_menus.scss */ - .mobile-right-create { - width: 0px !important; - padding: 0px !important; } } - /* line 1, ../sass/controls/_time-controller.scss */ .l-time-controller { position: relative; diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index aba2210cf6..3fe58b337d 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -72,7 +72,7 @@ /************************** WINDOW DIMENSIONS FOR RWD */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ -/************************** DEVICE PARAMETERS FOR MENUS */ +/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 448a7fb531..27761e2132 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -66,9 +66,9 @@ $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mo $desktopPortrait: "screen and #{$desktopPortraitCheck}"; $desktopLandscape: "screen and #{$desktopLanscapeCheck}"; -/************************** DEVICE PARAMETERS FOR MENUS */ -$phoneMenuSizePortrait: 19px; -$phoneMenuSizeLandscape: 66%; -$tabletMenuSizePortrait: 600px; -$tabletMenuSizeLandscape: 78%; -$desktopMenuSize: 25%; \ No newline at end of file +/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ +$phoneRepSizePortrait: 19px; +$phoneRepSizeLandscape: 66%; +$tabletRepSizePortrait: 500px; +$tabletRepSizeLandscape: 78%; +$desktopMenuSize: 25%; diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss index c6e9deabf5..2b74671628 100644 --- a/platform/commonUI/general/res/sass/mobile/_item.scss +++ b/platform/commonUI/general/res/sass/mobile/_item.scss @@ -19,10 +19,13 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ + +// Sets the size of the items in the folder +// representation. Instead of a grid, +// a list is used. .items-holder { .item { &.grid-item { -// NOTE: Sets grid item width $dWid: $ueBrowseGridItemLg; $dHei: $ueBrowseGridItemLg; @include phone { @@ -47,12 +50,9 @@ } .icon { - @include phone { + @include phoneandtablet { display: none; } - @include tablet { - display: none; - } } } } diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 09bfa95cba..014aa8ca3d 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -20,8 +20,10 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ +// Wrapper of the entire 2 panes, only enacted on +// phone and tablet. Also for the panes .browse-wrapper, -.pane-special { +.mobile-pane { @include phoneandtablet { position: absolute; left: 0; top: 0; @@ -31,7 +33,8 @@ } } - +// Default views of the panels +// if in desktop browser .desktop-browse { @include desktop { min-width: 150px; @@ -40,10 +43,11 @@ } } - - +// When the tree is hidden, these are the +// classes used for the left menu and the +// right representation. .browse-hidetree { - .pane-special.left { + .mobile-pane.left-menu { @include phoneandtablet { @include slMenuTransitions; @include trans-prop-nice(opacity, .35s); @@ -55,7 +59,7 @@ } } - .pane-special.right { + .mobile-pane.right-repr { @include phoneandtablet { @include slMenuTransitions; left: auto !important; @@ -64,8 +68,13 @@ } } +// When the tree is shown, these are +// the classes used for the left menu +// and the right menu (for each device & +// orientation combination, separate +// parameters are used) .browse-showtree { - .pane-special.left { + .mobile-pane.left-menu { @include phoneandtablet { @include slMenuTransitions; @include trans-prop-nice(opacity, .4s); @@ -74,44 +83,39 @@ width: auto !important; } @include phonePortrait { - right: $phoneMenuSizePortrait !important; + right: $phoneRepSizePortrait !important; } @include phoneLandscape { - right: $phoneMenuSizeLandscape !important; + right: $phoneRepSizeLandscape !important; } @include tabletPortrait { - right: $tabletMenuSizePortrait !important; + right: $tabletRepSizePortrait !important; } @include tabletLandscape { - right: $tabletMenuSizeLandscape !important; + right: $tabletRepSizeLandscape !important; } } - .pane-special.right { + .mobile-pane.right-repr { @include phoneandtablet { @include slMenuTransitions; left: auto !important; } @include phonePortrait { - width: $phoneMenuSizePortrait !important; + width: $phoneRepSizePortrait !important; } @include phoneLandscape { - width: $phoneMenuSizeLandscape !important; + width: $phoneRepSizeLandscape !important; } @include tabletPortrait { - width: $tabletMenuSizePortrait !important; + width: $tabletRepSizePortrait !important; } @include tabletLandscape { - width: $tabletMenuSizeLandscape !important; + width: $tabletRepSizeLandscape !important; } } } -.mobile-splitter { - @include phoneandtablet { - display: none; - } -} - +// Button position is set as absolute with transitions .button-pos { @include phoneandtablet { position: absolute; @@ -119,6 +123,9 @@ } } +// Object header must be moved +// over to make space for the +// hamburger icon .object-header-mobile { @include phone { position: relative; @@ -130,12 +137,14 @@ } } +// Hides objects on phone and tablet .mobile-hide { @include phoneandtablet { display: none; } } +// Hides objects only on the phone .phone-hide { @include phone { display: none; diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss index 3a5b67fa50..9b0136b5b3 100644 --- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss @@ -1,4 +1,27 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +// Mobile hamburger icon is +// sized according to the device .mobile-menu-icon { display: inline-block; @include phone { @@ -11,22 +34,3 @@ display: none; } } - -.mobile-super-menu { - @include phoneandtablet { - border-right: 0px !important; - padding-right: 0px !important; - } -} - -.mobile-super-menu-text { - overflow-x: hidden !important; - text-overflow: ellipsis !important; -} - -.mobile-right-create { - @include phoneandtablet { - width: 0px !important; - padding: 0px !important; - } -} \ No newline at end of file