psd/checkout-steps.psd public/images/steps/1.png public/images/steps/1_small.png public/images/steps/2.png public/images/steps/2_small.png public/images/steps/3.png public/images/steps/3_small.png public/images/steps/4.png public/images/steps/4_small.png public/images/steps/5.png public/images/steps/5_small.png public/images/steps/6.png public/images/steps/6_small.png @@ -54,6 +54,8 @@ <label for="<%= t("phone") %>"><%= t("phone") %></label> <%= bill_form.text_field :phone, :class => 'required' -%><span class="req">*</span> </p> - <input id="continue_billing" type="button" value="<%=t("continue")%>"/> + <div class="form-buttons"> + <input id="continue_billing" type="button" class="button primary" value="<%=t("continue")%>"/> + </div> </div> <% end %> app/views/orders/_billing.html.erb @@ -8,7 +8,7 @@ <%= error_messages_for :order %> <% @checkout_steps.each do |step| %> - <div id="<%=step%>" class="checkout_disabled"> + <div id="<%=step%>" class="checkout disabled"> <%= render step, :order_form => order_form %> </div> <% end %> app/views/orders/_checkout_form.html.erb @@ -5,5 +5,7 @@ <div id="sdisplay"><img src="/images/ajax_loader.gif" id="sconfirm_loader" /></div> <div class="clear"></div> <%= render :partial => 'shared/order_details', :locals => {:order => @order} -%> - <%= submit_tag t('place_order'), {:id => "continue_confirmation"} %> + <div class="form-buttons"> + <%= submit_tag t('place_order'), {:id => "continue_confirmation", :class => "button primary"} %> + </div> </div> \ No newline at end of file app/views/orders/_confirmation.html.erb @@ -6,7 +6,7 @@ </p> <p> <label for=""><%= t("card_number") %></label> - <%= creditcard_form.text_field :number, :size=> 19, :class => 'required' -%><span class="req">*</span> + <%= creditcard_form.text_field :number, :size=> 19, :max_length => 19, :class => 'required' -%><span class="req">*</span> </p> <p> <label for=""><%= t("expiration") %></label> @@ -21,7 +21,9 @@ (<%= t("whats_this") %>) </a> </p> - <p><input id="continue_payment" type="button" value="<%=t("continue")%>"/></p> + <div class="form-buttons"> + <input id="continue_payment" type="button" class="button primary" value="<%=t("continue")%>"/> + </div> <%= creditcard_form.hidden_field :first_name -%> <%= creditcard_form.hidden_field :last_name -%> </div> app/views/orders/_payment.html.erb @@ -5,16 +5,22 @@ <div id="registration_choice"> <h3><%= t("register_or_guest") %></h3> <p> - <input id="choose_register" type="radio" name="choose_registration" value="register" checked="checked"/> - <label for="register" class="radio"><%= t("register") %></label> + <label> + <input id="choose_register" type="radio" name="choose_registration" value="register" checked="checked"/> + <%= t("register") %> + </label> </p> <p> - <input id="choose_existing" type="radio" name="choose_registration" value="existing"/> - <label for="existing" class="radio"><%= t("existing_customer") %></label> + <label> + <input id="choose_existing" type="radio" name="choose_registration" value="existing"/> + <%= t("existing_customer") %> + </label> </p> <p> - <input id="choose_guest" type="radio" name="choose_registration" value="guest"/> - <label for="guest" class="radio"><%= t("proceed_as_guest") %></label> + <label> + <input id="choose_guest" type="radio" name="choose_registration" value="guest"/> + <%= t("proceed_as_guest") %> + </label> </p> </div> <div id="registration_input"> @@ -56,5 +62,7 @@ </div> </div> <div id="already_logged_in"><p>You are already logged in.</p></div> - <p><input id="continue_registration" type="button" value="<%=t("continue")%>"/></p> + <div class="form-buttons"> + <input id="continue_registration" type="button" class="button primary" value="<%=t("continue") %>"/> + </div> </div> \ No newline at end of file app/views/orders/_registration.html.erb @@ -55,6 +55,8 @@ <label for="<%= t("phone") %>"><%= t("phone") %></label> <%= ship_form.text_field :phone, :class => 'required' -%><span class="req">*</span> </p> - <input id="continue_shipping" type="button" value="<%=t("continue")%>"/> + <div class="form-buttons"> + <input id="continue_shipping" type="button" class="button primary" value="<%=t("continue")%>"/> + </div> </div> <% end %> app/views/orders/_shipping.html.erb @@ -1,5 +1,7 @@ <h2><%= t("shipping_method") %></h2> <div class="inner"> <div id="methods"></div> - <p><input id="continue_shipping_method" type="button" value="<%=t("continue")%>"/></p> + <div class="form-buttons"> + <input id="continue_shipping_method" type="button" class="button primar" value="<%=t("continue")%>"/> + </div> </div> \ No newline at end of file app/views/orders/_shipping_method.html.erb @@ -1,18 +1,18 @@ <% form_tag user_session_path do %> <p> <%= label :user_session, :login, t("email") %><br /> - <%= text_field :user_session, 'login' %> + <%= text_field :user_session, 'login', :class => 'title' %> </p> <p> <%= label :user_session, :password, t("password") %><br /> - <%= password_field :user_session, 'password' %> + <%= password_field :user_session, 'password', :class => 'title' %> </p> <p> <label> <%= check_box :user_session, :remember_me %> - <%= t ('remember_me') %> + <%= label :user_session, :remember_me, t ('remember_me') %> </label> </p> - <p><%= submit_tag t("log_in") %></p> + <p><%= submit_tag t("log_in"), :class => 'button primary'%></p> <% end %> \ No newline at end of file app/views/shared/_login.html.erb @@ -227,17 +227,18 @@ var shift_to_region = function(active) { if(active == regions[i]) { $('div#' + regions[i] + ' h2').unbind('click').css('cursor', 'default'); $('div#' + regions[i] + ' div.inner').show('fast'); - $('div#' + regions[i]).removeClass('checkout_disabled'); + $('div#' + regions[i]).removeClass('disabled').removeClass('completed'); found = 1; } else { $('div#' + regions[i] + ' h2').unbind('click').css('cursor', 'pointer').click(function() {shift_to_region($(this).parent().attr('id'));}); $('div#' + regions[i] + ' div.inner').hide('fast'); + $('div#' + regions[i]).addClass('completed'); } } else { $('div#' + regions[i] + ' h2').unbind('click').css('cursor', 'default'); $('div#' + regions[i] + ' div.inner').hide('fast'); - $('div#' + regions[i]).addClass('checkout_disabled'); + $('div#' + regions[i]).addClass('disabled'); } } if (active == 'confirmation') { public/javascripts/checkout.js @@ -313,6 +313,7 @@ div#checkout, div#edit_address :border none :padding 0px :background #FFF + div#edit_address label @@ -326,6 +327,64 @@ div#edit_address :border 1px solid #EAE8E3 div#checkout + #registration + :background transparent url(/images/steps/1.png) top right no-repeat + &.completed,&.disabled + :background-image none + h2 + :background transparent url(/images/steps/1_small.png) top left no-repeat + :padding-left 32px + #billing + :background transparent url(/images/steps/2.png) top right no-repeat + &.completed,&.disabled + :background-image none + h2 + :background transparent url(/images/steps/2_small.png) top left no-repeat + :padding-left 32px + #shipping + :background transparent url(/images/steps/3.png) top right no-repeat + &.completed,&.disabled + :background-image none + h2 + :background transparent url(/images/steps/3_small.png) top left no-repeat + :padding-left 32px + #shipping_method + :background transparent url(/images/steps/4.png) top right no-repeat + &.completed,&.disabled + :background-image none + h2 + :background transparent url(/images/steps/4_small.png) top left no-repeat + :padding-left 32px + #payment + :background transparent url(/images/steps/5.png) top right no-repeat + &.completed,&.disabled + :background-image none + h2 + :background transparent url(/images/steps/5_small.png) top left no-repeat + :padding-left 32px + #confirmation + :background transparent url(/images/steps/6.png) top right no-repeat + &.completed,&.disabled + :background-image none + h2 + :background transparent url(/images/steps/6_small.png) top left no-repeat + :padding-left 32px + .checkout + &.disabled, &.completed + h2 + :color #AFAFAF + :font-size 1.4em + :padding-bottom 10px + :border-bottom 1px solid #ddd + &:last-child + h2 + :border-bottom none + &.completed + h2 + :color #111 + :border-color #999 + label.radio + :display inline .inner :padding 10px .saved_addresses @@ -346,10 +405,6 @@ div#checkout p input#continue_registration, p input#continue_shipping_method, p input#continue_payment, #confirm_order .inner input :cursor pointer :width 100px - h2 - :font-size 1.4em - :padding-bottom 10px - :border-bottom 1px solid #ddd div#bdisplay, div#sdisplay :float left :width 300px @@ -357,11 +412,12 @@ div#checkout div#registration_choice :float left :block none - :width 50% + :margin-bottom 2em + label + :width auto div#registration_input - :float right - :block none - :width 50% + :float left + :margin-left 100px div#guest_user, div#existing_user :display none div#registration_error @@ -371,16 +427,15 @@ div#checkout div#methods p label :margin 0px 0px 10px 5px :top -2px - + form#checkout_form div.inner :display none div#already_logged_in :display none -div.checkout_disabled h2 - :color #AFAFAF - +.form-buttons + :clear both .clear :clear both @@ -468,9 +523,9 @@ button table :border-collapse collapse th - :background #efefef url(/images/buttons/bg-button.png) center left repeat-x !important + :background transparent :padding 10px - :border 1px solid #ccc + :border-bottom 1px solid #ddd &#cart tr td @@ -481,3 +536,13 @@ table :border-bottom none h4 :margin-bottom 0em +.flash + :-moz-border-radius 5px + :-webkit-border-radius 5px + &.notice + :background #cdf url(/images/shadow_top.png) 0 -50px repeat-x + :border 1px solid #9ac + :color #569 + :font-size 1.3em + &.error + :color #900 \ No newline at end of file public/stylesheets/sass/screen.sass 7d3adeb116ef6b52beb33c8e613f31175989929a Wynn Netherland wynn@squeejee.com http://github.com/akitaonrails/spree/commit/a54e2ec8b35b521758134987b32f02063c867cf7 a54e2ec8b35b521758134987b32f02063c867cf7 2009-04-24T10:08:26-07:00 2009-04-24T10:08:26-07:00 Flash messages and checkout styling 7d3f4a10c2ad8ab912edc5adcc7f60826335fad4 Wynn Netherland wynn@squeejee.com