From b8b36b7cc8322c5f3e55aa279cf23fb6c0707cfc Mon Sep 17 00:00:00 2001 From: Godwin Date: Thu, 21 Jul 2016 18:24:38 -0700 Subject: [PATCH] Restyled registration flow steps --- app/assets/stylesheets/_application.scss | 173 +++++++++++++++++- app/controllers/conferences_controller.rb | 10 + app/helpers/application_helper.rb | 15 +- .../conferences/_administration.html.haml | 2 - app/views/conferences/_contact_info.html.haml | 2 - app/views/conferences/_hosting.html.haml | 2 - app/views/conferences/_payment.html.haml | 1 - app/views/conferences/_policy.html.haml | 1 - app/views/conferences/_questions.html.haml | 2 - app/views/conferences/_workshops.html.haml | 2 - app/views/conferences/register.html.haml | 4 +- app/views/workshops/facilitate.html.haml | 1 + .../facilitate_request_sent.html.haml | 1 + app/views/workshops/new.html.haml | 3 + 14 files changed, 195 insertions(+), 24 deletions(-) diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index 7356df2..5014252 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -1178,6 +1178,160 @@ ul.warnings li, } .flow-steps { + width: 100%; + list-style: none; + text-align: center; + font-size: 0.85em; + @include font-family(secondary); + + ul { + @include _-(display, flex); + list-style: none; + margin: 2em 0 5em; + padding: 0; + } + + li { + position: relative; + @include _(flex, 1); + padding-top: 1.5em; + + @include after { + content: ''; + position: absolute; + top: 0; + left: -50%; + width: 100%; + @include _(opacity, 0.5); + border-top: 0.25em dashed #CCC; + } + + &:first-child { + @include after { + left: 0; + width: 50%; + } + } + + &.enabled { + @include after { + border-color: $colour-1; + border-color: rgba($colour-1, 0.5); + } + + &.post { + @include after { + border-color: $colour-1; + border-color: rgba($colour-5, 0.5); + } + } + } + + @include before { + content: ''; + position: absolute; + background-color: #CCC; + @include _(box-shadow, 0 0 0.25rem #CCC); + font-size: 1.3em; + top: -0.2em; + width: 0.55em; + height: 0.55em; + left: 0; + right: 0; + margin: auto; + z-index: 1; + @include _(border-radius, 50%); + } + + &.enabled { + @include after { + border-top-style: solid; + } + + @include before { + background-color: $colour-1; + @include _(box-shadow, 0 0 0.25rem $colour-1); + } + + &.post { + @include before { + background-color: $colour-5; + @include _(box-shadow, 0 0 0.25rem $colour-5); + } + } + + &.current { + // border-width: 0.333em; + + @include before { + top: -0.25em; + font-size: 3em; + background-color: $white; + border: 0.075em solid $colour-1; + // border-width: 0 0.075em; + // width: 0.575em; + } + + // @include after { + // content: ''; + // position: absolute; + // top: 0; + // right: 0; + // left: 0; + // margin: auto; + // background-color: $colour-2; + // width: 0.5em; + // height: 0.5em; + // } + + &.post { + @include before { + border-color: $colour-5; + } + } + } + } + } + + .step { + color: #CCC; + position: absolute; + @include _(transform-origin, 0 50%); + @include _(transform, rotate(45deg)); + text-align: left; + top: 0.5em; + left: 50%; + white-space: nowrap; + } + + a { + position: static; + color: inherit; + @include _(color, 0.5); + @include _(transition, color 150ms ease-in-out); + + @include before { + content: ''; + position: absolute; + top: -1em; + right: 0; + bottom: 0; + left: 0; + } + + @include after { + display: none; + } + } + + .current .step, + a:hover, + a:focus { + color: $black; + } +} + +/*.flow-steps { ul { display: block; position: relative; @@ -1277,7 +1431,7 @@ ul.warnings li, } } } -} +}*/ #main article #registration-admin-menu { margin: 1em 0 0; @@ -3785,9 +3939,22 @@ html[data-ontop] { min-width: 12em; } } + + .flow-steps { + ul { + margin-bottom: 1em; + } + + .step { + position: static; + text-align: center; + white-space: normal; + @include _(transform, none); + } + } } -@media (min-width: 825px) { +/*@media (min-width: 825px) { .flow-steps { #registration-steps { li { @@ -3840,7 +4007,7 @@ html[data-ontop] { text-align: center; } } -} +}*/ @include breakpoint(large) { #main-nav { diff --git a/app/controllers/conferences_controller.rb b/app/controllers/conferences_controller.rb index 4e54a48..fa6587b 100644 --- a/app/controllers/conferences_controller.rb +++ b/app/controllers/conferences_controller.rb @@ -717,6 +717,9 @@ class ConferencesController < ApplicationController case @register_template when :questions @registration.housing_data ||= { } + @page_title = 'articles.conference_registration.headings.Registration_Info' + when :payment + @page_title = 'articles.conference_registration.headings.Payment' when :workshops @page_title = 'articles.conference_registration.headings.Workshops' @@ -1386,6 +1389,7 @@ class ConferencesController < ApplicationController @translations_available_for_editing << locale if @workshop.can_translate?(current_user, locale) end @page_title = 'page_titles.conferences.View_Workshop' + @register_template = :workshops render 'workshops/show' end @@ -1397,6 +1401,7 @@ class ConferencesController < ApplicationController @languages = [I18n.locale.to_sym] @needs = [] @page_title = 'page_titles.conferences.Create_Workshop' + @register_template = :workshops render 'workshops/new' end @@ -1405,6 +1410,7 @@ class ConferencesController < ApplicationController @translation = params[:locale] @page_title = 'page_titles.conferences.Translate_Workshop' @page_title_vars = { language: view_context.language_name(@translation) } + @register_template = :workshops edit_workshop end @@ -1439,6 +1445,7 @@ class ConferencesController < ApplicationController @space = @workshop.space.to_sym if @workshop.space @theme = @workshop.theme.to_sym if @workshop.theme @notes = @workshop.notes + @register_template = :workshops render 'workshops/new' end @@ -1462,6 +1469,7 @@ class ConferencesController < ApplicationController end return redirect_to view_workshop_url(@this_conference.slug, @workshop.id) end + @register_template = :workshops render 'workshops/delete' end @@ -1565,6 +1573,7 @@ class ConferencesController < ApplicationController return do_404 unless @workshop return do_403 if @workshop.facilitator?(current_user) || !current_user + @register_template = :workshops render 'workshops/facilitate' end @@ -1594,6 +1603,7 @@ class ConferencesController < ApplicationController return do_404 unless @workshop return do_403 unless @workshop.requested_collaborator?(current_user) + @register_template = :workshops render 'workshops/facilitate_request_sent' end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 6080af1..20d42a2 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -851,7 +851,12 @@ module ApplicationHelper steps.each do | step | text = _"articles.conference_registration.headings.#{step[:name].to_s}" - h = content_tag :li, class: [step[:enabled] ? :enabled : nil, @register_template == step[:name] ? :current : nil] do + + if step[:name] == :workshops + post_registration = true + end + + h = content_tag :li, class: [step[:enabled] ? :enabled : nil, @register_template == step[:name] ? :current : nil, post_registration ? :post : :pre].compact do if step[:enabled] content_tag :div, (link_to text, register_step_path(@this_conference.slug, step[:name])).html_safe, class: :step else @@ -859,10 +864,6 @@ module ApplicationHelper end end - if step[:name] == :workshops - post_registration = true - end - if post_registration post_registration_steps += h.html_safe else @@ -874,9 +875,7 @@ module ApplicationHelper row class: 'flow-steps' do columns do (content_tag :ul, id: 'registration-steps' do - pre_registration_steps.html_safe - end).html_safe + - (content_tag :ul, id: 'post-registration-steps' do + pre_registration_steps.html_safe + post_registration_steps.html_safe end).html_safe end diff --git a/app/views/conferences/_administration.html.haml b/app/views/conferences/_administration.html.haml index c73d783..03a90b0 100644 --- a/app/views/conferences/_administration.html.haml +++ b/app/views/conferences/_administration.html.haml @@ -1,5 +1,3 @@ -= columns(medium: 12) do - %h2=_(@page_title) = columns(medium: 3, large: 2) do = admin_menu = columns(medium: 9, large: 10) do diff --git a/app/views/conferences/_contact_info.html.haml b/app/views/conferences/_contact_info.html.haml index 82751ae..137dae2 100644 --- a/app/views/conferences/_contact_info.html.haml +++ b/app/views/conferences/_contact_info.html.haml @@ -1,7 +1,5 @@ = columns(medium: 12) do - %h2=_(@page_title) %p=_'articles.conference_registration.paragraphs.Contact_Info', :s, 2 -= columns(medium: 12) do = form_tag register_path(@this_conference.slug) do = textfield :name, @name, required: true, heading: 'articles.conference_registration.headings.name', big: true = textfield :location, (params[:location] || @registration.city || location(lookup_ip_location)), required: true, heading: 'articles.conference_registration.headings.location' diff --git a/app/views/conferences/_hosting.html.haml b/app/views/conferences/_hosting.html.haml index 0de289c..80abb8e 100644 --- a/app/views/conferences/_hosting.html.haml +++ b/app/views/conferences/_hosting.html.haml @@ -1,5 +1,3 @@ -= columns(medium: 12) do - %h2=_(@page_title) = columns(medium: 12) do = form_tag register_path(@this_conference.slug) do = checkbox :can_provide_housing, @registration.can_provide_housing, 'articles.conference_registration.can_provide_housing', heading: 'articles.conference_registration.headings.can_provide_housing', help: 'articles.conference_registration.paragraphs.can_provide_housing', inline: true, toggles: 'hosting-options', centered: true diff --git a/app/views/conferences/_payment.html.haml b/app/views/conferences/_payment.html.haml index 4069e68..f319875 100644 --- a/app/views/conferences/_payment.html.haml +++ b/app/views/conferences/_payment.html.haml @@ -1,5 +1,4 @@ = columns(medium: 12) do - %h2=_'articles.conference_registration.headings.Payment' - if @registration.registration_fees_paid.present? %p %strong=_'articles.conference_registration.paragraphs.Payment_Made', :p, vars: { fees_paid: @registration.registration_fees_paid } diff --git a/app/views/conferences/_policy.html.haml b/app/views/conferences/_policy.html.haml index a2aef04..8a67c29 100644 --- a/app/views/conferences/_policy.html.haml +++ b/app/views/conferences/_policy.html.haml @@ -1,5 +1,4 @@ = columns(medium: 12) do - %h2=_@page_title %p=_'articles.conference_registration.paragraphs.Policy_Agreement', :s, 2 = columns(medium: 10, push: 1) do = render 'application/policy' diff --git a/app/views/conferences/_questions.html.haml b/app/views/conferences/_questions.html.haml index 48366d5..ca9b29e 100644 --- a/app/views/conferences/_questions.html.haml +++ b/app/views/conferences/_questions.html.haml @@ -1,5 +1,3 @@ -= columns(medium: 12) do - %h2=_'articles.conference_registration.headings.Registration_Info' = columns(medium: 12) do %p=_'articles.conference_registration.paragraphs.Registration_Info', :p, vars: { city: @this_conference.location.city } = form_tag register_path(@this_conference.slug), class: [:centered, :clearfix] do diff --git a/app/views/conferences/_workshops.html.haml b/app/views/conferences/_workshops.html.haml index 6c728c1..a40b2fd 100644 --- a/app/views/conferences/_workshops.html.haml +++ b/app/views/conferences/_workshops.html.haml @@ -1,5 +1,3 @@ -= columns(medium: 12) do - %h2=_@page_title = columns(medium: 12, class: 'major-group') do - if @my_workshops.present? %h3=_'articles.conference_registration.headings.Your_Workshops' diff --git a/app/views/conferences/register.html.haml b/app/views/conferences/register.html.haml index a88d7b3..ebc425d 100644 --- a/app/views/conferences/register.html.haml +++ b/app/views/conferences/register.html.haml @@ -1,5 +1,4 @@ = render :partial => 'page_header', :locals => {:page_key => 'Conference_Registration'} -= registration_step_menu - if @warnings.present? = row class: 'warnings', tag: :ul do @@ -8,4 +7,7 @@ = warning %article = row do + = columns(medium: 12) do + %h2=_(@page_title) + = registration_step_menu = render @register_template.to_s diff --git a/app/views/workshops/facilitate.html.haml b/app/views/workshops/facilitate.html.haml index 1f0c590..8e4acb7 100644 --- a/app/views/workshops/facilitate.html.haml +++ b/app/views/workshops/facilitate.html.haml @@ -5,6 +5,7 @@ = (hidden_field_tag :workshop_id, @workshop.id) if @workshop = columns(medium: 12) do %h2=_'articles.workshops.headings.facilitate', "Request to Facilitate ‘#{@workshop.title}’", :vars => { :workshop_title => @workshop.title } + = registration_step_menu =m('articles.workshops.paragraphs.facilitate_request','Please tell the current workshop facilitators who you are, why you want to help facilitate the workshop, and how you think you will help make the workshop better. All of the current facilitators will be emailed and they may ask more questions before approving or denying your request. Please note that this will reveal your email address to the facilitators.') .text-area-field.input-field = label_tag :message diff --git a/app/views/workshops/facilitate_request_sent.html.haml b/app/views/workshops/facilitate_request_sent.html.haml index e58b485..31dfde3 100644 --- a/app/views/workshops/facilitate_request_sent.html.haml +++ b/app/views/workshops/facilitate_request_sent.html.haml @@ -3,6 +3,7 @@ %article = row do %h2=_'page_titles.conferences.Facilitate_Workshop' + = registration_step_menu = columns(medium: 12) do =m('articles.workshops.paragraphs.facilitate_request_sent','Your request has been sent. You will receive an email once your request is approved or denied or if the current facilitators have any questions.') = columns(medium: 12) do diff --git a/app/views/workshops/new.html.haml b/app/views/workshops/new.html.haml index 7cd60cc..7345843 100644 --- a/app/views/workshops/new.html.haml +++ b/app/views/workshops/new.html.haml @@ -13,6 +13,9 @@ %h2=_@page_title, :t - else %h2=_@page_title, :t + + = registration_step_menu + = textfield :title, @title, required: true, lang: @translation, big: true, original_value: @is_translating ? @workshop.title! : nil, original_lang: @workshop.locale = textarea :info, @info, help: 'articles.workshops.paragraphs.info', lang: @translation, original_value: @is_translating ? richtext(@workshop.info!, 4).html_safe : nil, original_lang: @workshop.locale - if !@is_translating && (@workshop.id.blank? || @can_edit)