Registration fixes and improvements

app/assets/javascripts/main.js

@@ -228,6 +228,17 @@
                                             scrollTo.scrollIntoView();
                                         }
                                     }
+                                    if (response[i].focus) {
+                                        var focusOn = document.querySelector(response[i].focus);
+                                        if (focusOn) {
+                                            if (typeof focusOn.select === "function" && focusOn.value.length) {
+                                                if (focusOn.type == "text" || focusOn.type == "email" || focusOn.type == "phone" || focusOn.tagName == "TEXTAREA") {
+                                                    focusOn.select();
+                                                }
+                                            }
+                                            focusOn.focus();
+                                        }
+                                    }
                                 }
                             }
                         }

app/assets/stylesheets/_application.scss

@@ -66,6 +66,7 @@ p {
 
 u {
     @include _(text-decoration-color, rgba($black, 0.5));
+    text-decoration-skip: ink;
 }
 
 a {
@@ -197,16 +198,20 @@ table, .table {
         width: 0.1rem;
     }
 
-    &#review tbody th {
-        width: auto;
-        vertical-align: top;
-    }
+    &#review {
+        margin: 0 auto;
 
-    &#review .scroller {
-        font-size: 0.75em;
-        max-width: 50em;
-        max-height: 25em;
-        overflow: auto;
+        .table-th {
+            width: auto;
+            vertical-align: top;
+        }
+
+        .scroller {
+            font-size: 0.75em;
+            max-width: 50em;
+            max-height: 25em;
+            overflow: auto;
+        }
     }
 
     &.admin-edit {
@@ -491,6 +496,23 @@ body.expanded-element {
     display: table-cell;
 }
 
+.responsive-table {
+    display: block;
+
+    .table-td {
+        padding: 1em;
+    }
+
+    .table-tr, .table-th, .table-td {
+        display: block;
+        overflow: auto;
+    }
+
+    .table-tr {
+        margin-bottom: 1em;
+    }
+}
+
 button,
 .button {
     @include button;
@@ -572,6 +594,7 @@ button,
 
     button {
         width: 100%;
+        height: 10vw;
         background-color: $white;
 
         &.during-conference {
@@ -579,7 +602,7 @@ button,
         }
 
         &.selected {
-            border: 0.25em solid rgba($colour-2, 0.5);
+            border: 0.25em solid $selected-colour;
         }
     }
 
@@ -596,21 +619,26 @@ button,
 
 #main .actions {
     margin-top: 4em;
-
+    
     &.center {
         text-align: center;
     }
 
     .buttons {
         display: inline-block;
+        display: flex;
+        text-align: right;
+        justify-content: center;
+        flex-wrap: wrap;
 
-        button {
-            margin: 0 0.333em;
+        button, .button {
+            margin: 0.333em;
         }
     }
 
     button[value="back"] {
         float: left;
+        order: -1;
         background-color: $mid-gray;
     }
 
@@ -631,41 +659,29 @@ button,
 
         button {
             display: block;
+            width: 100%;
             padding: 0 2em;
             border: 0.05em solid $black;
             background-color: $white;
 
             &.selected {
-                box-shadow: 0 0 0 0.25em rgba($colour-2, 0.5);
+                box-shadow: 0 0 0 0.25em $selected-colour;
             }
         }
     }
 
     .registration-step-options {
-        display: table;
-        table-layout: fixed;
         margin: 0 auto;
 
         .options {
-            display: table-row;
-
             + fieldset {
                 margin: 2em 0;
             }
         }
 
         button {
-            display: table-cell;
-            margin: 0 0.5em;
+            margin: 0.5em auto;
             height: 3em;
-
-            &:first-child {
-                margin-left: 0;
-            }
-
-            &:last-child {
-                margin-right: 0;
-            }
         }
 
         .check-box-field {
@@ -680,8 +696,7 @@ button,
             background-color: $white;
 
             input {
-                display: table-cell;
-                width: 10em;
+                width: 100%;
                 height: 3em;
                 margin: 0;
                 font-family: inherit;
@@ -692,10 +707,10 @@ button,
             }
 
             button {
-                width: 50%;
+                width: 100%;
                 margin: 0;
                 border: 0;
-                border-left: inherit;
+                border-top: inherit;
                 background-color: lighten($colour-1, 25%);
             }
         }
@@ -744,6 +759,12 @@ ul.menu {
     @include font-family(secondary);
 }
 
+#step-content {
+    form {
+        margin-top: 1em;
+    }
+}
+
 #action-message {
     display: none;
     text-align: center;
@@ -1268,8 +1289,8 @@ input {
                 content: '+';
                 border: 0;
                 font-size: 2.5em;
-                top: -0.025em;
-                left: 0.175em;
+                top: -0.125em;
+                left: 0.075em;
                 line-height: 1em;
                 color: #FFF;
                 height: 1em;
@@ -1645,7 +1666,7 @@ fieldset {
         text-align: center;
         
         + button, + .button {
-            margin-left: 0.75em;
+            margin-top: 0.75em;
         }
     }
 
@@ -3408,6 +3429,11 @@ body.policy .policy-agreement ul {
             button, .button {
                 margin-left: 1em;
                 height: 2.6em;
+        
+                + button, + .button {
+                    margin-top: 0;
+                    margin-left: 0.75em;
+                }
             }
         }
     }
@@ -3768,6 +3794,13 @@ body.policy .policy-agreement ul {
             border: 0.1em solid;
         }
 
+        input[type="radio"] + label {
+            @include after {
+                top: -0.025em;
+                left: 0.175em;
+            }
+        }
+
         &.inline {
             label {
                 float: left;
@@ -3812,7 +3845,71 @@ body.policy .policy-agreement ul {
             @include _(transform, none);
         }
     }
-}
+
+    #main table.calendar {
+        button {
+            height: 4em;
+        }
+    }
+
+    #main .registration-step-options {
+        display: table;
+        table-layout: fixed;
+
+        .options {
+            display: table-row;
+        }
+
+        button {
+            display: table-cell;
+            margin: 0 0.5em;
+            width: auto;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+
+        fieldset {
+            margin-bottom: 3em;
+        }
+
+        .custom-option {
+            margin-top: 1em;
+
+            input {
+                display: table-cell;
+                width: 10em;
+            }
+
+            button {
+                width: 50%;
+                border-top: 0;
+                border-left: inherit;
+            }
+        }
+    }
+
+    .responsive-table {
+        display: table;
+
+        .table-tr {
+            display: table-row;
+        }
+
+        .table-td {
+            padding: 0.25em 0.5em;
+        }
+
+        .table-th, .table-td {
+            display: table-cell;
+        }
+    }
+} // medium
 
 @include breakpoint(large) {
     #main {
@@ -3866,6 +3963,12 @@ body.policy .policy-agreement ul {
             margin: 0 auto;
         }
     }
