[CUMULUS-2238] Fix datepicker CSS across browsers (#879)

* CUMULUS-2238 add Firefox workarounds for date picker CSS * CUMULUS-2238 update timepicker width * CUMULUS-2238 update changelog * CUMULUS-2238 add wrapper around datetime picker to maintain constant width
nasa · Nov 13, 2020 · ba812ea · ba812ea
1 parent c1ad3d3
commit ba812ea
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - **CUMULUS-2249**
   - clear infix search parameter when Search component is unmounted
 
+- **CUMULUS-2238**
+  - Fix "Date and Time Range" CSS on Chrome and Firefox. Dropdowns now display icons correctly and elements don't shift when selected.
+
 - **CUMULUS-2147**
   - clear execution errors from granules list when async commands are completed
 

diff --git a/app/src/css/vendor/datetimepicker/_dtpoverrides.scss b/app/src/css/vendor/datetimepicker/_dtpoverrides.scss
@@ -35,6 +35,27 @@ styling overrides
   color: $white;
 }
 
+.react-datetime-picker__inputGroup {
+  width: 200px !important;
+  font-family: $code-font-family;
+
+  // Firefox hack -- Mozilla does not render the <select> carrot correctly.
+  // this replaces the icon only in Firefox.
+  @-moz-document url-prefix() {
+    &:before {
+      content: '\f107';
+      font-family: 'FontAwesome';
+      color: $black;
+      display: inline-block;
+      position: relative;
+      left: 13.25em;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+}
+
 .react-datetime-picker__inputGroup__input {
   box-shadow: none;
 }
@@ -43,6 +64,18 @@ styling overrides
   background: rgba($color: #2685c1, $alpha: 0.1) !important;
 }
 
+.react-datetime-picker__inputGroup__amPm {
+  appearance: menulist;
+  -moz-appearance: none !important;
+  width: 40px;
+
+  // Firefox hack -- We need to ensure the <select> dropdown
+  // is large enough to contain the replacement carrot above.
+  @-moz-document url-prefix() {
+    width: 55px;
+  }
+}
+
 .react-datetime-picker__calendar .react-calendar__tile--active {
   background: $ocean-blue !important;
   color: $white !important;
@@ -87,7 +120,7 @@ styling overrides
    padding-left: 1px;
 }*/
 
-/*.react-datetime-picker__inputGroup__input.react-datetime-picker__inputGroup__month, 
+/*.react-datetime-picker__inputGroup__input.react-datetime-picker__inputGroup__month,
 .react-datetime-picker__inputGroup__input.react-datetime-picker__inputGroup__day {
   width: 26px !important;
 }*/
diff --git a/app/src/js/components/DatePickerHeader/DatePickerHeader.js b/app/src/js/components/DatePickerHeader/DatePickerHeader.js
@@ -13,7 +13,9 @@ const DatePickerHeader = ({ heading, onChange, showDatePicker = true }) => (
             </div>
           </li>
           <li>
-            <Datepicker hideWrapper={true} onChange={onChange} />
+            <div className='datetimeheader__datetime_range_wrapper'>
+              <Datepicker hideWrapper={true} onChange={onChange} />
+            </div>
           </li>
         </ul>
       </div>

diff --git a/app/src/js/components/DatePickerHeader/DatePickerHeader.scss b/app/src/js/components/DatePickerHeader/DatePickerHeader.scss
@@ -3,9 +3,14 @@
   align-items: center;
   justify-content: space-between;
   position: relative;
+
   &__content{
     margin-right: 0px;
   }
+
+  &__datetime_range_wrapper{
+    width: 850px;
+  }
 }
 
 .content__header .datetime__range {

diff --git a/app/src/js/components/Datepicker/Datepicker.scss b/app/src/js/components/Datepicker/Datepicker.scss
@@ -50,10 +50,12 @@
     align-items: center;
     justify-items: center;
     flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 1em 0;
   }
   &__internal > li{
     justify-content: space-evenly;
-    margin-right: 2em;
   }
 
   &__internal label{
@@ -78,12 +80,11 @@
     top: 73px;
     display: flex;
     justify-content: center;
-    width: 1040px;
   }
 
   &__clear{
     position: relative;
-    margin: .7em 0em 0em 5.1em !important;
+    margin: .7em 0em 0em 0em !important;
     float: right;
     &:after {
       position: absolute;
@@ -108,4 +109,8 @@
       left: .7em;
     }
   }
+
+  &__range_wrapper{
+    width: 1040px;
+  }
 }
diff --git a/app/src/js/components/home.js b/app/src/js/components/home.js
@@ -166,7 +166,9 @@ class Home extends React.Component {
                   Select date and time to refine your results. <em>Time is UTC.</em>
                 </h2>
               </div>
-              <DatepickerRange onChange={this.query}/>
+              <div className='datetime__range_wrapper'>
+                <DatepickerRange onChange={this.query}/>
+              </div>
             </div>
           </section>