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;