Created helper for checkbox and radio button groups

app/assets/stylesheets/_application.scss

@@ -488,6 +488,20 @@ input {
 				background-color: $colour-3;
 			}
 		}
+
+		&[type="radio"] + label {
+			@include after {
+				content: '+';
+				border: 0;
+				font-size: 2.5em;
+				top: -0.125em;
+				left: 0.05em;
+				line-height: 1em;
+				color: #FFF;
+				height: 1em;
+				width: 1em;
+			}
+		}
 	}
 
 	.other {
@@ -516,25 +530,6 @@ input {
 	font-size: 0.75em;
 }
 
-// .check-box-field {
-// 	label {
-// 		color: $white;
-// 		font-weight: normal;
-// 		@include font-family(secondary);
-// 		@include _(text-stroke, 0.5px #000);
-
-// 		@include before {
-// 			font-size: 0.6em;
-// 			bottom: -0.8em;
-// 		}
-
-// 		@include after {
-// 			font-size: 0.3em;
-// 			bottom: -0.5em;
-// 		}
-// 	}
-// }
-
 .radio-button-field {
 	label {
 		width: 7em;
@@ -585,6 +580,29 @@ form {
 			height: 16em;
 		}
 	}
+
+	&.mini-flex-form {
+		display: flex;
+		align-items: flex-start;
+
+		.input-field {
+			flex: 1;
+		}
+
+		button, .button {
+			margin-left: 1em;
+			height: 2.6em;
+		}
+	}
+}
+
+fieldset {
+	padding: 0;
+	border: 0;
+}
+
+.view-object {
+	margin-bottom: 3em;
 }
 
 .flex-form, .flex-column {
@@ -628,8 +646,13 @@ form {
 
 	&.next-prev {
 		display: flex;
+		flex-wrap: wrap;
 		flex-direction: row-reverse;
 		margin: 0;
+
+		button, .button {
+			margin-bottom: 1em;
+		}
 	}
 }
 
@@ -1219,11 +1242,23 @@ $header-tilt: 8deg;
 	}
 }
 
+@include keyframes(colour-out) {
+	to {
+		background-color: transparent;
+	}
+}
+
 body :focus,
