Merge Staging into Prod

web-client/src/presenter/computeds/docketRecordHelper.js

@@ -11,8 +11,8 @@ export const docketRecordHelper = get => {
 
   const sortOrder = docketRecordSort[docketNumber];
   const sortLabelsMobile = {
-    byDate: 'Oldest to newest',
-    byDateDesc: 'Newest to oldest',
+    byDate: 'Oldest to Newest',
+    byDateDesc: 'Newest to Oldest',
   };
 
   const sortLabelTextMobile = sortLabelsMobile[sortOrder];

web-client/src/presenter/computeds/docketRecordHelper.test.js

@@ -86,8 +86,8 @@ describe('docketRecordHelper', () => {
 
   describe('sortLabelTextMobile', () => {
     const sortLabelsMobile = {
-      byDate: 'Oldest to newest',
-      byDateDesc: 'Newest to oldest',
+      byDate: 'Oldest to Newest',
+      byDateDesc: 'Newest to Oldest',
     };
 
     Object.entries(sortLabelsMobile).forEach(([sortType, sortLabel]) => {

web-client/src/styles/buttons.scss

@@ -37,7 +37,6 @@
   }
 
   &.mobile-sort-docket-button.usa-button--unstyled {
-    padding-left: 16px;
     color: color($theme-color-base-darkest);
     text-decoration: none;
 

web-client/src/styles/custom.scss

@@ -1039,6 +1039,11 @@ header.usa-header {
   border-bottom: 1px solid color($theme-color-base-lighter);
   margin-bottom: 20px;
 
+  /* little screens */
+  @media only screen and (max-width: $medium-screen) {
+    margin-bottom: 10px;
+  }
+
   h1 {
     position: relative;
     top: 2px;
@@ -1798,6 +1803,13 @@ button.change-scanner-button {
   font-size: 20px;
 }
 
+#docket-record-filter-label {
+  /* little screens */
+  @media only screen and (max-width: $medium-screen) {
+    line-height: 1.6em;
+  }
+}
+
 .narrow-hr {
   width: 30%;
   margin: 10px auto;
@@ -2049,3 +2061,13 @@ button.change-scanner-button {
 .align-items-baseline {
   align-items: baseline;
 }
+
+.padding-y-075-rem {
+  padding: 0.75rem 0;
+}
+
+.docket-record-header {
+  .docket-record-filter {
+    max-width: 175px;
+  }
+}

web-client/src/views/DocketRecord/DocketRecordHeader.jsx

@@ -1,6 +1,7 @@
 import { BindedSelect } from '../../ustc-ui/BindedSelect/BindedSelect';
 import { Button } from '../../ustc-ui/Button/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Mobile, NonMobile } from '../../ustc-ui/Responsive/Responsive';
 import { OpenPrintableDocketRecordModal } from './OpenPrintableDocketRecordModal';
 import { connect } from '@cerebral/react';
 import { sequences, state } from 'cerebral';
@@ -31,93 +32,95 @@ export const DocketRecordHeader = connect(
     return (
       <React.Fragment>
         <div className="grid-container padding-0 docket-record-header">
-          <div className="grid-row grid-gap hide-on-mobile margin-bottom-3">
-            <div className="tablet:grid-col-3">
-              <select
-                aria-label="docket record"
-                className="usa-select margin-top-0 sort"
-                name={`docketRecordSort.${formattedCaseDetail.docketNumber}`}
-                value={
-                  sessionMetadata.docketRecordSort[
-                    formattedCaseDetail.docketNumber
-                  ]
-                }
-                onChange={e => {
-                  updateSessionMetadataSequence({
-                    key: e.target.name,
-                    value: e.target.value,
-                  });
-                }}
-              >
-                {[
-                  {
-                    label: 'oldest',
-                    value: 'byDate',
-                  },
-                  {
-                    label: 'newest',
-                    value: 'byDateDesc',
-                  },
-                  {
-                    label: 'no. (ascending)',
-                    value: 'byIndex',
-                  },
-                  {
-                    label: 'no. (descending)',
-                    value: 'byIndexDesc',
-                  },
-                ].map(item => (
-                  <option key={item.value} value={item.value}>
-                    Sort by {item.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="tablet:grid-col-4">
-              <label
-                className="dropdown-label-serif margin-right-3"
-                htmlFor="inline-select"
-                id="docket-record-filter-label"
-              >
-                Filter by
-              </label>
-              <BindedSelect
-                aria-describedby="docket-record-filter-label"
-                aria-label="docket record filter"
-                bind="sessionMetadata.docketRecordFilter"
-                className="select-left inline-select"
-                name="docketRecordFilter"
-              >
-                {Object.entries(DOCKET_RECORD_FILTER_OPTIONS).map(
-                  ([key, value]) => (
-                    <option key={`filter-${key}`} value={value}>
-                      {value}
-                    </option>
-                  ),
-                )}
-              </BindedSelect>
-            </div>
-
-            {docketRecordHelper.showPrintableDocketRecord && (
-              <div className="tablet:grid-col-5 text-right">
-                <Button
-                  link
-                  aria-label="printable docket record"
-                  className="margin-right-0"
-                  icon="print"
-                  id="printable-docket-record-button"
-                  onClick={() => {
-                    gotoPrintableDocketRecordSequence({
-                      docketNumber: formattedCaseDetail.docketNumber,
+          <NonMobile>
+            <div className="grid-row grid-gap hide-on-mobile margin-bottom-3">
+              <div className="tablet:grid-col-3">
+                <select
+                  aria-label="docket record"
+                  className="usa-select margin-top-0 sort"
+                  name={`docketRecordSort.${formattedCaseDetail.docketNumber}`}
+                  value={
+                    sessionMetadata.docketRecordSort[
+                      formattedCaseDetail.docketNumber
+                    ]
+                  }
+                  onChange={e => {
+                    updateSessionMetadataSequence({
+                      key: e.target.name,
+                      value: e.target.value,
                     });
                   }}
                 >
-                  Printable Docket Record
-                </Button>
+                  {[
+                    {
+                      label: 'oldest',
+                      value: 'byDate',
+                    },
+                    {
+                      label: 'newest',
+                      value: 'byDateDesc',
+                    },
+                    {
+                      label: 'no. (ascending)',
+                      value: 'byIndex',
+                    },
+                    {
+                      label: 'no. (descending)',
+                      value: 'byIndexDesc',
+                    },
+                  ].map(item => (
+                    <option key={item.value} value={item.value}>
+                      Sort by {item.label}
+                    </option>
+                  ))}
+                </select>
               </div>
-            )}
-          </div>
-          <div className="only-small-screens">
+              <div className="tablet:grid-col-fill">
+                <label
+                  className="dropdown-label-serif margin-right-3"
+                  htmlFor="inline-select"
+                  id="docket-record-filter-label"
+                >
+                  Filter by
+                </label>
+                <BindedSelect
+                  aria-describedby="docket-record-filter-label"
+                  aria-label="docket record filter"
+                  bind="sessionMetadata.docketRecordFilter"
+                  className="select-left inline-select docket-record-filter"
+                  name="docketRecordFilter"
+                >
+                  {Object.entries(DOCKET_RECORD_FILTER_OPTIONS).map(
+                    ([key, value]) => (
+                      <option key={`filter-${key}`} value={value}>
+                        {value}
+                      </option>
+                    ),
+                  )}
+                </BindedSelect>
+              </div>
+
+              {docketRecordHelper.showPrintableDocketRecord && (
+                <div className="tablet:grid-col-4 text-right">
+                  <Button
+                    link
+                    aria-label="printable docket record"
+                    icon="print"
+                    id="printable-docket-record-button"
+                    onClick={() => {
+                      gotoPrintableDocketRecordSequence({
+                        docketNumber: formattedCaseDetail.docketNumber,
+                      });
+                    }}
+                  >
+                    Printable Docket Record
+                  </Button>
+                </div>
+              )}
+            </div>
+          </NonMobile>
+
+          <Mobile>
             <Button
               link
               aria-hidden="true"
@@ -131,6 +134,7 @@ export const DocketRecordHeader = connect(
             >
               Printable Docket Record
             </Button>
+
             <Button
               link
               aria-label="docket record sort"
@@ -142,7 +146,36 @@ export const DocketRecordHeader = connect(
               {docketRecordHelper.sortLabelTextMobile}
               <FontAwesomeIcon icon="sort" size="sm" />
             </Button>
-          </div>
+
+            <div className="grid-row padding-y-075-rem">
+              <div className="grid-col-auto">
+                <label
+                  className="dropdown-label-serif margin-right-2"
+                  htmlFor="docket-record-filter"
+                  id="docket-record-filter-label"
+                >
+                  Filter by
+                </label>
+              </div>
+              <div className="grid-col-fill">
+                <BindedSelect
+                  aria-describedby="docket-record-filter-label"
+                  aria-label="docket record filter"
+                  bind="sessionMetadata.docketRecordFilter"
+                  id="docket-record-filter"
+                  name="docketRecordFilter"
+                >
+                  {Object.entries(DOCKET_RECORD_FILTER_OPTIONS).map(
+                    ([key, value]) => (
+                      <option key={`filter-${key}`} value={value}>
+                        {value}
+                      </option>
+                    ),
+                  )}
+                </BindedSelect>
+              </div>
+            </div>
+          </Mobile>
         </div>
         {showModal === 'OpenPrintableDocketRecordModal' && (
           <OpenPrintableDocketRecordModal />