mirror of
https://github.com/nasa/openmct.git
synced 2025-06-12 20:28:14 +00:00
Mobile styles, VERY WIP
WARNING: DON'T PULL!! - Mobile in progress;
This commit is contained in:
charlesh88
@ -26,6 +26,7 @@
|
||||
$mobileListIconSize: 30px;
|
||||
$mobileTitleDescH: 35px;
|
||||
$mobileOverlayMargin: 20px;
|
||||
$mobileMenuIconD: 34px;
|
||||
$phoneItemH: floor($ueBrowseGridItemLg/4);
|
||||
$tabletItemH: floor($ueBrowseGridItemLg/3);
|
||||
|
||||
|
||||
@ -1,24 +1,20 @@
|
||||
<template>
|
||||
<div class="l-pane"
|
||||
:class="{
|
||||
'l-pane--horizontal': type === 'horizontal',
|
||||
'l-pane--vertical': type === 'vertical',
|
||||
'l-pane--collapsed': collapsed,
|
||||
'l-pane--resize-handle-before' : handle === 'before',
|
||||
'l-pane--resize-handle-after' : handle === 'after'
|
||||
'l-pane--horizontal-handle-before': type === 'horizontal' && handle === 'before',
|
||||
'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
|
||||
'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
|
||||
'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
|
||||
'l-pane--collapsed': collapsed
|
||||
}">
|
||||
<!-- TODO: move resize-handle styling from handle into pane, so that padding can be handled -->
|
||||
<div v-if="handle"
|
||||
class="l-pane__resize-handle"
|
||||
:class="{
|
||||
'l-pane__resize-handle--before': handle === 'before',
|
||||
'l-pane__resize-handle--after': handle === 'after'
|
||||
}"
|
||||
class="l-pane__handle"
|
||||
@mousedown="start">
|
||||
<a class="l-pane__collapse-button"
|
||||
@click="toggleCollapse"
|
||||
v-if="collapsable"></a>
|
||||
</div>
|
||||
<a class="l-pane__collapse-button"
|
||||
@click="toggleCollapse"
|
||||
v-if="collapsable"></a>
|
||||
<div class="l-pane__contents">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@ -29,18 +25,120 @@
|
||||
@import "~styles/sass-base";
|
||||
|
||||
$hitMargin: 4px;
|
||||
/**************************** BASE - MOBILE AND DESKTOP */
|
||||
.l-pane {
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
|
||||
&__handle {
|
||||
// __handle doesn't appear in mobile
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__collapse-button {
|
||||
@include test();
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0; right: 0; // Default
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&[class*="--horizontal"] {
|
||||
> .l-pane__collapse-button {
|
||||
|
||||
}
|
||||
|
||||
&.l-pane--collapsed {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
width: 0px;
|
||||
min-width: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--vertical"] {
|
||||
> .l-pane__collapse-button {
|
||||
|
||||
}
|
||||
|
||||
&.l-pane--collapsed {
|
||||
padding-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
height: 0px;
|
||||
min-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/************************ MOBILE-FIRST STYLES */
|
||||
@include test(green, 0.1);
|
||||
|
||||
|
||||
/************************ DESKTOP STYLES */
|
||||
body.desktop & {
|
||||
@include test(blue, 0.1);
|
||||
|
||||
&__handle {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&--horizontal {
|
||||
&--before {
|
||||
> .l-pane__handle {
|
||||
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--after {
|
||||
> .l-pane__handle {
|
||||
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// TODO: get handles visible when pane is collapsed
|
||||
|
||||
|
||||
/**************************** BASE STYLES */
|
||||
.l-pane {
|
||||
/************************ PANES */
|
||||
&--horizontal {
|
||||
// Pane adjusts size horizontally, handles run vertically
|
||||
// Selectors here
|
||||
|
||||
> .l-pane__resize-handle {
|
||||
> .l-pane__handle {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
@ -112,7 +210,7 @@
|
||||
}
|
||||
|
||||
&.l-pane--collapsed {
|
||||
> .l-pane__resize-handle {
|
||||
> .l-pane__handle {
|
||||
&--before {
|
||||
transform: translateX($splitterHandleD * -1) scaleX(-1);
|
||||
}
|
||||
@ -127,19 +225,19 @@
|
||||
|
||||
|
||||
|
||||
&.l-pane--collapsed {
|
||||
/* &.l-pane--collapsed {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
width: 0px;
|
||||
min-width: 0px;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
// Pane adjusts size vertically, handles run horizontally
|
||||
// Selectors here
|
||||
|
||||
> .l-pane__resize-handle {
|
||||
> .l-pane__handle {
|
||||
//background: green;
|
||||
cursor: row-resize;
|
||||
height: $splitterHandleD;
|
||||
@ -187,11 +285,11 @@
|
||||
}
|
||||
|
||||
/************************ HANDLES */
|
||||
&__resize-handle {
|
||||
&__handle {
|
||||
// Selectors for handle in any context
|
||||
z-index: 1;
|
||||
/* z-index: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
position: absolute;*/
|
||||
|
||||
|
||||
body.desktop & {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<multipane class="l-shell__main"
|
||||
type="horizontal">
|
||||
<pane class="l-pane l-shell__pane-tree"
|
||||
<pane class="l-shell__pane-tree"
|
||||
handle="after"
|
||||
collapsable>
|
||||
<div class="l-shell__search">
|
||||
@ -16,10 +16,10 @@
|
||||
<mct-tree :nodes="treeRoots"></mct-tree>
|
||||
</div>
|
||||
</pane>
|
||||
<pane class="l-pane l-shell__pane-main">
|
||||
<pane class="l-shell__pane-main">
|
||||
<div class="l-shell__main-container" ref="mainContainer"></div>
|
||||
</pane>
|
||||
<pane class="l-pane l-shell__pane-inspector"
|
||||
<pane class="l-shell__pane-inspector"
|
||||
handle="before"
|
||||
collapsable>
|
||||
<MctInspector ref="inspector"></MctInspector>
|
||||
@ -36,21 +36,15 @@
|
||||
|
||||
/******************************* SHELL */
|
||||
.l-shell {
|
||||
$m: $interiorMargin;
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
/********** HEAD AND STATUS */
|
||||
&__head,
|
||||
&__status {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
/*************************** MOBILE-FIRST */
|
||||
&__head {
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
height: 40px;
|
||||
padding: $interiorMarginLg;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__status {
|
||||
@ -61,6 +55,58 @@
|
||||
padding: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__pane-tree {
|
||||
width: 30%;
|
||||
|
||||
[class*="collapse-button"] {
|
||||
// For mobile, collapse button becomes menu icon
|
||||
height: $mobileMenuIconD;
|
||||
width: $mobileMenuIconD;
|
||||
transform: translateX(100%);
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-menu-hamburger;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__pane-main {
|
||||
transform: translateX(0);
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
@include phonePortrait() {
|
||||
border: 1px solid red;
|
||||
|
||||
&__pane-tree {
|
||||
// @include test(orange);
|
||||
width: calc(100% - #{$mobileMenuIconD});
|
||||
[class*="collapse-button"] {
|
||||
// transform: translateX(0);
|
||||
}
|
||||
|
||||
+ .l-pane {
|
||||
// Hide the next pane over when this pane is expanded
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] + .l-pane {
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__pane-main {
|
||||
//transform: translateX(calc(100% - #{$mobileMenuIconD}));
|
||||
/*width: 100%;*/
|
||||
}
|
||||
|
||||
> .l-pane__contents {
|
||||
}
|
||||
}
|
||||
|
||||
/********** MAIN AREA */
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
@ -78,6 +124,7 @@
|
||||
}
|
||||
|
||||
&__tree {
|
||||
// Tree component within __pane-tree
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
@ -105,34 +152,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__pane-tree,
|
||||
&__pane-inspector {
|
||||
max-width: 30%;
|
||||
min-width: 5%;
|
||||
}
|
||||
|
||||
&__pane-tree {
|
||||
$m: $interiorMargin;
|
||||
background: $colorTreeBg;
|
||||
padding: $m $m + ($splitterD) $m $m; // TODO: move this into pane.vue
|
||||
width: 300px;
|
||||
|
||||
body.mobile & {
|
||||
[class*="collapse-button"] {
|
||||
// For mobile, collapse button becomes menu icon
|
||||
$d: 32px;
|
||||
height: $d;
|
||||
width: $d;
|
||||
transform: translateX(100%);
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-menu-hamburger;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
padding: $m;
|
||||
}
|
||||
|
||||
&__pane-main {
|
||||
@ -145,6 +167,30 @@
|
||||
}
|
||||
|
||||
body.desktop & {
|
||||
/********** HEAD AND STATUS */
|
||||
&__head,
|
||||
&__status {
|
||||
display: block;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
&__head {
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
height: 40px;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&__pane-tree,
|
||||
&__pane-inspector {
|
||||
max-width: 30%;
|
||||
min-width: 5%;
|
||||
}
|
||||
|
||||
&__pane-tree {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
|
||||
&__pane-inspector {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user