Merge pull request #937 from opentripplanner/remove-native-select

feat: replace native pattern select with dropdown

i18n/es.yml

@@ -30,8 +30,7 @@ actions:
       No se puede guardar el plan: este plan no se pudo guardar debido a la
       falta de capacidad en uno o más vehículos. Por favor, vuelva a planificar
       su viaje.
-    maxTripRequestsExceeded: Número de solicitudes de viaje superadas sin resultados
-      válidos
+    maxTripRequestsExceeded: Número de solicitudes de viaje superadas sin resultados válidos
     saveItinerariesError: "No se pudieron guardar los itinerarios: {err}"
     setDateError: "Error al establecer la fecha:"
     setGroupSizeError: "No se pudo establecer el tamaño del grupo:"
@@ -47,11 +46,9 @@ actions:
     authTokenError: Error al obtener un token de autorización.
     confirmDeleteMonitoredTrip: ¿Desea eliminar este viaje?
     confirmDeletePlace: ¿Quiere eliminar este lugar?
-    emailVerificationResent: El mensaje de verificación de correo electrónico ha sido
-      reenviado.
+    emailVerificationResent: El mensaje de verificación de correo electrónico ha sido reenviado.
     genericError: "Se ha encontrado un error: {err}"
-    itineraryExistenceCheckFailed: Comprobación de errores para ver si el viaje seleccionado
-      es posible.
+    itineraryExistenceCheckFailed: Comprobación de errores para ver si el viaje seleccionado es posible.
     preferencesSaved: Sus preferencias se han guardado.
     smsInvalidCode: El código introducido no es válido. Por favor, inténtelo de nuevo.
     smsResendThrottled: >-
@@ -232,8 +229,7 @@ components:
     destination: destino
     origin: origen
     planTripTooltip: Planificar viaje
-    validationMessage: "Por favor, defina los siguientes campos para planificar un
-      viaje: {issues}"
+    validationMessage: "Por favor, defina los siguientes campos para planificar un viaje: {issues}"
   BeforeSignInScreen:
     mainTitle: Iniciando sesión
     message: >
@@ -336,18 +332,19 @@ components:
       {itineraryNum, plural, one {# itinerario encontrado} other {# itinerarios
       encontrados}}
     numIssues: "{issueNum, plural, one {# problema} other {# problemas}}"
+    resultsSortedBy: >-
+      Los resultados del viaje están actualmente ordenados por {sortSelected}.
+      Para cambiar la forma en que se ordenan los resultados, utiliza el botón
+      "Ordenar resultados" que aparece a continuación.
     searching: Buscando tus opciones…
     selectArrivalTime: Hora de llegada
     selectBest: La mejor opción
     selectCost: Costo
     selectDepartureTime: Hora de salida
     selectDuration: Duración
     selectWalkTime: Tiempo de caminata
-    viewAll: Ver todas las opciones
-    resultsSortedBy: Los resultados del viaje están actualmente ordenados por {sortSelected}.
-      Para cambiar la forma en que se ordenan los resultados, utiliza el botón "Ordenar
-      resultados" que aparece a continuación.
     sortResults: Ordenar los resultados
+    viewAll: Ver todas las opciones
   NavLoginButton:
     help: Ayuda
     myAccount: Mi cuenta
@@ -366,8 +363,7 @@ components:
     description: Puede recibir notificaciones sobre los viajes que realiza con frecuencia.
     noneSelect: No enviar notificaciones
     notificationChannelPrompt: ¿Cómo desea recibir las notificaciones?
-    notificationEmailDetail: "Los correos electrónicos de notificación se enviarán
-      a:"
+    notificationEmailDetail: "Los correos electrónicos de notificación se enviarán a:"
   PhoneNumberEditor:
     changeNumber: Cambiar número de teléfono
     invalidCode: Introduzca 6 dígitos para el código de validación.
@@ -482,15 +478,15 @@ components:
     pause: Pausa
     resume: Reanudar
   SavedTripScreen:
