* Fix #3981
- Mods to markup and CSS for better approach to overflowing and min-heights;
- WIP!

* Fix #3981
- Refinements to min-height approach;
- CSS cleanups;

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
This commit is contained in:
Charles Hacskaylo 2021-10-07 12:50:54 -07:00 committed by GitHub
parent 38db8f7fe5
commit 1b13965200
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 17 deletions

View File

@ -52,6 +52,7 @@
> >
</button> </button>
</div> </div>
<div class="l-view-section">
<stacked-plot-item v-for="object in compositionObjects" <stacked-plot-item v-for="object in compositionObjects"
:key="object.id" :key="object.id"
class="c-plot--stacked-container" class="c-plot--stacked-container"
@ -64,6 +65,7 @@
@loadingUpdated="loadingUpdated" @loadingUpdated="loadingUpdated"
/> />
</div> </div>
</div>
</template> </template>
<script> <script>

View File

@ -46,9 +46,6 @@ mct-plot {
.c-plot, .c-plot,
.gl-plot { .gl-plot {
overflow: hidden;
min-height: 100px;
.s-status-taking-snapshot & { .s-status-taking-snapshot & {
.c-control-bar { .c-control-bar {
display: none; display: none;
@ -67,16 +64,17 @@ mct-plot {
.c-plot { .c-plot {
@include abs($mainViewPad); @include abs($mainViewPad);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
min-height: $plotMinH;
.c-control-bar { .c-control-bar {
flex: 0 0 auto; flex: 0 0 auto;
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
} }
.l-view-section, .c-plot--stacked-container { .l-view-section {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column; flex-direction: column;
@ -84,7 +82,18 @@ mct-plot {
overflow-x: hidden; overflow-x: hidden;
} }
.c-plot--stacked-container {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: $plotMinH;
overflow: hidden;
}
;
&--stacked { &--stacked {
min-height: auto !important;
.child-frame { .child-frame {
.has-control-bar { .has-control-bar {
.c-control-bar { .c-control-bar {
@ -124,7 +133,7 @@ mct-plot {
.plot-wrapper-axis-and-display-area { .plot-wrapper-axis-and-display-area {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
min-height: $plotMinH; //min-height: $plotMinH;
} }
.gl-plot-wrapper-display-area-and-x-axis { .gl-plot-wrapper-display-area-and-x-axis {
@ -465,6 +474,7 @@ mct-plot {
.gl-plot-legend, .gl-plot-legend,
.c-plot-legend { .c-plot-legend {
overflow: hidden; overflow: hidden;
flex: 0 0 auto; // Prevents clipping for all legend placements (top, bottom, etc.)
&__wrapper { &__wrapper {
// Holds view-control and both collapsed and expanded legends // Holds view-control and both collapsed and expanded legends