-input[type="submit"]:focus,
+input[type="submit"]:focus {
+	@include _(animation, fade-out ease-in-out 500ms infinite alternate both);
+}
+
 .check-box-field input:focus + label,
 .radio-button-field input:focus + label {
-	@include _(animation, fade-out ease-in-out 500ms infinite alternate both);
+	@include before {
+		background-color: $colour-2;
+		@include _(animation, colour-out ease-in-out 500ms infinite alternate both);
+	}
 }
 
 body {

app/helpers/application_helper.rb

@@ -734,6 +734,73 @@ module ApplicationHelper
 		return html.html_safe
 	end
 
+	def radiobuttons(name, boxes, value, label_key, options = {})
+		checkboxes(name, boxes, [value], label_key, options.merge({radiobuttons: true}))
+	end
+
+	def checkboxes(name, boxes, values, label_key, options = {})
+		html = ''
+
+		label_id = nil
+		description_id = nil
+
+		if options[:heading].present?
+			label_id ||= "#{name.to_s}-label"
+			html += content_tag(:h3, _(options[:heading]), id: label_id)
+		end
+
+		if options[:help].present?
+			description_id ||= "#{name.to_s}-desc"
+			html += content_tag(:div, _(options[:help], :s, 2), class: 'input-field-help', id: description_id)
+		end
+
+		boxes_html = ''
+
+		values = values.present? ? values.map(&:to_s) : []
+		boxes = boxes.map(&:to_s)
+		boxes.each do | box |
+			checked = values.include?(box)
+			values -= [box] if checked
+			id = nil
+			if options[:radiobuttons].present?
+				id = "#{name.to_s}_#{box}"
+				boxes_html += radio_button_tag(name, box, checked)
+			else
+				id = "#{name.to_s}[#{box}]"
+				boxes_html += check_box_tag(id, 1, checked)
+			end
+			boxes_html += label_tag(id, _("#{label_key.to_s}.#{box}"))
+		end
+
+		if options[:other].present?
+			id = nil
+			if options[:radiobuttons].present?
+				id = "#{name.to_s}_other"
+				boxes_html += radio_button_tag(name, :other, values.present?)
+			else
+				id = "#{name.to_s}[other]"
+				boxes_html += check_box_tag(id, 1, values.present?)
+			end
+			boxes_html += label_tag id,
+				content_tag(:div,
+					text_field_tag("other_#{name.to_s}", values.first, placeholder: (_"#{label_key}.other"), required: values.present?),
+					class: 'other')
+		end
+
+		html += content_tag(:fieldset, boxes_html.html_safe,
+				aria: {
+					labeledby: label_id,
+					describedby: description_id
+				},
+				class: [
+					'check-box-field',
+					'input-field',
+					options[:vertical] ? 'vertical' : nil
+			])
+
+		return html.html_safe
+	end
+
 	private
 		def _original_content(value, lang)
 			content_tag(:div, (

app/views/workshops/_show.html.haml

@@ -1,4 +1,4 @@
-= row do
+= row class: 'view-object' do
 	= columns(medium: 12) do
 		%h2=_!workshop.title
 		.workshop-interest
@@ -30,11 +30,10 @@
 							- elsif preview.blank? && (f.user_id == current_user.id && f.role.to_sym != :creator) || (!workshop.conference.registered?(u) && workshop.active_facilitator?(current_user))
 								=(link_to (_'actions.workshops.Remove'), approve_facilitate_workshop_request_path(workshop.conference.slug, workshop.id, f.user_id, 'remove'), :class => [:button, :delete])
 			- unless preview.present?
-				.actions
 				=(link_to (_'actions.workshops.Facilitate'), facilitate_workshop_path(workshop.conference.slug, workshop.id), :class => [:button, workshop.needs_facilitators ? :accented : :subdued]) unless workshop.facilitator?(current_user)
 				- if workshop.active_facilitator?(current_user)
 					%h4=_'articles.workshops.headings.add_facilitator','Add a facilitator'
-						= form_tag workshop_add_facilitator_path(workshop.conference.slug, workshop.id), :class => 'add-facilitator flex-form' do
+					= form_tag workshop_add_facilitator_path(workshop.conference.slug, workshop.id), :class => 'add-facilitator mini-flex-form' do
 						.email-field.input-field
 							= email_field_tag :email, nil, required: true
 							= label_tag :email

app/views/workshops/new.html.haml

@@ -23,43 +23,12 @@
 				= 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)
 				= columns(medium: 6) do
-					%h3=_'articles.workshops.headings.languages','Workshop Language'
+					= checkboxes :languages, [:en, :es, :fr], @languages, 'languages', vertical: true, heading: 'articles.workshops.headings.languages', help: 'articles.workshops.paragraphs.languages'
-					.input-field-help=_'articles.workshops.paragraphs.languages', :s, 2
+					= radiobuttons :theme, Workshop.all_themes, @workshop.theme, 'workshop.options.theme', vertical: true, heading: 'articles.workshops.headings.theme', help: 'articles.workshops.paragraphs.theme', other: true
-					.check-box-field.vertical.input-field
-						- [:en, :es, :fr].each do |language|
-							= check_box_tag "languages[#{language}]", 1, @languages && @languages.include?(language)
-							= label_tag "languages_#{language}" do
-								= _"languages.#{language}"
-					%h3=_'articles.workshops.headings.theme','Theme'
-					.input-field-help=_'articles.workshops.paragraphs.theme', :s, 2
-					- theme_found = false
-					.check-box-field.vertical.input-field
-						- Workshop.all_themes.each do |theme|
-							- is_selected = (@workshop.theme.to_s == theme.to_s)
-							- theme_found ||= is_selected
-							= radio_button_tag :theme, theme, is_selected
-							= label_tag "theme_#{theme}" do
-								= _"workshop.options.theme.#{theme}"
-						- is_other = (@workshop.theme.present? && !theme_found)
-						= radio_button_tag :theme, :other, is_other
-						= label_tag "theme_other" do
-							.other
-								= text_field_tag :other_theme, (is_other ? @workshop.theme : nil), placeholder: (_"workshop.options.theme.other"), required: is_other
 				= columns(medium: 6) do
-					%h3=_'articles.workshops.headings.needs','What do you need?'
+					= checkboxes :needs, [:sound, :projector, :tools], JSON.parse(@workshop.needs || '[]'), 'workshop.options.needs', vertical: true, heading: 'articles.workshops.headings.needs', help: 'articles.workshops.paragraphs.needs'
-					.input-field-help=_'articles.workshops.paragraphs.needs', :s, 2
+					= radiobuttons :space, [:meeting_room, :workshop, :outdoor_meeting], @workshop.space, 'workshop.options.space', vertical: true, heading: 'articles.workshops.headings.space', help: 'articles.workshops.paragraphs.space'
-					.check-box-field.vertical.input-field
+					
-						- [:sound, :projector, :tools].each do |need|
-							= check_box_tag "needs[#{need.to_s}]", 1, JSON.parse(@workshop.needs || '[]').include?(need.to_s)
-							= label_tag "needs_#{need}" do
-								= _"workshop.options.needs.#{need.to_s}"
-					%h3=_'articles.workshops.headings.space','Type of space'
-					.input-field-help=_'articles.workshops.paragraphs.space', :s, 2
-					.check-box-field.vertical.input-field
-						- [:meeting_room, :workshop, :outdoor_meeting].each do |space|
-							= radio_button_tag :space, space, @workshop.space == space
-							= label_tag "space_#{space}" do
-								= _"workshop.options.space.#{space}"
 					%h3=_'articles.workshops.headings.needs_facilitators','Looking for help?'
 					.input-field-help=_'articles.workshops.paragraphs.needs_facilitators', :s, 2
 					.check-box-field.vertical.input-field

app/views/workshops/show.html.haml

@@ -15,6 +15,6 @@
 	= render 'workshops/show', :workshop => @workshop, :translations_available_for_editing => @translations_available_for_editing, :preview => false
 	= row do
 		= columns(medium: 12) do
-			.actions.right
+			.actions.next-prev
 				= (link_to (_'actions.workshops.Edit'), edit_workshop_path(@this_conference.slug, @workshop.id), :class => [:button, :modify]) if @workshop.can_edit?(current_user)
 				= (link_to (_'actions.workshops.Delete'), delete_workshop_path(@this_conference.slug, @workshop.id), :class => 'button delete') if @workshop.can_delete?(current_user)