+
+    #main table.calendar {
+        button {
+            height: 5em;
+        }
+    }
 }
 
 @include breakpoint(small, medium) {

app/assets/stylesheets/_settings.scss

@@ -24,6 +24,8 @@ $green: $colour-5;
 
 $link-colour: darken($colour-1, 13%);
 
+$selected-colour: rgba($blue, 0.5);
+
 @mixin default-box-shadow($direction: top, $distance: 1, $inset: false, $additional-shadow: false) {
     @if capable_of(box-shadow) {
         $offset: 0.2em;

app/controllers/conference_administration_controller.rb

@@ -99,6 +99,9 @@ class ConferenceAdministrationController < ApplicationController
     def administrate_description
     end
 
+    def administrate_group_ride
+    end
+
     def administrate_poster
     end
 
@@ -798,6 +801,15 @@ class ConferenceAdministrationController < ApplicationController
       return false
     end
 
+    def admin_update_group_ride
+      params[:group_ride_info].each do |locale, value|
+        @this_conference.set_column_for_locale(:group_ride_info, locale, html_value(value))
+      end
+      @this_conference.save
+      set_success_message @admin_step
+      return false
+    end
+
     def admin_update_poster
       begin
         @this_conference.poster = params[:poster]

app/controllers/conferences_controller.rb

@@ -98,7 +98,8 @@ class ConferencesController < ApplicationController
       render json: [{
           globalSelector: '#step-content',
           html: view_context.step_message + render_to_string(partial: "registration_steps/#{@step}"),
-          scrollTo: '#action-message .message, #step-content'
+          scrollTo: '#action-message .message, #step-content',
+          focus: 'input:not([type="hidden"]), textarea, button.selected'
         }]
     end
   end

app/helpers/admin_helper.rb

@@ -2,7 +2,7 @@ module AdminHelper
 
   def administration_steps
     {
-      info: [:administrators, :dates, :description, :poster],
+      info: [:administrators, :dates, :description, :poster, :group_ride],
       payment: [:payment_message, :suggested_amounts, :paypal],
       registration: [:registration_status, :stats, :registrations, :broadcast],
       housing: [:providers, :housing],

app/views/registration_steps/_group_ride.html.haml

@@ -2,7 +2,7 @@
   = columns(medium: 12) do
     = registration_step_header_title
     - if @info.present?
-      = @info
+      = @info.html_safe
     - else
       = registration_step_header_description
 = row do

app/views/registration_steps/_org_create_address.html.haml

@@ -5,5 +5,5 @@
       = textfield :address, @address, required: true, big: true
       .multi-field
         = textfield :city, @city.city, readonly: true
-        = textfield :territory, @city.translate_territory, readonly: true
-        = textfield :country, @city.translate_country, readonly: true
+        = textfield :territory, @city.translate_territory.html_safe, readonly: true
+        = textfield :country, @city.translate_country.html_safe, readonly: true

app/views/registration_steps/_policy.html.haml

@@ -7,8 +7,8 @@
         %ul
           - policies.each do |term|
             %li
-              - id = "policies[#{term}]"
-              = check_box_tag(id, 1, (@accepted_policies || {}).include?(term))
+              - id = "policies_#{term}"
+              = check_box_tag("policies[#{term}]", 1, (@accepted_policies || {}).include?(term), id: id)
               %label.term{for: id}=_"articles.policy.term.#{term.to_s}", :s, 2
     = columns(medium: 12) do
       %p=_'articles.conference_registration.paragraphs.Confirm_Agreement', :p

app/views/registration_steps/_review.html.haml

@@ -3,24 +3,24 @@
   = columns(medium: 12) do
     = save_registration_step do
       - if @is_attending
-        %table#review
+        .table.responsive-table#review
           - @step_data.each do |step, data|
             - unless data[:type] == :none
-              %tr
-                %th
+              .table-tr
+                .table-th
                   =_"articles.conference_registration.step_names.#{step}"
                   = button :edit, name: :edit_step, value: step, class: [:unstyled, :edit]
-                %td
+                .table-td
                   - case data[:type]
                     - when :bool
                       =_"forms.actions.generic.#{data[:value] ? 'yes' : 'no'}"
                     - when :list
-                      = data[:value].map { |item| _"#{data[:key]}.#{item}" }.join(_!(", "))
+                      = data[:value].map { |item| _"#{data[:key]}.#{item}" }.join(_!(", ")).html_safe
                     - when :currency
                       = (number_to_currency data[:value].to_f, unit: '$')
                       =_!(data[:currency].to_s).html_safe
                     - when :date
-                      = date(data[:value].to_date, :long)
+                      = date(data[:value].to_date, :long).html_safe
                     - when :enum
                       =_("#{data[:key] || ('forms.labels.generic.' + step.to_s + '.')}#{data[:value]}")
                     - when :html
@@ -29,7 +29,7 @@
                       - if data[:key].present?
                         =_"#{data[:key]}.#{data[:value]}"
                       - else
-                        = data[:value]
+                        = data[:value].to_s.html_safe
       - else
         %p.centered=_'articles.conference_registration.paragraphs.registration_cancelled', :p
       - if @allow_cancel_attendance
@@ -43,5 +43,6 @@
     %h3=_'articles.workshops.headings.Workshops', :t
     %p=_'articles.conference_registration.paragraphs.workshops', :p
     .actions.centered
-      = link_to (_'articles.conference_registration.actions.View_Workshops'), workshops_path(@this_conference), class: :button
-      = link_to (_'actions.workshops.create'), create_workshop_path(@this_conference), class: [:button, :modify]
+      .buttons
+        = link_to (_'articles.conference_registration.actions.View_Workshops'), workshops_path(@this_conference), class: :button
+        = link_to (_'actions.workshops.create'), create_workshop_path(@this_conference), class: [:button, :modify]