From 5ef129a8349e091761f85cf83a0520a00f17af61 Mon Sep 17 00:00:00 2001 From: Leonard Ehrenfried Date: Wed, 25 Sep 2024 18:01:08 +0200 Subject: [PATCH 1/7] Make search bar more compact --- .../components/ItineraryList/inputStyle.ts | 2 ++ .../SearchBar/GraphiQLRouteButton.tsx | 18 ++++++++++----- .../SearchBar/ItineraryFilterDebugSelect.tsx | 4 +++- .../SearchBar/LocationInputField.tsx | 2 ++ .../SearchBar/MultiSelectDropdown.tsx | 2 ++ .../SearchBar/NumTripPatternsInput.tsx | 4 +++- client/src/components/SearchBar/SearchBar.tsx | 22 ++++++++++--------- .../SearchBar/SearchWindowInput.tsx | 2 ++ client/src/static/img/graphql-solid.svg | 4 ++++ client/src/static/img/graphql.svg | 4 ++++ client/src/style.css | 4 ++-- 11 files changed, 49 insertions(+), 19 deletions(-) create mode 100644 client/src/components/ItineraryList/inputStyle.ts create mode 100644 client/src/static/img/graphql-solid.svg create mode 100644 client/src/static/img/graphql.svg diff --git a/client/src/components/ItineraryList/inputStyle.ts b/client/src/components/ItineraryList/inputStyle.ts new file mode 100644 index 00000000000..e700456a384 --- /dev/null +++ b/client/src/components/ItineraryList/inputStyle.ts @@ -0,0 +1,2 @@ +export const smallInputStyle = { maxWidth: '100px' }; +export const mediumInputStyle = { maxWidth: '130px' }; diff --git a/client/src/components/SearchBar/GraphiQLRouteButton.tsx b/client/src/components/SearchBar/GraphiQLRouteButton.tsx index 550964dd5a8..e86cf4f7670 100644 --- a/client/src/components/SearchBar/GraphiQLRouteButton.tsx +++ b/client/src/components/SearchBar/GraphiQLRouteButton.tsx @@ -1,6 +1,8 @@ import { Button } from 'react-bootstrap'; import { TripQueryVariables } from '../../gql/graphql.ts'; import { queryAsString } from '../../static/query/tripQuery.tsx'; +import logo from '../../static/img/graphql-solid.svg'; + const graphiQLUrl = import.meta.env.VITE_GRAPHIQL_URL; function GraphiQLRouteButton({ tripQueryVariables }: { tripQueryVariables: TripQueryVariables }) { @@ -8,11 +10,17 @@ function GraphiQLRouteButton({ tripQueryVariables }: { tripQueryVariables: TripQ const formattedQuery = encodeURIComponent(queryAsString); return ( -
- -
+ ); } + export default GraphiQLRouteButton; diff --git a/client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx b/client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx index 636ba551541..e32a63eee06 100644 --- a/client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx +++ b/client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx @@ -1,5 +1,6 @@ import { Form } from 'react-bootstrap'; import { ItineraryFilterDebugProfile, TripQueryVariables } from '../../gql/graphql.ts'; +import { mediumInputStyle } from '../ItineraryList/inputStyle.ts'; export function ItineraryFilterDebugSelect({ tripQueryVariables, @@ -11,11 +12,12 @@ export function ItineraryFilterDebugSelect({ return ( - Itinerary filter debug + Filter debug { setTripQueryVariables({ ...tripQueryVariables, diff --git a/client/src/components/SearchBar/LocationInputField.tsx b/client/src/components/SearchBar/LocationInputField.tsx index ffa66702e81..b5797b51ecc 100644 --- a/client/src/components/SearchBar/LocationInputField.tsx +++ b/client/src/components/SearchBar/LocationInputField.tsx @@ -1,6 +1,7 @@ import { Form } from 'react-bootstrap'; import { COORDINATE_PRECISION } from './constants.ts'; import { Location } from '../../gql/graphql.ts'; +import { mediumInputStyle } from '../ItineraryList/inputStyle.ts'; export function LocationInputField({ location, id, label }: { location: Location; id: string; label: string }) { return ( @@ -13,6 +14,7 @@ export function LocationInputField({ location, id, label }: { location: Location id={id} size="sm" placeholder="[Click in map]" + style={mediumInputStyle} // Intentionally empty for now, but needed because of // https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable onChange={() => {}} diff --git a/client/src/components/SearchBar/MultiSelectDropdown.tsx b/client/src/components/SearchBar/MultiSelectDropdown.tsx index fc20e6822ac..f053dab6f48 100644 --- a/client/src/components/SearchBar/MultiSelectDropdown.tsx +++ b/client/src/components/SearchBar/MultiSelectDropdown.tsx @@ -1,5 +1,6 @@ import { ChangeEvent, useState } from 'react'; import { Form } from 'react-bootstrap'; +import { mediumInputStyle } from '../ItineraryList/inputStyle.ts'; type MultiSelectDropdownOption = { id: T; @@ -40,6 +41,7 @@ const MultiSelectDropdown = ({ label, options, values, onChange }: type="text" id="multiSelectDropdown" size="sm" + style={mediumInputStyle} value={values.length > 0 ? values.join(', ') : 'Not selected'} onClick={toggleDropdown} onChange={() => {}} diff --git a/client/src/components/SearchBar/NumTripPatternsInput.tsx b/client/src/components/SearchBar/NumTripPatternsInput.tsx index b77e70adb81..f2fe42a5a0f 100644 --- a/client/src/components/SearchBar/NumTripPatternsInput.tsx +++ b/client/src/components/SearchBar/NumTripPatternsInput.tsx @@ -1,5 +1,6 @@ import { Form } from 'react-bootstrap'; import { TripQueryVariables } from '../../gql/graphql.ts'; +import { smallInputStyle } from '../ItineraryList/inputStyle.ts'; export function NumTripPatternsInput({ tripQueryVariables, @@ -11,7 +12,7 @@ export function NumTripPatternsInput({ return ( - Number of trip patterns + Num. results setTripQueryVariables({ diff --git a/client/src/components/SearchBar/SearchBar.tsx b/client/src/components/SearchBar/SearchBar.tsx index ca072fa5589..6bf03a29a18 100644 --- a/client/src/components/SearchBar/SearchBar.tsx +++ b/client/src/components/SearchBar/SearchBar.tsx @@ -1,4 +1,4 @@ -import { Button, Spinner } from 'react-bootstrap'; +import { Button, ButtonGroup, Spinner } from 'react-bootstrap'; import { ServerInfo, TripQueryVariables } from '../../gql/graphql.ts'; import { LocationInputField } from './LocationInputField.tsx'; import { DepartureArrivalSelect } from './DepartureArrivalSelect.tsx'; @@ -51,16 +51,18 @@ export function SearchBar({ onRoute, tripQueryVariables, setTripQueryVariables, setTripQueryVariables={setTripQueryVariables} />
- + + + +
- ); } diff --git a/client/src/components/SearchBar/SearchWindowInput.tsx b/client/src/components/SearchBar/SearchWindowInput.tsx index 5442784de8e..0bccf5ba643 100644 --- a/client/src/components/SearchBar/SearchWindowInput.tsx +++ b/client/src/components/SearchBar/SearchWindowInput.tsx @@ -1,5 +1,6 @@ import { Form } from 'react-bootstrap'; import { TripQueryVariables } from '../../gql/graphql.ts'; +import { smallInputStyle } from '../ItineraryList/inputStyle.ts'; export function SearchWindowInput({ tripQueryVariables, @@ -19,6 +20,7 @@ export function SearchWindowInput({ size="sm" placeholder="(in minutes)" min={1} + style={smallInputStyle} value={tripQueryVariables.searchWindow || ''} onChange={(event) => setTripQueryVariables({ diff --git a/client/src/static/img/graphql-solid.svg b/client/src/static/img/graphql-solid.svg new file mode 100644 index 00000000000..32d6e5e0f00 --- /dev/null +++ b/client/src/static/img/graphql-solid.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/static/img/graphql.svg b/client/src/static/img/graphql.svg new file mode 100644 index 00000000000..ef85915ffaa --- /dev/null +++ b/client/src/static/img/graphql.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/style.css b/client/src/style.css index 37100d65006..400c9e84b9d 100644 --- a/client/src/style.css +++ b/client/src/style.css @@ -7,7 +7,7 @@ margin-right: 14px; } -@media (min-width: 2160px) { +@media (min-width: 1790px) { .top-content { height: 75px; } @@ -17,7 +17,7 @@ } } -@media (max-width: 2159px) { +@media (max-width: 1791px) { .top-content { height: 150px; } From 8549ccc9f9b253990d31461de0dfcc4e2547184c Mon Sep 17 00:00:00 2001 From: Leonard Ehrenfried Date: Thu, 26 Sep 2024 10:56:39 +0200 Subject: [PATCH 2/7] Make pagin buttons smaller --- .../components/ItineraryList/ItineraryPaginationControl.tsx | 4 ++++ client/src/style.css | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/client/src/components/ItineraryList/ItineraryPaginationControl.tsx b/client/src/components/ItineraryList/ItineraryPaginationControl.tsx index ecc1ffd45db..bf74c83fbca 100644 --- a/client/src/components/ItineraryList/ItineraryPaginationControl.tsx +++ b/client/src/components/ItineraryList/ItineraryPaginationControl.tsx @@ -14,6 +14,8 @@ export function ItineraryPaginationControl({ return (
{' '} ); }