Checkout Read Me

x3 pages developed using Materializecss

  • Login
  • Details
  • Delivery - with Modal on Edit / Add click

All CSS relevant to the pages is contained in screen.css

Validation messaging

In order to display messaging correctly with no FE display bugs the error element is changed to a div and styled in screen.css. The errorPlacement function is also required to make this work as expected.

Validation is applied to all required text, telephone & email inputs usingjQuery Validation plugin.

Error messaging is currently hardcoded into the validation logic and we think these could live within he properties files.

The only fields not validated are any select drop downs as these will not be handled by Materializecss.

  • Email (Required) - Please enter your email address
  • Email (Valid) - Please enter a valid email address
  • Password - Your password must be at least 5 characters long
  • Title - Please select your title
  • First Name - Please select your title
  • Last Name - Please select your title
  • Country - Please enter your country
  • Telephone (not required numeric check only) - Please enter a valid number
  • Address Line 1 - Please enter an address
  • Town/City - Please enter your location
  • County - Please enter your county
  • Dublin - Please enter your Dublin post code
  • Post Code - Please enter your post code

These errors can be implemented by inserting the following snippet into the input-field gropu of the select

                    
                        <div id="input_id" class="error">Error Message</div>

Progress Bar

Current step in the process has the class "active" added to the div.bt-progress-bar--icon

Completed step in the process has the class "complete" added to the div.bt-progress-bar--icon (see delivery.html)

All icons used are contained within the img folder. All svgs.

Details

Over 18 checkbox - this is not for launch and should be an optional field

Over 18 checkbox tooltip is initiated through Materializecss

BT Style Guide

http://brownthomasdemo.onstate.co.uk/bt-style-guide-new/

Underlined <a> styling are taking from the above styleguide using the "under" class

Buttons are also configured using class names from teh above styleguide

.button

.button .secondary

.button .expanded

.button .info

BT Icons