Restyled registration flow steps

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 {

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
 

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

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

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'

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

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 }

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'

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

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'

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

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

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

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)