[Mobile] Clean-Up
Removed unnecessary classes. Also added comments and adjusted menu sizes.
This commit is contained in:
Shivam Dave
@@ -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%;
|
||||
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
|
||||
$phoneRepSizePortrait: 19px;
|
||||
$phoneRepSizeLandscape: 66%;
|
||||
$tabletRepSizePortrait: 500px;
|
||||
$tabletRepSizeLandscape: 78%;
|
||||
$desktopMenuSize: 25%;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user