diff options
| -rw-r--r-- | .cypress/cypress/integration/simple_spec.js | 15 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/around/postcode_form.html | 34 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet.com/base.scss | 64 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet.com/layout.scss | 15 |
4 files changed, 123 insertions, 5 deletions
diff --git a/.cypress/cypress/integration/simple_spec.js b/.cypress/cypress/integration/simple_spec.js index 39000a022..a1adbd06f 100644 --- a/.cypress/cypress/integration/simple_spec.js +++ b/.cypress/cypress/integration/simple_spec.js @@ -1,16 +1,21 @@ -describe('My First Test', function() { - it('Visits the home page', function() { +describe('Clicking the map', function() { + before(function(){ cy.visit('/'); cy.contains('Go'); cy.get('[name=pc]').type('BS10 5EE'); - cy.get('#postcodeForm').submit(); + cy.get('[name=pc]').parents('form').submit(); + }); + + it('allows me to report a new problem', function() { cy.url().should('include', '/around'); cy.get('#map_box').click(200, 200); cy.get('[name=title]').type('Title'); cy.get('[name=detail]').type('Detail'); cy.get('[name=username]').type('user@example.org'); cy.get('[name=password_sign_in]').type('password'); - cy.get('form').submit(); - cy.get('form').submit(); + cy.get('[name=password_sign_in]').parents('form').submit(); + cy.get('#map_sidebar').should('contain', 'check and confirm your details'); + cy.get('#map_sidebar').parents('form').submit(); + cy.get('body').should('contain', 'Thank you for reporting this issue'); }); }); diff --git a/templates/web/fixmystreet.com/around/postcode_form.html b/templates/web/fixmystreet.com/around/postcode_form.html new file mode 100644 index 000000000..c1d3198c0 --- /dev/null +++ b/templates/web/fixmystreet.com/around/postcode_form.html @@ -0,0 +1,34 @@ +<div id="front-main"> + <div id="front-main-container"> + [% UNLESS possible_location_matches %] + [% INCLUDE 'around/intro.html' %] + [% END %] + + [% + question = c.cobrand.enter_postcode_text || loc('Enter a nearby street name and area'); + %] + + <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" class="js-geolocate postcode-form-test"> + <label for="pc">[% question %]:</label> + <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]" class="postcode-form-test__postcode"> + <a href="[% c.uri_for('/around') %]" id="geolocate_link" class="btn btn--geolocate">[% loc('or locate me automatically') %]</a> + + [%# Form will be submitted via this button when user presses Enter key %] + <button type="submit" class="visuallyhidden" aria-hidden="true" tabindex="-1">Go</button> + + <div class="postcode-form-test__buttons"> + [%# We can now segment users in Google Analytics by looking at "intent" query string param %] + <button type="submit" name="intent" value="report" class="btn">[% loc('Report a new problem') %]</button> + <button type="submit" name="intent" value="browse" class="btn">[% loc('Show problems') %]</button> + </div> + + [% IF partial_token %] + <input type="hidden" name="partial" value="[% partial_token.token %]"> + [% END %] + + [% IF c.user_exists AND c.user.categories.size %] + <input type="hidden" name="filter_category" value="[% c.user.categories.join(",") | html %]"> + [% END %] + </form> + </div> +</div> diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss index 0cc23c539..6088f842c 100644 --- a/web/cobrands/fixmystreet.com/base.scss +++ b/web/cobrands/fixmystreet.com/base.scss @@ -299,3 +299,67 @@ html.lazyload .js-lazyload { margin-bottom: 0; } } + +.postcode-form-test { + margin: 0 -1em; + padding: 1em; + background-color: $primary; + color: $primary_text; + + label { + margin: 0; + } + + // Lots of !important flags here to overpower + // selectors like `#front-main a#geolocate_link` and + // `body.fullwidthpage #front-main a#geolocate_link` + // in the core and fixmystreet.com styles. + #geolocate_link { + background: transparent !important; + border: none; + height: auto !important; + margin-top: 0 !important; + padding: 1em !important; + + &:before { + vertical-align: -0.3em; + } + } +} + +// Overloaded selector to beat input[type="text"] +input.postcode-form-test__postcode { + max-width: 100%; + width: 30em; + margin: 0.5em auto 0 auto; + padding: 0.75em; + border: 1px solid darken($primary, 10%); + box-shadow: 0 1px 1px rgba(#000, 0.2); +} + +.postcode-form-test__buttons { + margin: 1em -10px 0 -10px; + + // Browsers without flex support will just lay out the buttons + // side-by-side, breaking onto two lines at narrow widths. + @include flex-container(); + @include justify-content(center); + + $btn-blue: #469bfc; + + .btn { + color: #fff !important; + background: $btn-blue; + background-image: linear-gradient($btn-blue, darken($btn-blue, 5%)); + border: none; + border-radius: 2px; + text-shadow: 0 1px 1px rgba(0,0,0,0.2); + box-shadow: 0 1px 1px rgba(0,0,0,0.2); + margin: 0 10px 10px 10px; + + &:hover, &:focus { + background-color: darken($btn-blue, 5%); + background-image: linear-gradient(darken($btn-blue, 5%), darken($btn-blue, 10%)); + } + } +} diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss index 9a8768562..9c7f575a2 100644 --- a/web/cobrands/fixmystreet.com/layout.scss +++ b/web/cobrands/fixmystreet.com/layout.scss @@ -171,6 +171,21 @@ body.fullwidthpage { } } +.postcode-form-test { + background: transparent; + padding-top: 1.5em; +} + +// Overloaded selector to beat input[type="text"] +input.postcode-form-test__postcode { + max-width: 25em; // down from 27em, now that "GO" button has gone + font-size: 1.2em; +} + +.postcode-form-test__buttons .btn { + font-size: 1.2em; +} + body.frontpage { #site-logo { margin: 2em 0; |