+    itineraryLoaded: Itinerario cargado
+    itineraryLoading: Cargando el itinerario
     tooManyTrips: >
       Ya ha alcanzado el máximo de cinco viajes guardados. Por favor, elimine
       los viajes no utilizados de sus viajes guardados e inténtelo de nuevo.
     tripNameAlreadyUsed: >-
       Otro viaje guardado ya utiliza este nombre. Por favor, elija un nombre
       diferente.
     tripNameRequired: Por favor, introduzca el nombre del viaje.
-    itineraryLoaded: Itinerario cargado
-    itineraryLoading: Cargando el itinerario
   SessionTimeout:
     body: >-
       Su sesión expirará en un minuto. Pulse 'Continuar sesión' para mantener su
@@ -502,8 +498,7 @@ components:
       Opciones
       y Preferencias del viaje
   SimpleRealtimeAnnotation:
-    usingRealtimeInfo: Este viaje utiliza información de tráfico y retrasos en tiempo
-      real
+    usingRealtimeInfo: Este viaje utiliza información de tráfico y retrasos en tiempo real
   StackedPaneDisplay:
     savePreferences: Guardar preferencias
   StopScheduleTable:
@@ -566,19 +561,16 @@ components:
     travelingAt: Viajando a {milesPerHour}
     vehicleName: Vehículo {vehicleNumber}
   TripBasicsPane:
-    checkingItineraryExistence: Comprobación de la existencia de itinerarios para
-      cada día de la semana…
+    checkingItineraryExistence: Comprobación de la existencia de itinerarios para cada día de la semana…
     selectAtLeastOneDay: Por favor, seleccione al menos un día para el seguimiento.
     tripDaysPrompt: ¿Qué días hace este viaje?
-    tripIsAvailableOnDaysIndicated: Su viaje está disponible en los días de la semana
-      indicados anteriormente.
+    tripIsAvailableOnDaysIndicated: Su viaje está disponible en los días de la semana indicados anteriormente.
     tripNamePrompt: "Por favor, indique un nombre para este viaje:"
     tripNotAvailableOnDay: El viaje no está disponible el {repeatedDay}
     unsavedChangesExistingTrip: >-
       Todavía no ha guardado su viaje. Si abandona la página, los cambios se
       perderán.
-    unsavedChangesNewTrip: Todavía no ha guardado su nuevo viaje. Si abandona la página,
-      se perderá.
+    unsavedChangesNewTrip: Todavía no ha guardado su nuevo viaje. Si abandona la página, se perderá.
   TripNotificationsPane:
     advancedSettings: Configuración avanzada
     altRouteRecommended: Se recomienda una ruta alternativa o un punto de transferencia

i18n/ko.yml

@@ -22,8 +22,7 @@ actions:
     fetchFieldTripsError: "트립을 가져오는 중에 오류가 발생했습니다: {err}"
     fetchTripsForDateError: "필트 트립 날짜에 대한 트립을 가져오는 중에 오류가 발생했습니다: {err}"
     incompatibleTripDateError: 계획한 트립 날짜({tripDate})가 요청한 트립 날짜({requestDate})가 아닙니다
-    itineraryCapacityError: "플랜을 저장할 수 없습니다: 하나 이상의 차량의 용량이 부족하여 이 플랜을 저장할 수 없습니다.
-      트립을 다시 계획하세요."
+    itineraryCapacityError: "플랜을 저장할 수 없습니다: 하나 이상의 차량의 용량이 부족하여 이 플랜을 저장할 수 없습니다. 트립을 다시 계획하세요."
     maxTripRequestsExceeded: 유효한 결과없이 초과된 트립 요청의 개수
     saveItinerariesError: "트립을 저장하는 데 실패했습니다: {err}"
     setDateError: "날짜를 설정하는 중에 오류가 발생했습니다:"
@@ -651,6 +650,5 @@ util:
     networkUnavailable: 현재 {network} 네트워크를 사용할 수 없습니다.
     noTripFound: 트립을 찾을 수 없습니다.
     noTripFoundForMode: "{modes}의 트립을 찾을 수 없습니다."
