Contact us page and popup

app/assets/javascripts/main.js

@@ -63,7 +63,7 @@
 			}
 			primaryContent.setAttribute('aria-hidden', 'true');
 			document.getElementById('overlay').onclick =
-				dlg.querySelector('.close').onclick = function() { closeDlg(dlg); };
+				dlg.querySelector('.close').onclick = function() { console.log('overlay'); closeDlg(dlg); };
 			body.classList.add('has-overlay');
 			dlg.removeAttribute('aria-hidden');
 			dlg.setAttribute('role', 'alertdialog');
@@ -106,6 +106,13 @@
 				return false;
 			});
 		});
+		var contactDlg = document.getElementById('contact-dlg');
+		var contactLink = document.getElementById('contact-link');
+		contactLink.addEventListener('click', function(event) {
+			event.preventDefault();
+			openDlg(contactDlg, contactLink);
+			return false;
+		});
 	}
 	
 	var htmlNode = document.documentElement;

app/assets/stylesheets/_application.scss

@@ -268,7 +268,8 @@ textarea, .textarea {
 	display: block;
 	width: 100%;
 	min-height: 15em;
-	font-size: 1em;
+	font-size: 1.25em;
+	line-height: 1.5em;
 	margin: 1em 0;
 	padding: 0.75em;
 	border: 0.1rem solid #E8E8E8;
@@ -637,6 +638,17 @@ input {
 
 .check-box-field.inline {
 	display: inline-block;
+
+	label {
+		float: left;
+		min-width: 7.5em;
+	}
+
+	&.vertical {
+		label {
+			float: none;
+		}
+	}
 }
 
 .check-box-field.small {
@@ -647,6 +659,10 @@ input {
 	}
 }
 
+.check-box-field.big {
+	font-size: 1em;
+}
+
 .radio-button-field {
 	label {
 		width: 7em;
@@ -1928,15 +1944,14 @@ $header-tilt: 8deg;
 		font-size: 4.1vw;
 	}
 
-	.github {
-		@include _(flex, 1);
-		@include _(flex-basis, 50%);
-	}
+	// .github {
+	// 	@include _(flex, 1);
+	// 	@include _(flex-basis, 50%);
+	// }
 
-	.site-info {
-		@include clearfix;
-		text-align: center;
+	.site-info, .user-controls, .external {
 		width: 100%;
+		text-align: center;
 
 		a {
 			text-align: right;
@@ -1945,12 +1960,34 @@ $header-tilt: 8deg;
 		}
 	}
 
-	.user-controls {
+	.external {
+		margin-bottom: 1em;
+	}
+
+	.my-account {
+		margin-right: 0.5em;
+	}
+
+	.logout {
+		margin-left: 0.5em;
+	}
+
+	.contact-us {
 		line-height: 2.5em;
 	}
 
 	.facebook {
-		@include _(flex, none);
+		a {
+			&:hover, &:active, &:focus {
+				svg {
+					fill: #3B579D;
+				}
+			}
+		}
+	}
+
+	.github, .facebook {
+		display: inline-block;
 		margin: 0.5em;
 
 		a {
@@ -1960,15 +1997,8 @@ $header-tilt: 8deg;
 			svg {
 				@include _(transition, fill 250ms ease-in-out);
 			}
-			&:hover, &:active, &:focus {
-				svg {
-					fill: #3B579D;
-				}
-			}
-		}
 		}
 
-	.github, .facebook {
 		.icons {
 			width: 1.5em;
 			height: 1.5em;
@@ -1978,26 +2008,31 @@ $header-tilt: 8deg;
 	}
 
 	.github {
-		position: relative;
-		background-color: $white;
-		@include _(border-radius, 0.25em);
-		border: 0.1em solid #DDD;
-		padding: 0.5em 0.5em 0.5em 2em;
-		text-align: center;
-		z-index: $zindex-base + 2;
-
+		//position: relative;
+		//background-color: $white;
+		//@include _(border-radius, 0.25em);
+		//border: 0.1em solid #DDD;
+		//padding: 0.5em 0.5em 0.5em 2em;
+		//text-align: center;
+		//z-index: $zindex-base + 2;
+
+		//a {
+		//	margin: 0 0.5em;
+		//	font-size: 0.8em;
+		//	font-weight: bold;
+		//	color: inherit;
+		//}
+
+		//.icons {
+		//	position: absolute;
+		//	left: 0.5em;
+		//	top: 0.45em;
+		//	@include _(transition, 150ms fill ease-in-out);
+		//}
 		a {
-			margin: 0 0.5em;
-			font-size: 0.8em;
-			font-weight: bold;
-			color: inherit;
+			@include after {
+				display: none;
 			}
-
-		.icons {
-			position: absolute;
-			left: 0.5em;
-			top: 0.45em;
-			@include _(transition, 150ms fill ease-in-out);
 		}
 
 		&:hover .icons {
@@ -3100,6 +3135,11 @@ html[data-lingua-franca-example="html"] {
 			@include _(box-shadow, none);
 		}
 	}
+
+	&.full select {
+		width: 100%;
+		margin-bottom: 2em;
+	}
 }
 
 .toggleable {
@@ -3570,13 +3610,14 @@ html[data-ontop] {
 		.github {
 			@include _(flex, none);
 			@include _(flex-basis, auto);
+			margin: 0 1em;
 			//bottom: 0.5em;
-			float: left;
-			margin-right: 1em;
-			margin-left: 1em;
-			margin-bottom: -0.3333em;
+			//float: left;
+			//margin-right: 1em;
+			//margin-left: 1em;
+			//margin-bottom: -0.3333em;
 		}
-		.facebook {
+		.facebook, .external {
 			margin: 0;
 		}
 
@@ -3585,11 +3626,15 @@ html[data-ontop] {
 			text-align: right;
 		}
 
+		.site-info, .user-controls, .external {
+			width: auto;
+		}
+
 		ul.locales {
 			@include _(flex, none);
 			@include _(flex-basis, auto);
 			@include _(flex-grow, 1);
-			margin: 0 0 0.25em 1em;
+			margin: 0 0 0 2em;
 			text-align: left;
 		}
 	}
@@ -3679,7 +3724,8 @@ html[data-ontop] {
 		overflow: visible;
 		padding: 0;
 		width: 100%;
-		height: 4.5em;
+		margin-bottom: 1em;
+		//height: 4.5em;
 
 		footer {
 			max-width: $row-width;

app/controllers/application_controller.rb

@@ -225,6 +225,50 @@ class ApplicationController < LinguaFrancaApplicationController
 		@main_title = @page_title = 'page_titles.user_settings.Your_Account'
 	end
 
+	def contact
+		@main_title = @page_title = 'page_titles.contact.Contact_Us'
+	end
+
+	def contact_send
+		email_list = ['Godwin <goodgodwin@hotmail.com>']
+		
+		if params[:reason] == 'conference'
+
+			@conference.organizations.each do | org |
+				org.users.each do | user |
+					email_list << user.named_email
+				end
+			end
+		end
+
+		UserMailer.send_mail(:contact) do 
+			[
+				current_user || params[:email],
+				params[:subject],
+				params[:message],
+				email_list
+			]
+		end
+
+		UserMailer.send_mail(:contact_details) do 
+			[
+				current_user || params[:email],
+				params[:subject],
+				params[:message],
+				request,
+				params
+			]
+		end
+
+		redirect_to contact_sent_path
+	end
+
+	def contact_sent
+		@main_title = @page_title = 'page_titles.contact.Contact_Us'
+		@sent = true
+		render 'contact'
+	end
+
 	def update_user_settings
 		return do_403 unless logged_in?
 		current_user.firstname = params[:name]

app/helpers/application_helper.rb

@@ -778,6 +778,15 @@ module ApplicationHelper
 		selectfield :time_span, value, lengths, args
 	end
 
+	def contact_reason_select
+		reasons = []
+		[:website, :conference].each do | reason |
+			reasons << [ _("forms.labels.generic.reasons.#{reason.to_s}"), reason ]
+		end
+		[['Something about the website', :website]]
+		selectfield :reason, nil, reasons, required: true, heading: 'articles.contact.headings.reason', label: false, full: true
+	end
+
 	def block_select(value = nil, args = {})
 		blocks = {}
 		@workshop_blocks.each_with_index do | info, block |
@@ -978,6 +987,11 @@ module ApplicationHelper
 		description_id = nil
 		html = ''
 
+		if options[:heading].present?
+			label_id = "#{name.to_s}-label" unless options[:label]
+			html += content_tag(:h3, _(options[:heading], :t, vars: options[:vars] || {}), id: label_id)
+		end
+
 		if options[:label] == false
 			label_id = options[:labelledby]
 		elsif options[:label].present?
@@ -1128,6 +1142,7 @@ module ApplicationHelper
 					options[:big] ? 'big' : nil,
 					options[:small] ? 'small' : nil,
 					options[:stretch] ? 'stretch-item' : nil,
+					options[:full] ? 'full' : nil,
 					(@errors || {})[name].present? ? 'has-error' : nil
 			])
 
@@ -1233,7 +1248,8 @@ module ApplicationHelper
 					'input-field',
 					options[:vertical] ? 'vertical' : nil,
 					options[:inline] ? 'inline' : nil,
-					options[:small] ? 'small' : nil
+					options[:small] ? 'small' : nil,
+					options[:big] ? 'big' : nil
 				].compact).html_safe,
 				aria: {
 					labeledby: label_id,

app/mailers/user_mailer.rb

@@ -184,6 +184,22 @@ class UserMailer < ActionMailer::Base
 		mail to: 'goodgodwin@hotmail.com', subject: @subject
 	end
 
+	def contact(from, subject, message, email_list)
+		@message = message
+		@from = from
+
+		mail to: email_list.join(', '), subject: @subject, reply_to: from.is_a?(User) ? from.named_email : from
+	end
+
+	def contact_details(from, subject, message, request, params)
+		@message = message
+		@from = from
+		@request = request
+		@params = params
+
+		mail to: 'goodgodwin@hotmail.com', subject: @subject
+	end
+
 	private
 	def set_host(*args)
 		if Rails.env.production?

app/models/conference_registration.rb

@@ -8,4 +8,16 @@ class ConferenceRegistration < ActiveRecord::Base
 	def languages
 		user.languages
 	end
+
+	def self.all_housing_options
+		[:none, :tent, :house]
+	end
+
+	def self.all_bike_options
+		[:yes, :no]
+	end
+
+	def self.all_food_options
+		[:meat, :vegetarian, :vegan]
+	end
 end

app/views/application/_contact.html.haml

@@ -0,0 +1,9 @@
+= form_tag contact_send_path do
+	= emailfield :email, nil, big: true, required: true unless logged_in?
+	= contact_reason_select
+	= textfield :subject, nil, required: true, big: true
+	= textarea :message, nil, required: true, plain: true
+	.actions
+		= button_tag :send, value: :send
+		- if cancel_btn
+			%button.close.subdued=_'forms.actions.generic.cancel'

app/views/application/contact.html.haml

@@ -0,0 +1,10 @@
+= render :partial => 'application/header', :locals => {:image_file => @banner_image || 'grafitti.jpg'}
+%article
+	= row do
+		= columns do
+			- if @sent
+				%h2=_'articles.contact.headings.sent', :t
+				%p=_'articles.contact.paragraphs.sent', :p
+			- else
+				%h2=_'articles.contact.headings.contact'
+				= render 'contact', cancel_btn: false

app/views/conferences/_questions.html.haml

@@ -1,72 +1,13 @@
 = columns(medium: 12) do
-	%h2=_'articles.conference_registration.headings.Registration_Info','Registration Info'
-= columns(medium: 5, large: 4) do
+	%h2=_'articles.conference_registration.headings.Registration_Info'
+= columns(medium: 12) do
 	%p=_'articles.conference_registration.paragraphs.Registration_Info', :p
-= columns(medium: 7, large: 8) do
 = form_tag register_path(@this_conference.slug) do
-		%h3=_'articles.conference_registration.headings.name','What is your name?'
-		.text-field.input-field
-			= label_tag :name
-			= text_field_tag :name, @name, required: true
-		%h3=_'articles.conference_registration.headings.location','Where are you coming from?'
-		.text-field.input-field
-			= label_tag :location
-			= text_field_tag :location, @registration.city, required: true
-		%h3=_'articles.conference_registration.headings.arrival_and_departure','How long do you plan to spend in the area?'
-		.date-span.input-field
-			.date-labels
-				= label_tag :arrival
-				= label_tag :departure
-			.date-field.input-field
-				= datetime_local_field_tag :arrival, @registration.arrival.strftime("%Y-%m-%dT%T")
-				= datetime_local_field_tag :departure, @registration.departure.strftime("%Y-%m-%dT%T")
-		%h3=_'articles.conference_registration.headings.languages','Which languages do you speak?'
-		.check-box-field.input-field
-			- [:en, :es, :fr].each do |language|
-				= check_box_tag "languages[#{language}]", 1, @languages.include?(language)
-				= label_tag "languages_#{language}" do
-					= _"languages.#{language}"
-		%h3=_'articles.conference_registration.headings.housing','Do you need a place to stay?'
-		.radio-button-field.input-field
-			- [:none, :tent, :house].each do |option|
-				= radio_button_tag :housing, option, (@registration.housing || '').to_sym == option, required: true
-				= label_tag "housing_#{option}" do
-					- option_name = _"articles.conference_registration.questions.housing.#{option}"
-					= svg_sprite('icons', "bb-#{option}", option_name)
-					= option_name
-		%h3=_'articles.conference_registration.headings.bike','Do you need a bike?'
-		.radio-button-field.input-field
-			- [:none, :small, :medium, :large].each do |option|
-				= radio_button_tag :bike, option, (@registration.bike || '').to_sym == option, required: true
-				= label_tag "bike_#{option}" do
-					- option_name = _"articles.conference_registration.questions.bike.#{option}"
-					= svg_sprite('icons', "bb-#{option == :none ? :none : :bike}", option_name)
-					= option_name
-		%h3=_'articles.conference_registration.headings.food','What are your eating habits?'
-		.radio-button-field.input-field
-			= radio_button_tag :food, :meat, (@registration.food || '').to_sym == :meat, required: true
-			= label_tag :food_meat do
-				- option_name = _"articles.conference_registration.questions.food.meat"
-				= svg_sprite('icons', 'bb-meat', option_name)
-				= option_name
-			= radio_button_tag :food, :vegetarian, (@registration.food || '').to_sym == :vegetarian, required: true
-			= label_tag :food_vegetarian do
-				- option_name = _"articles.conference_registration.questions.food.vegetarian"
-				= svg_sprite('icons', 'bb-meat', 'meat')
-				= svg_sprite('icons', 'bb-none', option_name)
-				= option_name
-			= radio_button_tag :food, :vegan, (@registration.food || '').to_sym == :vegan, required: true
-			= label_tag :food_vegan do
-				- option_name = _"articles.conference_registration.questions.food.vegan"
-				= svg_sprite('icons', 'bb-milk', 'milk')
-				= svg_sprite('icons', 'bb-none', option_name)
-				= option_name
-		%h3=_'articles.conference_registration.headings.allergies','Do you have any allergies?'
-		.text-field.input-field
-			= label_tag :allergies
-			= text_field_tag :allergies, @registration.allergies
-		%h3=_'articles.conference_registration.headings.other','Anything else we should know about your visit?'
-		.select-field.input-field
-			= label_tag :other
-			= text_area_tag :other, @registration.other
+	= columns(medium: 12) do
+		= radiobuttons :housing, ConferenceRegistration.all_housing_options, @registration.housing, 'articles.conference_registration.questions.housing', heading: 'articles.conference_registration.headings.housing', vertical: true, big: true, inline: true
+		= radiobuttons :bike, ConferenceRegistration.all_bike_options, @registration.bike, 'articles.conference_registration.questions.bike', heading: 'articles.conference_registration.headings.bike', inline: true, big: true
+		= radiobuttons :food, ConferenceRegistration.all_food_options, @registration.food, 'articles.conference_registration.questions.food', heading: 'articles.conference_registration.headings.food', inline: true, big: true
+	= columns(medium: 12) do
+		= textfield :allergies, @registration.allergies, heading: 'articles.conference_registration.headings.allergies'
+		= textarea :other, @registration.other, plain: true, heading: 'articles.conference_registration.headings.other'
 		= button_tag :register, :value => :save

app/views/layouts/application.html.haml

@@ -40,9 +40,12 @@
 					= yield
 			#footer
 				%footer= render 'shared/footer'
-		- if @confirmation_dlg.present?	|| @info_dlg.present? || @login_dlg.present?
 		#content-overlay
 			#overlay
+			.dlg#contact-dlg
+				.dlg-content
+					%h2.title=_'articles.contact.headings.contact'
+					.dlg-inner= render 'contact', cancel_btn: true
 		- if @confirmation_dlg.present?
 			.dlg#confirmation-dlg
 				.dlg-content

app/views/shared/_footer.html.haml

@@ -1,14 +1,19 @@
+.external
 	.facebook
 		=_'links.footer.help_text.facebook', 'Join our facebook group' do |title|
 			%a{href: 'https://www.facebook.com/groups/648758205249998/', target: :_blank, title: title}
 				=svg_sprite  'icons', 'bb-icon-fb', 'facebook logo'
 	.github
+		%a{href: 'https://github.com/bikebike/BikeBike', target: :_blank}
+			= off_screen(_'links.footer.text.Help_contribute')
 			= svg_sprite 'icons', 'bb-icon-github', 'github logo'
-	%a{href: 'https://github.com/bikebike/BikeBike/issues', target: :_blank}
-		=_'links.footer.text.File_an_Issue'
+.user-controls
+	- if logged_in?
+		= link_to (_!current_user.name), settings_path, class: 'my-account'
 		= _!' | '
-	%a{href: 'https://github.com/bikebike/BikeBike', target: :_blank}
-		=_'links.footer.text.Help_contribute'
+		= link_to (_'forms.actions.generic.Log_out'), logout_path, class: 'logout'
+	- else
+		= signin_link
 %ul.locales
 	- @alt_lang_urls.each do |locale, url|
 		%li
@@ -16,13 +21,7 @@
 			%a{href: url, lang: locale}
 				=_'translate.content.change_locale', "Read in #{locale_translation}", vars: {language: locale_translation}, locale: locale if locale != I18n.locale.to_s
 .site-info
-	.user-controls
-		- if logged_in?
-			= link_to (_!current_user.name), settings_path, class: 'my-account'
-			= _!' | '
-			= link_to (_'forms.actions.generic.Log_out'), logout_path
-		- else
-			= signin_link
+	.contact-us=link_to (_'links.footer.help_text.contact'), contact_path, id: 'contact-link'
 	.copy
 		=_'links.footer.help_text.contributors', 'Who contributed to building this website' do |title|
 			=link_to :humans_txt, {title: title} do

app/views/user_mailer/contact.html.haml

@@ -0,0 +1,5 @@
+%h1 From
+%p=@from.is_a?(User) ? @from.named_email : @from
+
+%h1 Message
+%blockquote=markdown(@message)

app/views/user_mailer/contact_details.html.haml

@@ -0,0 +1,46 @@
+%h1 From
+%table.error-report
+	%tr
+		%th Key
+		%th Value
+	%tr
+		%td User ID
+		%td=@from.is_a?(User) ? @from.id : ''
+	%tr
+		%td User Name
+		%td=@from.is_a?(User) ? @from.name : ''
+	%tr
+		%td User Email
+		%td=@from.is_a?(User) ? @from.email : @from
+	%tr
+		%td IP Address
+		%td=@request.remote_ip
+	%tr
+		%td UUID
+		%td=@request.uuid
+	%tr
+		%td URL
+		%td=@request.original_url 
+
+%h1 Message
+%blockquote=markdown(@message)
+
+%h1 Params
+%table.error-report
+	%tr
+		%th Key
+		%th Value
+	- @params.each do | key, value |
+		%tr
+			%td=key.to_s
+			%td=value.to_s
+
+%h1 Request Environment
+%table.error-report
+	%tr
+		%th Key
+		%th Value
+	- @request.env.each do | key, value |
+		%tr
+			%td=key.to_s
+			%td=value.to_s

config/locales/en.yml

@@ -5302,6 +5302,13 @@ en:
           amenities: Amenities
           edit_event: Edit Event
           edit_location: Edit Location
+    contact:
+      headings:
+        contact: Send us a question or a complement
+        reason: What are you contacting us about?
+        sent: Thank you for contacting us
+      paragraphs:
+        sent: Thanks for reaching out. We will respond to you by email as soon we are able.
     policy:
       headings:
         The_Agreement: The Agreement
@@ -5454,6 +5461,8 @@ en:
           medium: Medium
           none: None
           small: Small
+          'yes': 'Yes' 
+          'no': 'No'
         food:
           meat: Omnivore
           vegan: Vegan
@@ -5629,6 +5638,9 @@ en:
         event_location: Location
         time: Time
         time_span: Length
+        reasons:
+          website: Something about the website
+          conference: Something about the conference
     actions:
       generic:
         login: Sign In
@@ -5674,6 +5686,8 @@ en:
     About_BikeBike: About Bike!Bike!
     about:
       About_BikeBike: About Bike!Bike!
+    contact:
+      Contact_Us: Contact   Us
     conferences:
       Conference_Registration: Conference Registration
       Create_Workshop: Create a Workshop
@@ -5702,6 +5716,7 @@ en:
   links:
     footer:
       help_text:
+        contact: Contact Us
         contributors: Contributors
         facebook: Join our Facebook group
         select_language: Change your language

config/routes.rb

@@ -49,6 +49,9 @@ BikeBike::Application.routes.draw do
     match '/doconfirm' => 'application#do_confirm', :as => :do_confirm, via: [:get, :post]
     #post '/doconfirm' => 'application#do_confirm', :as => :do_confirm
     match '/user/logout' => 'application#user_logout', :as => :logout, :via => [:get, :post]
+    get   '/contact' => 'application#contact', :as => :contact
+    post  '/contact/send' => 'application#contact_send', :as => :contact_send
+    get   '/contact/sent' => 'application#contact_sent', :as => :contact_sent
     get   '/user' => 'application#user_settings', :as => :settings
     post  '/user/update' => 'application#update_user_settings', :as => :update_settings
     match '/oauth/callback' => 'oauths#callback', :via => [:get, :post]