ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-27 14:49:28 +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>
<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-time">Time</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>
<form ref="fixedDeltaInput">
<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"></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-label pr-time-label-start-time">Start</div>
<div class="pr-time-label pr-time-label-end-time">End</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
ref="startTime"
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--time pr-time-input-end-date">
<div class="pr-time-input pr-time-input-end">
<input
ref="endTime"
v-model="formattedBounds.end"

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

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