-    noTripFoundReason: 지정된 최대 거리 내 또는 지정된 시간에 대중 교통 서비스가 없거나, 출발지 또는 도착지가 안전하게 접근가능하지
-      못할 수 있습니다.
+    noTripFoundReason: 지정된 최대 거리 내 또는 지정된 시간에 대중 교통 서비스가 없거나, 출발지 또는 도착지가 안전하게 접근가능하지 못할 수 있습니다.
     noTripFoundWithReason: "{noTripFound} {reason}"

i18n/vi.yml

@@ -5,8 +5,7 @@ actions:
     callQuerySaveError: "Lỗi khi lưu trữ các truy vấn cuộc gọi: {err}"
     callSaveError: "Không thể lưu cuộc gọi: {err}"
     checkSessionError: "Lỗi khi thiết lập phiên ủy quyền: {err}"
-    couldNotFindCallError: Không thể tìm thấy cuộc gọi. Đang hủy yêu cầu lưu truy
-      vấn.
+    couldNotFindCallError: Không thể tìm thấy cuộc gọi. Đang hủy yêu cầu lưu truy vấn.
     fetchCallsError: "Lỗi khi tìm nạp cuộc gọi: {err}"
     queryFetchError: "Lỗi khi tìm nạp các truy vấn: {err}"
   fieldTrip:
@@ -29,16 +28,14 @@ actions:
       Không thể lưu kế hoạch chuyến đi: Không thể lưu kế hoạch chuyến đi này do
       thiếu sức chứa trên một hoặc nhiều xe. Vui lòng lên kế hoạch lại chuyến đi
       của bạn.
-    maxTripRequestsExceeded: Đã vượt quá số lượng yêu cầu chuyến đi mà không có kết
-      quả hợp lệ
+    maxTripRequestsExceeded: Đã vượt quá số lượng yêu cầu chuyến đi mà không có kết quả hợp lệ
     saveItinerariesError: "Không lưu được hành trình: {err}"
     setDateError: "Lỗi khi cài đặt ngày:"
     setGroupSizeError: "Lỗi khi cài đặt kích thước nhóm:"
     setPaymentError: "Lỗi khi cài đặt thông tin thanh toán:"
     setRequestStatusError: "Lỗi khi cài đặt trạng thái yêu cầu:"
   location:
-    geolocationNotSupportedError: Định vị địa lý không được hỗ trợ bởi trình duyệt
-      của bạn
+    geolocationNotSupportedError: Định vị địa lý không được hỗ trợ bởi trình duyệt của bạn
     unknownPositionError: Lỗi không xác định khi tìm vị trí
   map:
     currentLocation: (Vị trí hiện tại)
@@ -49,8 +46,7 @@ actions:
     confirmDeletePlace: Bạn có muốn loại bỏ nơi này không?
     emailVerificationResent: Thông báo xác minh email đã được gửi lại.
     genericError: "Phát sinh lỗi: {err}"
-    itineraryExistenceCheckFailed: Lỗi kiểm tra xem chuyến đi được chọn của bạn là
-      có thể.
+    itineraryExistenceCheckFailed: Lỗi kiểm tra xem chuyến đi được chọn của bạn là có thể.
     preferencesSaved: Những sở thích của bạn đã được lưu lại.
     smsInvalidCode: Mã bạn nhập không hợp lệ. Vui lòng thử lại.
     smsResendThrottled: >-
