ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-28 23:24:26 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix css for bounds single inputs

Browse Source
This commit is contained in:
David Tsay 2024-07-12 15:46:07 -07:00
parent 9065158ac9
commit e2092a7b17
4 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/plugins/timeConductor/DateTimePopupFixed.vue
View File

@ -22,7 +22,7 @@
<template> <template>
<form ref="fixedDeltaInput"> <form ref="fixedDeltaInput">
<div class="c-tc-input-popup__input-grid"> <div class="c-tc-input-popup__input-grid-utc">
<div class="pr-time-label pr-time-label-start-date"><em>Start</em> Date</div> <div class="pr-time-label pr-time-label-start-date"><em>Start</em> Date</div>
<div class="pr-time-label pr-time-label-start-time">Time</div> <div class="pr-time-label pr-time-label-start-time">Time</div>
<div class="pr-time-label pr-time-label-end-date"><em>End</em> Date</div> <div class="pr-time-label pr-time-label-end-date"><em>End</em> Date</div>

10
src/plugins/timeConductor/TimePopupFixed.vue
View File

@ -23,12 +23,10 @@
<template> <template>
<form ref="fixedDeltaInput"> <form ref="fixedDeltaInput">
<div class="c-tc-input-popup__input-grid"> <div class="c-tc-input-popup__input-grid">
<div class="pr-time-label pr-time-label-start-date">Start</div> <div class="pr-time-label pr-time-label-start-time">Start</div>
<div class="pr-time-label pr-time-label-start-time"></div> <div class="pr-time-label pr-time-label-end-time">End</div>
<div class="pr-time-label pr-time-label-end-date">End</div>
<div class="pr-time-label pr-time-label-end-time"></div>
<div class="pr-time-input pr-time-input--time pr-time-input-start-date"> <div class="pr-time-input pr-time-input-start">
<input <input
ref="startTime" ref="startTime"
v-model="formattedBounds.start" v-model="formattedBounds.start"
@ -43,7 +41,7 @@
<div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div> <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
<div class="pr-time-input pr-time-input--time pr-time-input-end-date"> <div class="pr-time-input pr-time-input-end">
<input <input
ref="endTime" ref="endTime"
v-model="formattedBounds.end" v-model="formattedBounds.end"

2
src/plugins/timeConductor/TimePopupRealtime.vue
View File

@ -22,7 +22,7 @@
<template> <template>
<form ref="deltaInput"> <form ref="deltaInput">
<div class="c-tc-input-popup__input-grid"> <div class="c-tc-input-popup__input-grid-utc">
<div class="pr-time-label icon-minus pr-time-label-minus-hrs">Hrs</div> <div class="pr-time-label icon-minus pr-time-label-minus-hrs">Hrs</div>
<div class="pr-time-label pr-time-label-minus-mins">Mins</div> <div class="pr-time-label pr-time-label-minus-mins">Mins</div>
<div class="pr-time-label pr-time-label-minus-secs">Secs</div> <div class="pr-time-label pr-time-label-minus-secs">Secs</div>

35
src/plugins/timeConductor/conductor.scss
View File

@ -629,7 +629,6 @@
} }
&-label-end-time{ &-label-end-time{
grid-area: eTime; grid-area: eTime;
} }
&-input-end-date{ &-input-end-date{
grid-area: eDateInput; grid-area: eDateInput;
@ -641,6 +640,14 @@
grid-area: blank; grid-area: blank;
} }
// FIXED TIME MODE non utc
&-input-start{
grid-area: sInput;
}
&-input-end{
grid-area: eInput;
}
//REAL TIME MODE //REAL TIME MODE
&-label-minus-hrs{ &-label-minus-hrs{
grid-area: labelMinusHrs; grid-area: labelMinusHrs;
@ -691,14 +698,20 @@
} }
&--fixed-mode { &--fixed-mode {
.c-tc-input-popup__input-grid { .c-tc-input-popup__input-grid-utc {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
grid-template-areas: grid-template-areas:
"sDate sTime . eDate eTime ." "sDate sTime . eDate eTime ."
"sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons"; "sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons";
} }
.c-tc-input-popup__input-grid {
grid-template-columns: 1fr 1fr 1fr 2fr;
grid-template-areas:
"sTime . eTime ."
"sInput arrowIcon eInput buttons";
}
@include phonePortrait(){ @include phonePortrait(){
.c-tc-input-popup__input-grid { .c-tc-input-popup__input-grid-utc {
grid-template-columns: repeat(2, max-content) 1fr; grid-template-columns: repeat(2, max-content) 1fr;
grid-template-areas: grid-template-areas:
"sDate sTime ." "sDate sTime ."
@ -708,19 +721,29 @@
padding: 2px; padding: 2px;
overflow: hidden; overflow: hidden;
} }
.c-tc-input-popup__input-grid {
grid-template-columns: repeat(2, max-content) 1fr;
grid-template-areas:
"sTime ."
"sInput ."
"eTime ."
"eInput buttons";
padding: 2px;
overflow: hidden;
}
} }
} }
&--realtime-mode { &--realtime-mode {
.c-tc-input-popup__input-grid { .c-tc-input-popup__input-grid, .c-tc-input-popup__input-grid-utc {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
grid-template-areas: grid-template-areas:
"labelMinusHrs labelMinusMins labelMinusSecs . labelPlusHrs labelPlusMins labelPlusSecs ." "labelMinusHrs labelMinusMins labelMinusSecs . labelPlusHrs labelPlusMins labelPlusSecs ."
"inputMinusHrs inputMinusMins inputMinusSecs arrowIcon inputPlusHrs inputPlusMins inputPlusSecs buttons"; "inputMinusHrs inputMinusMins inputMinusSecs arrowIcon inputPlusHrs inputPlusMins inputPlusSecs buttons";
} }
@include phonePortrait(){ @include phonePortrait(){
.c-tc-input-popup__input-grid { .c-tc-input-popup__input-grid, .c-tc-input-popup__input-grid-utc {
grid-template-columns: repeat(3, max-content) 1fr; grid-template-columns: repeat(3, max-content) 1fr;
grid-template-areas: grid-template-areas:
"labelMinusHrs labelMinusMins labelMinusSecs ." "labelMinusHrs labelMinusMins labelMinusSecs ."
@ -733,7 +756,7 @@
} }
} }
&__input-grid { &__input-grid, &__input-grid-utc {
display: grid; display: grid;
grid-row-gap: $interiorMargin; grid-row-gap: $interiorMargin;
grid-column-gap: $interiorMarginSm; grid-column-gap: $interiorMarginSm;