Skip to content

Commit

Permalink
fix: journey planner homepage (#792)
Browse files Browse the repository at this point in the history 
* Adding find a timetable pattern page and pattern files themselves.

* Update find a table widget.

* Add params to label inside autocomplete.

* Rename page and widget. Update widget page structure.

* import scss into patterns scss.

* Fix eslint error.

* Update page title

Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com>

* Update src/wmnds/patterns/find-a-timetable-widget/_find-a-timetable-widget.njk

Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com>

* remove vscode custom settings

* Update buttons order and remove design link.

* Update tram link.

* Update tram link.

* Update to wmnetwork domain.

* Update checkbox.

* Adding js file.

* Form submission is now working properly. JS is updated and html are updated.

* Amend css bug with autocomplete. Replace checkbox buttons.

* Fix margin incoherence when side by side with buy a ticket.

* Update _patterns.scss

* Delete _autocomplete.njk

* Revert "Delete _autocomplete.njk"

This reverts commit f57379d.

* Ammending error when creating branch.

Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com>
Co-authored-by: Houston Blyden <h.blyden@gmail.com>
  • Loading branch information
@catiarodriguescosta @gldgrnt @houbly
3 people committed May 19, 2021
1 parent 97f4361 commit fb7aca8
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 43 deletions.
2 changes: 1 addition & 1 deletion src/wmnds/patterns/_patterns.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,5 @@
@import "travel-updates/travel-updates"; // Travel updates styles
@import "travel-mode-page-banner/travel-mode-page-banner"; // page-banner
@import "search/search"; // Search pattern styles
@import "journey-planner-widget/journey-planner-widget"; // Journey planner widget styles
@import "journey-planner/journey-planner"; // Journey planner styles
@import "journey-planner-widget/journey-planner-widget"; // Journey planner widget styles
2 changes: 0 additions & 2 deletions src/wmnds/patterns/autocomplete/_autocomplete.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
{% set name = params.name if params.name else id %}
{% set isRequired = params.isRequired if params.isRequired else false %}



{# Label #}
{{
wmndsFormLabel({
Expand Down
73 changes: 37 additions & 36 deletions src/wmnds/patterns/journey-planner/_journey-planner.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
name: "origin",
label: {
contentText: 'From',
classes: "h5"
classes: "h5 wmnds-m-t-md"
},
placeholder: 'Enter station or postcode',
loading: false,
Expand Down Expand Up @@ -88,41 +88,42 @@
<div class="wmnds-journey-planner__how">
<h5>Which modes of transport will you use?</h5>
<div class="wmnds-grid wmnds-grid--spacing-3-sm">
<div class="wmnds-col-1-3">
<input type="checkbox" class="wmnds-screenreaders-only" name="useBus" aria-label="bus" checked/>
{{
wmndsButton({
iconLeft: "modes-isolated-bus",
contentText: "Bus",
type: "mode",
classes:"wmnds-col-1"
})
}}
</div>
<div class="wmnds-col-1-3">
<input type="checkbox" class="wmnds-screenreaders-only" name="useTram" aria-label="tram" checked/>
{{
wmndsButton({
iconLeft: "modes-isolated-metro",
contentText: "Tram",
type: "mode",
classes:"wmnds-col-1"
})
}}
</div>
<div class="wmnds-col-1-3">
<input type="checkbox" class="wmnds-screenreaders-only" name="useTrain" aria-label="train" checked />
{{
wmndsButton({
iconLeft: "modes-isolated-rail",
contentText: "Train",
type: "mode",
classes:"wmnds-col-1"
})
}}
</div>


<label class="wmnds-col-1-3">
<input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useBus">
<div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
{{
wmndsIcon({
icon: 'modes-isolated-bus',
class: 'wmnds-btn__icon '
})
}}
Bus
</div>
</label>
<label class="wmnds-col-1-3">
<input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTrain">
<div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
{{
wmndsIcon({
icon: 'modes-isolated-rail',
class: 'wmnds-btn__icon '
})
}}
Train
</div>
</label>
<label class="wmnds-col-1-3">
<input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTram">
<div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
{{
wmndsIcon({
icon: 'modes-isolated-metro',
class: 'wmnds-btn__icon '
})
}}
Tram
</div>
</label>
</div>
</div>

Expand Down
17 changes: 13 additions & 4 deletions src/wmnds/patterns/journey-planner/_journey-planner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@
}
}

.wmnds-autocomplete-suggestions {
color: $black;
}

&__to {
position: relative;
}
Expand All @@ -39,10 +43,15 @@
fill: $white;
}

.wmnds-btn--mode:active,
.wmnds-btn--mode:focus,
.wmnds-btn--mode:target {
background-color: get-color(secondary, 50);
&__mode-checkbox {
&:focus + .wmnds-btn--mode {
background-color: $white;
box-shadow: 0 0 0 2px $white, 0 0 0 4px get-color(secondary);
}

&:checked + .wmnds-btn--mode {
background-color: get-color(secondary, 50);
}
}

// Leave and arrive for when, modes for how
Expand Down

0 comments on commit fb7aca8

Please sign in to comment.