@@ -159,14 +155,12 @@ common:
       {} other {# giây}}
 components:
   A11yPrefs:
-    accessibilityRoutingByDefault: Thích những chuyến đi có thể truy cập theo mặc
-      định
+    accessibilityRoutingByDefault: Thích những chuyến đi có thể truy cập theo mặc định
   AccountSetupFinishPane:
     message: Bạn đã sẵn sàng để bắt đầu lên kế hoạch cho các chuyến đi của bạn.
   AddPlaceButton:
     addPlace: Thêm địa điểm
-    needOriginDestination: Xác định nguồn gốc hoặc đích đến để thêm các địa điểm trung
-      gian
+    needOriginDestination: Xác định nguồn gốc hoặc đích đến để thêm các địa điểm trung gian
     tooManyPlaces: Địa điểm trung gian tối đa đạt được
   AdvancedOptions:
     bannedRoutes: Chọn các tuyến đường bị cấm…
@@ -281,8 +275,7 @@ components:
     editPlaceGeneric: Chỉnh sửa vị trí
     invalidAddress: Vui lòng cài đặt một vị trí cho nơi này.
     invalidName: Vui lòng nhập tên cho nơi này.
-    nameAlreadyUsed: Bạn đã sử dụng tên này cho một nơi khác. Vui lòng nhập một tên
-      khác.
+    nameAlreadyUsed: Bạn đã sử dụng tên này cho một nơi khác. Vui lòng nhập một tên khác.
     placeNotFound: Không tìm thấy địa điểm
     placeNotFoundDescription: Xin lỗi, địa điểm được yêu cầu không được tìm thấy.
   FormNavigationButtons:
@@ -533,22 +526,17 @@ components:
     travelingAt: di chuyển với tốc độ {milesPerHour}
     vehicleName: Phương tiện giao thông {vehicleNumber}
   TripBasicsPane:
-    checkingItineraryExistence: Kiểm tra sự tồn tại của hành trình cho mỗi ngày trong
-      tuần…
+    checkingItineraryExistence: Kiểm tra sự tồn tại của hành trình cho mỗi ngày trong tuần…
     selectAtLeastOneDay: Vui lòng chọn ít nhất một ngày để theo dõi.
     tripDaysPrompt: Bạn thực hiện chuyến đi này vào những ngày nào?
-    tripIsAvailableOnDaysIndicated: Chuyến đi của bạn có sẵn vào những ngày trong
-      tuần như đã nêu ở trên.
+    tripIsAvailableOnDaysIndicated: Chuyến đi của bạn có sẵn vào những ngày trong tuần như đã nêu ở trên.
     tripNamePrompt: "Vui lòng cung cấp tên cho chuyến đi này:"
     tripNotAvailableOnDay: Chuyến đi không có sẵn vào {repeatedDay}
-    unsavedChangesExistingTrip: Bạn chưa lưu chuyến đi của mình. Nếu bạn rời đi, những
-      thay đổi sẽ bị mất.
-    unsavedChangesNewTrip: Bạn chưa lưu chuyến đi mới của mình. Nếu bạn rời đi, nó
-      sẽ bị mất.
+    unsavedChangesExistingTrip: Bạn chưa lưu chuyến đi của mình. Nếu bạn rời đi, những thay đổi sẽ bị mất.
+    unsavedChangesNewTrip: Bạn chưa lưu chuyến đi mới của mình. Nếu bạn rời đi, nó sẽ bị mất.
   TripNotificationsPane:
     advancedSettings: Cài đặt nâng cao
-    altRouteRecommended: Một tuyến đường hoặc điểm trung chuyển thay thế được khuyến
-      nghị
+    altRouteRecommended: Một tuyến đường hoặc điểm trung chuyển thay thế được khuyến nghị
     delaysAboveThreshold: Có sự chậm trễ hoặc gián đoạn của hơn
     howToReceiveAlerts: >
       Để nhận thông báo cho các chuyến đi đã lưu của bạn, bật thông báo trong
@@ -557,8 +545,7 @@ components:
     notificationsTurnedOff: Thông báo được tắt cho tài khoản của bạn.
     notifyViaChannelWhen: "Thông báo cho tôi qua {channel} khi:"
     oneHour: 1 tiếng
-    realtimeAlertFlagged: Có một cảnh báo thời gian thực được gắn cờ trên hành trình
-      của tôi
+    realtimeAlertFlagged: Có một cảnh báo thời gian thực được gắn cờ trên hành trình của tôi
     timeBefore: "{time} trước"
   TripStatus:
     alerts: "{alerts, plural, one {# cảnh báo!} other {# cảnh báo!}}"
@@ -571,8 +558,7 @@ components:
       earlyHeading: >-
         Chuyến đi đang diễn ra và sẽ đến sớm hơn {formattedDuration} so với dự
         kiến!
-      noDataHeading: Chuyến đi đang được tiến hành (không có cập nhật thời gian thực
-        có sẵn).
+      noDataHeading: Chuyến đi đang được tiến hành (không có cập nhật thời gian thực có sẵn).
       onTimeHeading: Chuyến đi đang được tiến hành và đúng giờ.
     base:
       lastCheckedDefaultText: Thời gian được kiểm tra lần cuối không xác định
@@ -615,8 +601,7 @@ components:
       tripStartIsEarly: >-
         Thời gian bắt đầu chuyến đi đang diễn ra sớm hơn ${duration} so với dự
         kiến!
-      tripStartsSoonNoUpdates: Chuyến đi đang bắt đầu sớm (không có cập nhật về thời
-        gian thực).
+      tripStartsSoonNoUpdates: Chuyến đi đang bắt đầu sớm (không có cập nhật về thời gian thực).
       tripStartsSoonOnTime: Chuyến đi đang bắt đầu sớm và sắp đúng giờ.
   TripSummary:
     arriveAt: "Đến nơi "

lib/components/app/desktop-nav.tsx

@@ -20,7 +20,7 @@ const StyledNav = styled(Nav)`
   margin-right: -5px;
   /* Target only the svgs in the Navbar */
   & > li > button > svg,
-  & > li > span > button > svg {
+  & > li > span > button > span > svg {
     height: 18px;
   }
 

lib/components/narrative/narrative-itineraries-header.tsx

@@ -27,6 +27,13 @@ const IssueButton = styled.button`
   padding: 2px 4px;
 `
 
+const ItinerariesHeaderContainer = styled.div<{ showHeaderText: boolean }>`
+  display: flex;
+  float: left;
+  gap: 8px;
+  margin-left: ${(props) => (props.showHeaderText ? 'inherit' : 'auto')};
+`
+
 export default function NarrativeItinerariesHeader({
   customBatchUiBackground,
   errors,
@@ -173,14 +180,7 @@ export default function NarrativeItinerariesHeader({
             // because it falls under the "Plan your trip" <h1> header.
             <InvisibleA11yLabel as="h2">{itinerariesFound}</InvisibleA11yLabel>
           )}
-          <div
-            style={{
-              display: 'flex',
-              float: 'right',
-              gap: 8,
-              marginLeft: showHeaderText ? 'inherit' : 'auto'
-            }}
-          >
+          <ItinerariesHeaderContainer showHeaderText={showHeaderText}>
             {popupTarget && (
               <button onClick={() => setPopupContent(popupTarget)}>
                 <PopupTriggerText compact popupTarget={popupTarget} />
@@ -221,7 +221,7 @@ export default function NarrativeItinerariesHeader({
                 </li>
               ))}
             </SortResultsDropdown>
-          </div>
+          </ItinerariesHeaderContainer>
           <PlanFirstLastButtons />
         </>
       )}

lib/components/util/dropdown.tsx

@@ -34,6 +34,7 @@ const DropdownMenu = styled.ul`
   position: absolute;
   right: 0;
   top: 100%;
+  width: 100%;
   z-index: 1000;
 
   hr {
@@ -169,7 +170,7 @@ export const Dropdown = ({
         tabIndex={0}
         title={label}
       >
-        {name}
+        <span>{name}</span>
         <span className="caret" role="presentation" />
       </DropdownButton>
       {open && (
@@ -191,11 +192,6 @@ export const Dropdown = ({
 export const SortResultsDropdown = styled(Dropdown)`
     position: relative;
 
-    // Keeps dropdown inline with itinerary buttons when scrollbar is visible
-    @media (min-width: 769px) {
-      margin-right: 10px;
-    }
-
     ${DropdownButton} {
       border-radius: 5px;
       padding: 3px 7px;