gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match Angular layout in flights-map filter sidebar

Browse Source 
- Add the 'Найдите свой маршрут' heading (uses the existing
  FLIGHTS-MAP.ROUTE key, previously unused).
- Reorder the fields to Angular's order: cities → info → toggles →
  date (date was previously stuck in the middle).
- Replace the three native checkboxes with styled pill toggles +
  sliding knobs — matches p-inputswitch used in the Angular filter.
- Add 'ДД.ММ.ГГГГ' placeholder to the date input so the empty state
  reads the same as Angular.
This commit is contained in:
Anton
2026-04-18 10:26:24 +03:00
parent 25986dfca2
commit 51f997e642
2 changed files with 106 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/flights-map/components/FlightsMapFilter.tsx
+51 -39
View File
@@ -146,6 +146,8 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
return (
<div className="flights-map-filter" data-testid="flights-map-filter">
<h3 className="flights-map-filter__title">{t("FLIGHTS-MAP.ROUTE")}</h3>
<CityAutocomplete
label={t("SHARED.DEPARTURE_CITY")}
placeholder={t("FLIGHTS-MAP.FILTER_DEPARTURE_PLACEHOLDER")}
@@ -183,6 +185,54 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
testIdPrefix="fm-arrival"
/>
<div className="flights-map-filter__info">
<p>{t("FLIGHTS-MAP.FILTER_INFO")}</p>
</div>
<div className="flights-map-filter__toggles">
<label
className={`flights-map-filter__toggle${!value.departure ? " flights-map-filter__toggle--disabled" : ""}`}
>
<input
type="checkbox"
checked={value.domestic}
onChange={handleDomesticChange}
disabled={!value.departure}
data-testid="fm-domestic-toggle"
/>
<span className="flights-map-filter__switch" aria-hidden="true" />
{t("FLIGHTS-MAP.DOMESTIC_FLIGHTS")}
</label>
<label
className={`flights-map-filter__toggle${!value.departure ? " flights-map-filter__toggle--disabled" : ""}`}
>
<input
type="checkbox"
checked={value.international}
onChange={handleInternationalChange}
disabled={!value.departure}
data-testid="fm-international-toggle"
/>
<span className="flights-map-filter__switch" aria-hidden="true" />
{t("FLIGHTS-MAP.INTERNATIONAL_FLIGHTS")}
</label>
<label
className={`flights-map-filter__toggle${!(value.departure && value.arrival) ? " flights-map-filter__toggle--disabled" : ""}`}
>
<input
type="checkbox"
checked={value.connections}
onChange={handleConnectionsChange}
disabled={!(value.departure && value.arrival)}
data-testid="fm-connections-toggle"
/>
<span className="flights-map-filter__switch" aria-hidden="true" />
{t("FLIGHTS-MAP.CONNECTING_FLIGHTS")}
</label>
</div>
<div className="flights-map-filter__field">
<label htmlFor="fm-date">{t("SHARED.FLIGHT_DATE")}</label>
<Calendar
@@ -192,51 +242,13 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
maxDate={maxDate}
disabledDates={disabledDates}
dateFormat="dd.mm.yy"
placeholder={t("SHARED.DATE_FORMAT")}
showIcon
className="input--filter"
inputId="fm-date"
data-testid="fm-date-input"
/>
</div>
<div className="flights-map-filter__info">
<p>{t("FLIGHTS-MAP.FILTER_INFO")}</p>
</div>
<div className="flights-map-filter__toggles">
<label className={!value.departure ? "flights-map-filter__toggle--disabled" : ""}>
<input
type="checkbox"
checked={value.domestic}
onChange={handleDomesticChange}
disabled={!value.departure}
data-testid="fm-domestic-toggle"
/>
{t("FLIGHTS-MAP.DOMESTIC_FLIGHTS")}
</label>
<label className={!value.departure ? "flights-map-filter__toggle--disabled" : ""}>
<input
type="checkbox"
checked={value.international}
onChange={handleInternationalChange}
disabled={!value.departure}
data-testid="fm-international-toggle"
/>
{t("FLIGHTS-MAP.INTERNATIONAL_FLIGHTS")}
</label>
<label className={!(value.departure && value.arrival) ? "flights-map-filter__toggle--disabled" : ""}>
<input
type="checkbox"
checked={value.connections}
onChange={handleConnectionsChange}
disabled={!(value.departure && value.arrival)}
data-testid="fm-connections-toggle"
/>
{t("FLIGHTS-MAP.CONNECTING_FLIGHTS")}
</label>
</div>
</div>
);
};
src/features/flights-map/components/FlightsMapStartPage.scss
+55 -7
View File
@@ -180,17 +180,65 @@
}
}
&__title {
font-size: 18px;
font-weight: 600;
color: #222;
margin: 0 0 vars.$space-s;
}
&__toggles {
display: flex;
flex-direction: column;
gap: vars.$space-s;
gap: vars.$space-m;
padding: vars.$space-s 0;
}
label {
display: flex;
align-items: center;
gap: vars.$space-s;
cursor: pointer;
@include fonts.font-small(colors.$gray);
// Visual toggle switch matching Angular's p-inputswitch. Hides the
// native checkbox and renders a pill + sliding knob via <span>.
&__toggle {
display: flex;
align-items: center;
gap: vars.$space-m;
cursor: pointer;
@include fonts.font-small(colors.$gray);
input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
}
&__switch {
display: inline-block;
width: 36px;
height: 20px;
background: #d0d5dd;
border-radius: 10px;
position: relative;
transition: background-color 150ms ease;
flex-shrink: 0;
&::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 150ms ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
}
input[type="checkbox"]:checked + &__switch {
background: colors.$blue;
&::before {
transform: translateX(16px);
}
}