[Mobile] Merge
Merged open73 into mobile. Search bar is currently covering the create button slightly.
This commit is contained in:
Shivam Dave
@@ -20,18 +20,20 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
$mobile-listIcon: 30px;
|
||||
$mobile-listRight: 10px;
|
||||
/************************** STYLE */
|
||||
$colorMobilePaneLeft: #222;
|
||||
|
||||
$phone-itemHeight: $ueBrowseGridItemLg/4;
|
||||
$tablet-itemHeight: $ueBrowseGridItemLg/3;
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
$mobileListIconSize: 30px;
|
||||
$mobileTitleDescH: 35px;
|
||||
$mobileOverlayMargin: 10px;
|
||||
$phoneItemH: floor($ueBrowseGridItemLg/4);
|
||||
$tabletItemH: floor($ueBrowseGridItemLg/3);
|
||||
|
||||
/************************** MOBILE TREE MENU DIMENSIONS */
|
||||
$mobile-treeHeight: 38px;
|
||||
$mobile-startingTreeLeft: 3px;
|
||||
$mobile-runningTreeLeft: 7px;
|
||||
$mobile-treeRight: 13px;
|
||||
$mobileTreeItemH: 35px;
|
||||
$mobileTreeItemIndent: 20px;
|
||||
$mobileTreeRightArrowW: 30px;
|
||||
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
$phoMaxW: 514px;
|
||||
@@ -80,8 +82,5 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
|
||||
$desktopLandscape: "screen and #{$desktopLandscapeCheck}";
|
||||
|
||||
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
|
||||
$phoneRepSizePortrait: 19px;
|
||||
$phoneRepSizeLandscape: 66%;
|
||||
$tabletRepSizePortrait: 500px;
|
||||
$tabletRepSizeLandscape: 78%;
|
||||
$desktopMenuSize: 25%;
|
||||
$proporMenuOnly: 90%;
|
||||
$proporMenuWithView: 40%;
|
||||
|
||||
@@ -27,103 +27,92 @@
|
||||
.items-holder {
|
||||
.item {
|
||||
&.grid-item {
|
||||
$dWid: $ueBrowseGridItemLg;
|
||||
$dHei: $ueBrowseGridItemLg;
|
||||
$titleH: 30px;
|
||||
@include phoneandtablet {
|
||||
$dWid: 100%;
|
||||
.mobile-grid-nav {
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 55px;
|
||||
}
|
||||
.mobile-info {
|
||||
text-align: center;
|
||||
width: 50px;
|
||||
right: 0px;
|
||||
left: auto;
|
||||
font-size: 1.3em;
|
||||
width: 100%;
|
||||
>.contents {
|
||||
top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
|
||||
}
|
||||
.bar {
|
||||
&.bottom-bar.abs {
|
||||
top: 0px;
|
||||
height: auto;
|
||||
&.top-bar {
|
||||
// Becomes the right side of the item
|
||||
//@include test(blue);
|
||||
bottom: 0 !important; left: auto !important; right: 20px !important;
|
||||
width: 40px !important; height: auto !important;
|
||||
text-align: right;
|
||||
}
|
||||
&.bottom-bar {
|
||||
// Becomes the left side of the item
|
||||
left: $mobileListIconSize + $interiorMarginLg;
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
}
|
||||
.item-main {
|
||||
.item-type {
|
||||
font-size: $mobile-listIcon;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
//@include test(blue);
|
||||
font-size: $mobileListIconSize;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
line-height: 100%;
|
||||
text-align: left;
|
||||
height: auto
|
||||
width: $mobileListIconSize;
|
||||
.l-icon-link {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.item-open {
|
||||
display: none;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
font-size: 1em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.title, .details {
|
||||
margin-left: $mobile-listIcon;
|
||||
}
|
||||
}
|
||||
|
||||
@include phone {
|
||||
$dHei: $phone-itemHeight;
|
||||
width: $dWid;
|
||||
$dHei: $phoneItemH;
|
||||
height: $dHei;
|
||||
.mobile-right {
|
||||
top: 100%;
|
||||
}
|
||||
.mobile-info {
|
||||
line-height: $phone-itemHeight * .5;
|
||||
.bar {
|
||||
&.top-bar {
|
||||
// Becomes the right side of the item
|
||||
line-height: $dHei !important;
|
||||
}
|
||||
&.bottom-bar {
|
||||
@include verticalCenterBlock($dHei, $mobileTitleDescH);
|
||||
}
|
||||
}
|
||||
.item-main {
|
||||
.item-type {
|
||||
line-height: $phone-itemHeight * .8;
|
||||
@include verticalCenterBlock($dHei, $mobileListIconSize);
|
||||
}
|
||||
.item-open {
|
||||
line-height: $dHei;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin-right: $mobile-listRight;
|
||||
line-height: $phone-itemHeight * .5;
|
||||
}
|
||||
.details {
|
||||
margin-right: $mobile-listRight;
|
||||
line-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
$dHei: $tablet-itemHeight;
|
||||
width: $dWid;
|
||||
$dHei: $tabletItemH;
|
||||
height: $dHei;
|
||||
.mobile-right {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.mobile-info {
|
||||
line-height: $tablet-itemHeight * .57;
|
||||
.bar {
|
||||
&.top-bar {
|
||||
// Becomes the right side of the item
|
||||
line-height: $dHei !important;
|
||||
}
|
||||
&.bottom-bar {
|
||||
@include verticalCenterBlock($dHei, $mobileTitleDescH);
|
||||
}
|
||||
}
|
||||
.item-main {
|
||||
.item-type {
|
||||
font-size: $mobile-listIcon;
|
||||
line-height: $tablet-itemHeight * .75;
|
||||
@include verticalCenterBlock($dHei, $mobileListIconSize);
|
||||
}
|
||||
.item-open {
|
||||
line-height: $dHei;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin-right: $mobile-listRight;
|
||||
line-height: $tablet-itemHeight * .57;
|
||||
}
|
||||
.details {
|
||||
margin-right: $mobile-listRight;
|
||||
line-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
$dWid: $ueBrowseGridItemLg;
|
||||
$dHei: $ueBrowseGridItemLg;
|
||||
width: $dWid;
|
||||
height: $dHei;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,203 +20,155 @@
|
||||
* 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,
|
||||
.mobile-pane {
|
||||
@include phoneandtablet {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
right: 0;
|
||||
white-space: nowrap;
|
||||
@include phoneandtablet {
|
||||
// Wrapper of the entire 2 panes, only enacted on
|
||||
// phone and tablet. Also for the panes
|
||||
.browse-wrapper,
|
||||
.pane {
|
||||
top: 0 !important; right: 0; bottom: 0; left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Default views of the panels
|
||||
// if in desktop browser
|
||||
.desktop-browse {
|
||||
@include desktop {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: $desktopMenuSize;
|
||||
}
|
||||
}
|
||||
.pane.left.treeview {
|
||||
background-color: $colorMobilePaneLeft;
|
||||
}
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
// classes used for the left menu and the
|
||||
// right representation.
|
||||
.browse-hidetree {
|
||||
// NOTE: DISABLED SELECTION
|
||||
// Selection disabled in both panes
|
||||
// causing cut/copy/paste menu to
|
||||
// not appear. Should me moved in
|
||||
// future to properly work
|
||||
@include phoneandtablet {
|
||||
.pane.right-repr {
|
||||
//@include test();
|
||||
@include slMenuTransitions;
|
||||
margin-left: 0 !important;
|
||||
#content-area {
|
||||
@include slMenuTransitions;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.user-environ .browse-area,
|
||||
.user-environ .edit-area,
|
||||
.user-environ .editor {
|
||||
top: 0; left: 0; right: 0; bottom: $ueFooterH;
|
||||
}
|
||||
|
||||
.holder.l-mobile {
|
||||
top: $bodyMargin !important;
|
||||
right: $bodyMargin !important;
|
||||
bottom: $bodyMargin !important;
|
||||
left: $bodyMargin !important;
|
||||
}
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
// classes used for the left menu and the
|
||||
// right representation.
|
||||
.browse-hidetree {
|
||||
@include user-select(none);
|
||||
}
|
||||
// Sets the left tree menu when the tree
|
||||
// is hidden.
|
||||
.mobile-pane.left-menu {
|
||||
@include phoneandtablet {
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
// Sets the left tree menu when the tree
|
||||
// is hidden.
|
||||
.pane.left.treeview {
|
||||
opacity: 0;
|
||||
right: 100% !important;
|
||||
width: auto !important;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
// Sets the right represenation when
|
||||
// the tree is hidden.
|
||||
.pane.right-repr {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the right represenation when
|
||||
// the tree is hidden.
|
||||
.mobile-pane.right-repr {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
left: auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-tree-holder {
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
// NOTE: DISABLED SELECTION
|
||||
// Selection disabled in both panes
|
||||
// causing cut/copy/paste menu to
|
||||
// not appear. Should me moved in
|
||||
// future to properly work
|
||||
@include phoneandtablet {
|
||||
|
||||
.browse-showtree {
|
||||
// NOTE: DISABLED SELECTION
|
||||
// Selection disabled in both panes
|
||||
// causing cut/copy/paste menu to
|
||||
// not appear. Should me moved in
|
||||
// future to properly work
|
||||
@include user-select(none);
|
||||
}
|
||||
// Sets the left tree menu when the tree
|
||||
// is shown.
|
||||
.mobile-pane.left-menu {
|
||||
@include phoneandtablet {
|
||||
|
||||
// Sets the left tree menu when the tree is shown.
|
||||
.pane.left.treeview {
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
//width: auto !important; // CH CO
|
||||
right: auto !important;
|
||||
width: $proporMenuWithView !important;
|
||||
}
|
||||
// On both phones and tablets, the amount of
|
||||
// space allowed for the right pane is specified
|
||||
@include phonePortrait {
|
||||
right: $phoneRepSizePortrait !important;
|
||||
}
|
||||
@include phoneLandscape {
|
||||
right: $phoneRepSizeLandscape !important;
|
||||
}
|
||||
@include tabletPortrait {
|
||||
right: $tabletRepSizePortrait !important;
|
||||
}
|
||||
@include tabletLandscape {
|
||||
right: $tabletRepSizeLandscape !important;
|
||||
}
|
||||
}
|
||||
// Sets the right represenation when
|
||||
// the tree is shown.
|
||||
.mobile-pane.right-repr {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
left: auto !important;
|
||||
}
|
||||
// On both phones and tablets, the width of
|
||||
// the right pane is specified
|
||||
@include phonePortrait {
|
||||
width: $phoneRepSizePortrait !important;
|
||||
}
|
||||
@include phoneLandscape {
|
||||
width: $phoneRepSizeLandscape !important;
|
||||
}
|
||||
@include tabletPortrait {
|
||||
width: $tabletRepSizePortrait !important;
|
||||
}
|
||||
@include tabletLandscape {
|
||||
width: $tabletRepSizeLandscape !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Sets the right representation when the tree is shown.
|
||||
.pane.right-repr {
|
||||
left: $proporMenuWithView !important;
|
||||
//width: auto !important;
|
||||
|
||||
// Button position is set as absolute with transitions
|
||||
.button-pos {
|
||||
@include phoneandtablet {
|
||||
//left: 0 !important;
|
||||
//transform: translateX($proporMenuWithView);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-icon {
|
||||
font-size: 110%;
|
||||
position: absolute;
|
||||
top: $bodyMargin + 2;
|
||||
left: $bodyMargin;
|
||||
}
|
||||
}
|
||||
|
||||
// Object header must be moved
|
||||
// over to make space for the
|
||||
// hamburger icon
|
||||
.object-header {
|
||||
@include phoneandtablet {
|
||||
position: relative;
|
||||
left: 44px;
|
||||
.label {
|
||||
.context-available {
|
||||
opacity: 1 !important;
|
||||
.object-browse-bar {
|
||||
//@include test();
|
||||
left: 30px !important;
|
||||
.context-available {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.view-switcher {
|
||||
margin-right: 0 !important;
|
||||
.name {
|
||||
// Hide the name in mobile
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-hide {
|
||||
@include desktop {
|
||||
display: none;
|
||||
.tree-holder {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hides objects on phone and tablet
|
||||
.mobile-hide {
|
||||
@include phoneandtablet {
|
||||
display: none;
|
||||
.mobile-disable-select {
|
||||
@include user-select(none);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-important-hide {
|
||||
@include phoneandtablet {
|
||||
// Hides objects on phone and tablet
|
||||
.mobile-hide,
|
||||
.mobile-hide-important {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-back-hide {
|
||||
@include phoneandtablet {
|
||||
.mobile-back-hide {
|
||||
pointer-events: none;
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hides objects on phone and tablet
|
||||
.mobile-back-unhide {
|
||||
@include phoneandtablet {
|
||||
.mobile-back-unhide {
|
||||
pointer-events: all;
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Hides objects only on the phone
|
||||
.phone-hide {
|
||||
@include phone {
|
||||
display: none;
|
||||
@include phonePortrait {
|
||||
.browse-showtree {
|
||||
.pane.left.treeview {
|
||||
width: $proporMenuOnly !important;
|
||||
}
|
||||
.pane.right-repr {
|
||||
left: 0 !important;
|
||||
transform: translateX($proporMenuOnly);
|
||||
#content-area {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree-holder {
|
||||
@include phoneandtablet {
|
||||
overflow-x: hidden !important;
|
||||
@include desktop {
|
||||
.desktop-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mobile-disable-select {
|
||||
@include phoneandtablet {
|
||||
@include user-select(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,48 +20,42 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
|
||||
ul.tree {
|
||||
// Only applies to phones and tablets
|
||||
@include phoneandtablet {
|
||||
@include menuUlReset();
|
||||
@include phoneandtablet {
|
||||
ul.tree {
|
||||
//@include menuUlReset();
|
||||
li {
|
||||
//border-top: 1px solid $colorInteriorBorder; // TEMP
|
||||
span.tree-item {
|
||||
// Adds some space to the top of each tree item
|
||||
height: $mobile-treeHeight;
|
||||
line-height: $mobile-treeHeight;
|
||||
padding-top: $interiorMarginSm;
|
||||
padding-bottom: $interiorMarginSm;
|
||||
height: $mobileTreeItemH;
|
||||
line-height: $mobileTreeItemH;
|
||||
margin-bottom: 0px;
|
||||
.view-control {
|
||||
//@include test(red);
|
||||
position: absolute;
|
||||
right: $mobile-treeRight;
|
||||
font-size: 1.8em;
|
||||
font-size: 1.1em;
|
||||
right: 0px;
|
||||
width: 35px;
|
||||
width: $mobileTreeRightArrowW;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
// Designates the starting left margin
|
||||
// (indentation) of 'My Items'
|
||||
// Also adds right space for selection button
|
||||
left: $mobile-startingTreeLeft;
|
||||
right: 45px;
|
||||
font-size: 1.2em;
|
||||
// Allows tree item name to stop prior
|
||||
// to the arrow
|
||||
.title-label {
|
||||
right: $mobile-treeRight * 1.3;
|
||||
left: 0;
|
||||
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
|
||||
line-height: $mobileTreeItemH;
|
||||
//font-size: 1.1em; // CH CO
|
||||
.type-icon {
|
||||
@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
|
||||
}
|
||||
}
|
||||
.title-label {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the margin on the left, which causes the
|
||||
// running indentation after each folder is made
|
||||
ul.tree {
|
||||
margin-left: $mobile-runningTreeLeft;
|
||||
margin-left: $mobileTreeItemIndent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,15 +20,24 @@
|
||||
* 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 phoneandtablet {
|
||||
font-size: 21px;
|
||||
padding-top: $imageThumbPad;
|
||||
// Override the Create menu for mobile
|
||||
@include phoneandtablet {
|
||||
.menu-element {
|
||||
.super-menu {
|
||||
$d: 250px;
|
||||
width: $d;
|
||||
height: $d;
|
||||
|
||||
.pane {
|
||||
&.left {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,51 @@
|
||||
.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;
|
||||
.clk-icon.close {
|
||||
top: $mobileOverlayMargin; right: $mobileOverlayMargin;
|
||||
}
|
||||
|
||||
> .holder {
|
||||
@include border-radius($m);
|
||||
top: $m;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
> .contents {
|
||||
top: $mobileOverlayMargin;
|
||||
right: $mobileOverlayMargin;
|
||||
bottom: $mobileOverlayMargin;
|
||||
left: $mobileOverlayMargin;
|
||||
|
||||
.top-bar {
|
||||
> .title {
|
||||
margin-right: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user