mirror of
https://github.com/nasa/openmct.git
synced 2024-12-24 15:26:39 +00:00
* Fairly extensive refactoring to fix layout in Safari for VERVE #266 - VERY WIP at this time! - Many instances of `height: 100%` converted or amended to include `flex: 1 1 auto`; - Some high-use containers like `c-so-view__object-view` converted to use flex layout; - Views fixed generally for sub-object view, and specifically for Conditionals, Folder grid view and Imagery; - Imagery background image holder converted to use absolute positioning; - TODO: Notebook has a problem where the side nav pane isn't overlaying in Safari - it's a JS thing, c-drawer--push isn't be replaced with c-drawer--overlays as it should; * CSS and markup refactoring to support addition of 'suspect' telemetry - Remove commented code;
This commit is contained in:
parent
ba982671b2
commit
77b720d00d
@ -50,6 +50,7 @@
|
|||||||
.c-cs {
|
.c-cs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
flex: 1 1 auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
@ -11,6 +11,8 @@
|
|||||||
|
|
||||||
body.desktop & {
|
body.desktop & {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
|
align-content: flex-start;
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
height: $gridItemDesk;
|
height: $gridItemDesk;
|
||||||
width: $gridItemDesk;
|
width: $gridItemDesk;
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
.c-imagery {
|
.c-imagery {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
flex: 1 1 auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -19,14 +19,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__main-image {
|
&__main-image {
|
||||||
&__bg,
|
|
||||||
&__image {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__bg {
|
&__bg {
|
||||||
background-color: $colorPlotBg;
|
background-color: $colorPlotBg;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
|
||||||
&.unnsynced{
|
&.unnsynced{
|
||||||
@include sUnsynced();
|
@include sUnsynced();
|
||||||
@ -34,6 +30,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__image {
|
&__image {
|
||||||
|
@include abs(); // Safari fix
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
@ -25,6 +25,7 @@
|
|||||||
$headerFontSize: 1.3em;
|
$headerFontSize: 1.3em;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
flex: 1 1 auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
@ -71,8 +71,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__object-view {
|
&__object-view {
|
||||||
|
display: flex;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
height: 0; // Chrome 73 overflow bug fix
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
.u-fills-container {
|
.u-fills-container {
|
||||||
@ -84,6 +84,6 @@
|
|||||||
|
|
||||||
.l-angular-ov-wrapper {
|
.l-angular-ov-wrapper {
|
||||||
// This element is the recipient for object styling; cannot be display: contents
|
// This element is the recipient for object styling; cannot be display: contents
|
||||||
height: 100%;
|
flex: 1 1 auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
@ -228,8 +228,9 @@
|
|||||||
/******************************* MAIN AREA */
|
/******************************* MAIN AREA */
|
||||||
&__main-container {
|
&__main-container {
|
||||||
// Wrapper for main views
|
// Wrapper for main views
|
||||||
|
display: flex;
|
||||||
flex: 1 1 auto !important;
|
flex: 1 1 auto !important;
|
||||||
height: 0; // Chrome 73 overflow bug fix
|
height: 100%; // Chrome 73 overflow bug fix
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -338,7 +339,6 @@
|
|||||||
|
|
||||||
&__start {
|
&__start {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
//margin-right: $interiorMargin;
|
|
||||||
min-width: 0; // Forces interior to compress when pushed on
|
min-width: 0; // Forces interior to compress when pushed on
|
||||||
|
|
||||||
[class*='button'] {
|
[class*='button'] {
|
||||||
@ -357,11 +357,6 @@
|
|||||||
|
|
||||||
&__nav-to-parent-button {
|
&__nav-to-parent-button {
|
||||||
// This is an icon-button
|
// This is an icon-button
|
||||||
//$p: $interiorMargin;
|
|
||||||
//margin-right: $interiorMargin;
|
|
||||||
//padding-left: $p;
|
|
||||||
//padding-right: $p;
|
|
||||||
|
|
||||||
.is-editing & {
|
.is-editing & {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user