Merge branch '557-email-confirmation-pages'

14 files changed, 144 insertions, 228 deletions

diff --git a/t/app/controller/alert_new.t b/t/app/controller/alert_new.t
index ac2ec20ac..777d733e2 100644
--- a/t/app/controller/alert_new.t
+++ b/t/app/controller/alert_new.t
@@ -11,7 +11,7 @@ foreach my $test (
     {
         email      => 'test@example.com',
         type       => 'area_problems',
-        content    => 'your alert will not be activated',
+        content    => 'Click the link in our confirmation email to activate your alert',
         email_text => "confirms that you'd like to receive an email",
         uri =>
 '/alert/subscribe?type=local&rznvy=test@example.com&feed=area:1000:A_Location',
@@ -20,7 +20,7 @@ foreach my $test (
     {
         email      => 'test@example.com',
         type       => 'council_problems',
-        content    => 'your alert will not be activated',
+        content    => 'Click the link in our confirmation email to activate your alert',
         email_text => "confirms that you'd like to receive an email",
         uri =>
 '/alert/subscribe?type=local&rznvy=test@example.com&feed=council:1000:A_Location',
@@ -30,7 +30,7 @@ foreach my $test (
     {
         email      => 'test@example.com',
         type       => 'ward_problems',
-        content    => 'your alert will not be activated',
+        content    => 'Click the link in our confirmation email to activate your alert',
         email_text => "confirms that you'd like to receive an email",
         uri =>
 '/alert/subscribe?type=local&rznvy=test@example.com&feed=ward:1000:1001:A_Location:Diff_Location',
@@ -40,7 +40,7 @@ foreach my $test (
     {
         email      => 'test@example.com',
         type       => 'local_problems',
-        content    => 'your alert will not be activated',
+        content    => 'Click the link in our confirmation email to activate your alert',
         email_text => "confirms that you'd like to receive an email",
         uri =>
 '/alert/subscribe?type=local&rznvy=test@example.com&feed=local:10.2:20.1',
@@ -50,7 +50,7 @@ foreach my $test (
     {
         email      => 'test@example.com',
         type       => 'new_updates',
-        content    => 'your alert will not be activated',
+        content    => 'Click the link in our confirmation email to activate your alert',
         email_text => "confirms that you'd like to receive an email",
         uri    => '/alert/subscribe?type=updates&rznvy=test@example.com&id=1',
         param1 => 1,
@@ -236,7 +236,7 @@ for my $test (
     {
         email      => 'test@example.com',
         type       => 'new_updates',
-        content    => 'your alert will not be activated',
+        content    => 'Click the link in our confirmation email to activate your alert',
         email_text => 'confirm the alert',
         uri    => '/alert/subscribe?type=updates&rznvy=test@example.com&id=1',
         param1 => 1,
diff --git a/t/app/controller/report_updates.t b/t/app/controller/report_updates.t
index 3e3e4744a..6c6b4ca19 100644
--- a/t/app/controller/report_updates.t
+++ b/t/app/controller/report_updates.t
@@ -353,7 +353,7 @@ for my $test (
             'submit update'
         );
 
-        $mech->content_contains('Nearly Done! Now check your email');
+        $mech->content_contains('Nearly done! Now check your email');
 
         my $email = $mech->get_email;
         ok $email, "got an email";
@@ -1007,7 +1007,7 @@ subtest 'submit an update for a registered user, creating update by email' => su
         },
     }, 'submit update' );
 
-    $mech->content_contains('Nearly Done! Now check your email');
+    $mech->content_contains('Nearly done! Now check your email');
 
     # No change to user yet.
     $user->discard_changes;
diff --git a/templates/web/base/auth/general.html b/templates/web/base/auth/general.html
index f5e2e423f..4c9a59350 100644
--- a/templates/web/base/auth/general.html
+++ b/templates/web/base/auth/general.html
@@ -1,83 +1,74 @@
-[% INCLUDE 'header.html', title = loc('Sign in or create an account') %]
+[% INCLUDE 'header.html', bodyclass='authpage', title = loc('Sign in or create an account') %]
 
 <h1>[% loc('Sign in') %]</h1>
 
 <form action="[% c.uri_for() %]" method="post" name="general_auth" class="validate">
-<input type="hidden" name="r" value="[% c.req.params.r | html %]">
-    
-    [% IF email_error;
-
-        # other keys include fqdn, mxcheck if you'd like to write a custom error message
-
-        errors = {
-            missing => loc('Please enter your email'),
-            other   => loc('Please check your email address is correct')
-        };
-        
-        loc_email_error = errors.$email_error || errors.other;
-    END %]
-    
-    [% IF loc_email_error  %]
+    <fieldset>
+
+        <input type="hidden" name="r" value="[% c.req.params.r | html %]">
+
+            [% IF email_error;
+
+                # other keys include fqdn, mxcheck if you'd like to write a custom error message
+
+                errors = {
+                    missing => loc('Please enter your email'),
+                    other   => loc('Please check your email address is correct')
+                };
+
+                loc_email_error = errors.$email_error || errors.other;
+            END %]
+
+        <label class="n" for="email">[% loc('Email') %]</label>
+      [% IF loc_email_error  %]
         <div class="form-error">[% loc_email_error %]</div>
-    [% ELSIF sign_in_error %]
+      [% ELSIF sign_in_error %]
         <div class="form-error">[% loc('There was a problem with your email/password combination. If you cannot remember your password, or do not have one, please fill in the &lsquo;sign in by email&rsquo; section of the form.') %]</div>
-    [% END %]
-
-    <div class="form-field">
-        <label class="n" for="email">[% loc('Your email address:') %]</label>
-        <input type="email" class="required email" size="30" id="email" name="email" value="[% email | html %]">
-    </div>
-
-<div id="form_sign_in">
-    <h3>[% loc("Do you have a FixMyStreet password?") %]</h3>
-
-    <div id="form_sign_in_yes">
-
-        <p>
-        <label class="n" for="password_sign_in">[% loc('<strong>Yes</strong> I have a password') %]</label>
-        <input type="password" name="password_sign_in" id="password_sign_in" value="">
-        </p>
-
-        <p>
-        <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]>
-        <label class="n" for="remember_me">
-        [% loc('Keep me signed in on this computer') %]
-        </label>
-        </p>
-        
-        <p>
-        <input type="submit" name="sign_in" value="[% loc('Sign in') %]">
-        </p>
-
-    </div>
-    <div id="form_sign_in_no">
-
-        <p>[% loc('<strong>No</strong>, I do not, let me sign in by email:') %]</p>
-
-        <div class="fieldset">
-            <div class="form-field">
-                <label for="name">[% loc('Your name:') %]</label>
-                <input type="text" name="name" value="">
-            </div>
+      [% END %]
+        <input type="email" class="required email" id="email" name="email" value="[% email | html %]" placeholder="[% loc('Your email address') %]">
+
+        <div id="form_sign_in">
+          [% IF c.cobrand.moniker == 'fixmybarangay' %]
+            <h3>[% loc("Do you have a FixMyBarangay password?") %]</h3>
+          [% ELSE %]
+            <h3>[% loc("Do you have a FixMyStreet password?") %]</h3>
+          [% END %]
+
+            <div id="form_sign_in_yes" class="form-box">
+                <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5>
+
+                <label class="hidden-js n" for="password_sign_in">[% loc('Password:') %]</label>
+
+                <div class="form-txt-submit-box">
+                    <input type="password" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
+                    <input class="green-btn" type="submit" name="sign_in" value="[% loc('Sign in') %]">
+                </div>
+
+                <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]>
+                <label class="inline n" for="remember_me">[% loc('Keep me signed in on this computer') %]</label>
 
-            <div class="form-field">
-                <label for="password_register">[% loc('Enter a new password:') %]</label>
-                <input type="password" name="password_register" id="password_register" value="">
             </div>
-        </div>
+            <div id="form_sign_in_no" class="form-box">
+                <h5>[% loc('<strong>No</strong> let me sign in by email') %]</h5>
 
-        <p><small>Providing a name and password is optional, but doing so
-        will allow you to more easily report problems, leave updates and
-        manage your reports.</small></p>
+                <label for="name">[% loc('Name') %]</label>
+                <input type="text" name="name" value="" placeholder="[% loc('Your name') %]">
 
-        <p>
-        <input type="submit" name="email_sign_in" value="[% loc('Sign in by email') %]">
-        </p>
+                <label for="password_register">[% loc('Password (optional)') %]</label>
 
-    </div>
+                <div class="general-notes">
+                    <p>[% loc('Providing a name and password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p>
+                </div>
+
+                <div class="form-txt-submit-box">
+                    <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+                    <input class="green-btn" type="submit" name="email_sign_in" value="[% loc('Sign in') %]">
+                </div>
+            </div>
+
+        </div>
 
-</div>
-    
+    </fieldset>
 </form>
 
 
diff --git a/templates/web/base/auth/token.html b/templates/web/base/auth/token.html
index 361d4fbd5..a4dedcec3 100644
--- a/templates/web/base/auth/token.html
+++ b/templates/web/base/auth/token.html
@@ -1,25 +1,27 @@
-[% INCLUDE 'header.html', title => loc('Confirm account') %]
+[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Confirm account') %]
 
 [% IF token_not_found %]
+[%# Shown whenever there's an invalid token, eg while confirming a report or logging in without a password %]
 
-<h1>[% loc('Error') %]</h1>
+  <div class="confirmation-header confirmation-header--failure">
 
-<p>
-    [% loc('We have not been able to confirm your account - sorry.') %]
-    [% loc('This may be because the link is too old or already used, or the address was not copied correctly.') %]
-</p>
+    <h1>[% loc('Sorry, that wasn&rsquo;t a valid link') %]</h1>
+    <p>[% loc('The link might have expired, or maybe you didn&rsquo;t quite copy and paste it correctly.') %]</p>
+
+  </div>
 
 [% ELSE %]
 
-<h1>[% loc('Please check your email') %]</h1>
+  <div class="confirmation-header confirmation-header--inbox">
 
-<p>[% loc("We have sent you an email containing a link to confirm your account.") %]</p>
+    <h1>[% loc("Nearly done! Now check your email&hellip;") %]</h1>
+    <p>[% loc("Click the link in our confirmation email to sign in.") %]</p>
 
-[% IF c.cobrand.moniker != 'zurich' %]
-<p>[% loc("The confirmation email <strong>may</strong> take a few minutes to arrive &mdash; <em>please</em> be patient.") %]</p>
-[% END %]
+    <p>
+        [% loc("Can&rsquo;t find our email? Check your spam folder&nbsp;&ndash; that&rsquo;s the solution 99% of the time.") %]
+    </p>
 
-<p>[% loc("If you use web-based email or have 'junk mail' filters, you may wish to check your bulk/spam mail folders: sometimes, our messages are marked that way.") %]</p>
+  </div>
 
 [% END %]
 
diff --git a/templates/web/base/email_sent.html b/templates/web/base/email_sent.html
index 8d7b35a58..7d38f9d67 100644
--- a/templates/web/base/email_sent.html
+++ b/templates/web/base/email_sent.html
@@ -1,34 +1,23 @@
-[% INCLUDE 'header.html', bodyclass = 'twothirdswidthpage', title = loc('Create a report') %]
+[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Create a report') %]
 
-<h1>[% loc("Nearly Done! Now check your email...") %]</h1>
+<div class="confirmation-header confirmation-header--inbox">
 
-[% IF c.cobrand.moniker != 'zurich' %]
-    <p>[% loc("The confirmation email <strong>may</strong> take a few minutes to arrive &mdash; <em>please</em> be patient.") %]</p>
-[% END %]
+    <h1>[% loc("Nearly done! Now check your email&hellip;") %]</h1>
 
-<p>[% loc("If you use web-based email or have 'junk mail' filters, you may wish to check your bulk/spam mail folders: sometimes, our messages are marked that way.") %]</p>
-
-[% IF c.cobrand.moniker != 'zurich' %]
     <p>
-    [% loc("You must now click the link in the email we've just sent you.") %]
     [% IF email_type == 'problem' %]
-        [% loc("If you do not, your problem will not be posted.") %]
+        [% loc("Click the link in our confirmation email to publish your problem.") %]
     [% ELSIF email_type == 'update' %]
-        [% loc("If you do not, your update will not be posted.") %]
+        [% loc("Click the link in our confirmation email to publish your update.") %]
     [% ELSIF email_type == 'alert' %]
-        [% loc("If you do not, your alert will not be activated.") %]
+        [% loc("Click the link in our confirmation email to activate your alert.") %]
     [% END %]
     </p>
 
     <p>
-    [% IF email_type == 'problem' %]
-        [% loc("(Don't worry &mdash; we'll hang on to your problem report while you're checking your email.)") %]
-    [% ELSIF email_type == 'update' %]
-        [% loc("(Don't worry &mdash; we'll hang on to your update while you're checking your email.)") %]
-    [% ELSIF email_type == 'alert' %]
-        [% loc("(Don't worry &mdash; we'll hang on to your alert while you're checking your email.)") %]
-    [% END %]
+        [% loc("Can&rsquo;t find our email? Check your spam folder&nbsp;&ndash; that&rsquo;s the solution 99% of the time.") %]
     </p>
-[% END %]
+
+</div>
 
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/eastsussex/email_sent.html b/templates/web/eastsussex/email_sent.html
deleted file mode 100644
index f64a3cd64..000000000
--- a/templates/web/eastsussex/email_sent.html
+++ /dev/null
@@ -1,34 +0,0 @@
-[% INCLUDE 'header.html', bodyclass = 'twothirdswidthpage', title = loc('Create a report') %]
-
-<h1>[% loc("Nearly done! Now check your email&hellip;") %]</h1>
-
-[% IF c.cobrand.moniker != 'zurich' %]
-    <p>[% loc("The confirmation email <strong>may</strong> take a few minutes to arrive &mdash; <em>please</em> be patient.") %]</p>
-[% END %]
-
-<p>[% loc("If you use web-based email or have 'junk mail' filters, you may wish to check your bulk/spam mail folders: sometimes, our messages are marked that way.") %]</p>
-
-[% IF c.cobrand.moniker != 'zurich' %]
-    <p>
-    [% loc("You must now click the link in the email we've just sent you.") %]
-    [% IF email_type == 'problem' %]
-        [% loc("If you do not, your problem will not be posted.") %]
-    [% ELSIF email_type == 'update' %]
-        [% loc("If you do not, your update will not be posted.") %]
-    [% ELSIF email_type == 'alert' %]
-        [% loc("If you do not, your alert will not be activated.") %]
-    [% END %]
-    </p>
-
-    <p>
-    [% IF email_type == 'problem' %]
-        [% loc("(Don't worry &mdash; we'll hang on to your problem report while you're checking your email.)") %]
-    [% ELSIF email_type == 'update' %]
-        [% loc("(Don't worry &mdash; we'll hang on to your update while you're checking your email.)") %]
-    [% ELSIF email_type == 'alert' %]
-        [% loc("(Don't worry &mdash; we'll hang on to your alert while you're checking your email.)") %]
-    [% END %]
-    </p>
-[% END %]
-
-[% INCLUDE 'footer.html' %]
diff --git a/templates/web/fixmystreet/auth/general.html b/templates/web/fixmystreet/auth/general.html
deleted file mode 100644
index 45239073d..000000000
--- a/templates/web/fixmystreet/auth/general.html
+++ /dev/null
@@ -1,73 +0,0 @@
-[% INCLUDE 'header.html', bodyclass='authpage', title = loc('Sign in or create an account') %]
-[%# should bodyclass='twothirdspage' instead? Need override for Harrogate %]
-
-<h1>[% loc('Sign in') %]</h1>
-
-<form action="[% c.uri_for() %]" method="post" name="general_auth" class="validate">
-    <fieldset>
-        <input type="hidden" name="r" value="[% c.req.params.r | html %]">
-            
-            [% IF email_error;
-
-                # other keys include fqdn, mxcheck if you'd like to write a custom error message
-
-                errors = {
-                    missing => loc('Please enter your email'),
-                    other   => loc('Please check your email address is correct')
-                };
-                
-                loc_email_error = errors.$email_error || errors.other;
-            END %]
-        <label class="n" for="email">[% loc('Email') %]</label>
-        [% IF loc_email_error  %]
-            <div class="form-error">[% loc_email_error %]</div>
-        [% ELSIF sign_in_error %]
-            <div class="form-error">[% loc('There was a problem with your email/password combination. If you cannot remember your password, or do not have one, please fill in the &lsquo;sign in by email&rsquo; section of the form.') %]</div>
-        [% END %]
-        <input type="email" class="required email" id="email" name="email" value="[% email | html %]" placeholder="[% loc('Your email address') %]">
-
-        <div id="form_sign_in">
-            [% IF c.cobrand.moniker == 'fixmybarangay' %]
-            <h3>[% loc("Do you have a FixMyBarangay password?") %]</h3>
-            [% ELSE %]
-            <h3>[% loc("Do you have a FixMyStreet password?") %]</h3>
-            [% END %]
-
-            <div id="form_sign_in_yes" class="form-box">
-                <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5>
-                
-                <label class="hidden-js n" for="password_sign_in">[% loc('<strong>Yes</strong> I have a password') %]</label>
-
-                <div class="form-txt-submit-box">
-                    <input type="password" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
-                    <input class="green-btn" type="submit" name="sign_in" value="[% loc('Sign in') %]">
-                </div>
-                
-                <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]>
-                <label class="inline n" for="remember_me">[% loc('Keep me signed in on this computer') %]</label>
-
-            </div>
-            <div id="form_sign_in_no" class="form-box">
-                <h5>[% loc('<strong>No</strong> let me sign in by email') %]</h5>
-
-                <label for="name">[% loc('Name') %]</label>
-                <input type="text" name="name" value="" placeholder="[% loc('Your name') %]">
-
-                <label for="password_register">[% loc('Password (optional)') %]</label>
-
-                <div class="general-notes">
-                    <p>[% loc('Providing a name and password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p>
-                </div>
-
-                <div class="form-txt-submit-box">
-                    <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
-                    <input class="green-btn" type="submit" name="email_sign_in" value="[% loc('Sign in') %]">
-                </div>
-            </div>
-
-        </div>
-    </fieldset>    
-</form>
-
-
-[% INCLUDE 'footer.html' %]
diff --git a/templates/web/zurich/auth/token.html b/templates/web/zurich/auth/token.html
new file mode 100644
index 000000000..e199691e0
--- /dev/null
+++ b/templates/web/zurich/auth/token.html
@@ -0,0 +1,25 @@
+[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Confirm account') %]
+
+[% IF token_not_found %]
+
+  <div class="confirmation-header confirmation-header--failure">
+
+    <h1>[% loc('We have not been able to confirm your account - sorry.') %]</h1>
+    <p>[% loc('This may be because the link is too old or already used, or the address was not copied correctly.') %]</p>
+
+  </div>
+
+[% ELSE %]
+
+  <div class="confirmation-header confirmation-header--inbox">
+
+    <h1>[% loc('Please check your email') %]</h1>
+    <p>[% loc("We have sent you an email containing a link to confirm your account.") %]</p>
+
+    <p>[% loc("If you use web-based email or have 'junk mail' filters, you may wish to check your bulk/spam mail folders: sometimes, our messages are marked that way.") %]</p>
+
+  </div>
+
+[% END %]
+
+[% INCLUDE 'footer.html' %]
diff --git a/templates/web/zurich/email_sent.html b/templates/web/zurich/email_sent.html
new file mode 100644
index 000000000..90bfcdbda
--- /dev/null
+++ b/templates/web/zurich/email_sent.html
@@ -0,0 +1,11 @@
+[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Create a report') %]
+
+<div class="confirmation-header confirmation-header--inbox">
+
+    <h1>[% loc("Nearly Done! Now check your email...") %]</h1>
+
+    <p>[% loc("If you use web-based email or have 'junk mail' filters, you may wish to check your bulk/spam mail folders: sometimes, our messages are marked that way.") %]</p>
+
+</div>
+
+[% INCLUDE 'footer.html' %]
diff --git a/web/cobrands/fixmystreet/images/inbox-in-circle-100px.png b/web/cobrands/fixmystreet/images/inbox-in-circle-100px.png
new file mode 100644
index 000000000..d06685489
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/inbox-in-circle-100px.png
diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss
index 2e0ce47f0..8d57949a0 100644
--- a/web/cobrands/greenwich/layout.scss
+++ b/web/cobrands/greenwich/layout.scss
@@ -16,8 +16,6 @@ $fixed_page_width: 990px;
 .ie6 #site-logo,
 body.frontpage #site-logo,
 .ie6 body.frontpage #site-logo,
-body.authpage #site-logo,
-.ie6 body.authpage #site-logo,
 body.twothirdswidthpage #site-logo,
 .ie6 body.twothirdswidthpage #site-logo
 {
diff --git a/web/cobrands/harrogate/layout.scss b/web/cobrands/harrogate/layout.scss
index 480a07f5d..dba7ed5b0 100644
--- a/web/cobrands/harrogate/layout.scss
+++ b/web/cobrands/harrogate/layout.scss
@@ -8,9 +8,6 @@
     body.frontpage #site-logo,
     .ie6 body.frontpage #site-logo,
     
-    body.authpage #site-logo,
-    .ie6 body.authpage #site-logo,
-
     body.twothirdswidthpage #site-logo,
     .ie6 body.twothirdswidthpage #site-logo
     {
@@ -29,9 +26,6 @@
     body.twothirdswidthpage #site-header,
     .ie6 body.twothirdswidthpage #site-header,
 
-    body.authpage #site-header,
-    .ie6 body.authpage #site-header,
-
     body.mappage #site-header,
     .ie6 body.mappage #site-header,
     body.mappage .nav-wrapper-2,
@@ -58,11 +52,7 @@
     }
 }
 
-body.fullwidthpage #main-nav,
-body.frontpage #main-nav,
-body.twothirdswidthpage #main-nav,
-body.authpage #main-nav
-{
+#main-nav {
     margin-top: 3.2em;
 }
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 9c63c77a8..15e26eddd 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1603,10 +1603,15 @@ table.nicetable {
   text-align: center;
 
   background: transparent url(/cobrands/fixmystreet/images/tick-in-circle-100px.png) center 1em no-repeat;
+
   &.confirmation-header--failure {
     background-image: url(/cobrands/fixmystreet/images/sad-face-in-circle-100px.png);
   }
 
+  &.confirmation-header--inbox {
+    background-image: url(/cobrands/fixmystreet/images/inbox-in-circle-100px.png);
+  }
+
   h1, h2 {
     margin: 0;
     line-height: 1.2em;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index ea85c0f13..26460c580 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -498,6 +498,18 @@ body.twothirdswidthpage {
   }
 }
 
+// Centre the login and password change pages,
+// but keep them narrow to match the report sidebar
+body.authpage {
+  .content {
+    margin-#{$left}: auto;
+    margin-#{$right}: auto;
+    margin-bottom: 0;
+    box-shadow: none;
+    padding: 1em; // same as .twothirdswidthpage .content
+  }
+}
+
 
 // table wrapper - this enables anything to become a
 // table with div children as table cells