Message preview screen now has an improved layout

4 files changed, 120 insertions, 78 deletions

diff --git a/app/assets/stylesheets/responsive/_new_request_layout.scss b/app/assets/stylesheets/responsive/_new_request_layout.scss
index 2e0c4b029..a381eab94 100644
--- a/app/assets/stylesheets/responsive/_new_request_layout.scss
+++ b/app/assets/stylesheets/responsive/_new_request_layout.scss
@@ -76,7 +76,7 @@
   @include grid-row;
 
   /* Restrict width of form elements on wide screens */
-    #request_header_body, #request_header_subject, #typeahead_response  {
+    #request_header_body, #request_header_subject, #typeahead_response {
     @include grid-column(12);
     @include respond-min( $main_menu-mobile_menu_cutoff ){
       @include grid-column($columns:8, $last-column:true);
@@ -104,7 +104,7 @@
 }
 
 /* Advice sits on right hand side */
-#request_advice {
+#request_advice, .preview-advice {
 
   @include grid-column(12);
   @include respond-min( $main_menu-mobile_menu_cutoff ){
@@ -119,7 +119,6 @@
 }
 
 #request_form {
-
   @include grid-column(12);
   @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column($columns:8, $pull: 4);
@@ -133,10 +132,28 @@
 
 }
 
+/* Message preview */
+.message-preview {
+  @include grid-row($behavior: nest);
+}
+
 #preview_form {
   @include grid-column(12);
 }
 
+.preview-pane {
+    @include grid-column(12);
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
+      @include grid-column($columns:8, $pull:4);
+      @include ie8{
+        padding-right: 0.9375em;
+      }
+      @include lte-ie7 {
+        width: 36.813em;
+      }
+    }
+  }
+
 
 /* Batch request page*/
 
@@ -205,7 +222,6 @@ div.batch_public_body_toggle {
   margin-left: 110px;
 }
 
-
 /* Request sent page */
 .request-sent-message {
   margin-top: 1em;
diff --git a/app/assets/stylesheets/responsive/_new_request_style.scss b/app/assets/stylesheets/responsive/_new_request_style.scss
index 8537e7d26..a056e8b43 100644
--- a/app/assets/stylesheets/responsive/_new_request_style.scss
+++ b/app/assets/stylesheets/responsive/_new_request_style.scss
@@ -58,24 +58,26 @@
   @include respond-min( $main_menu-mobile_menu_cutoff ){
     font-size: 1em;
   }
+  .advice-panel {
+      margin-top: 1.5em;
+  }
+}
+
+.advice-panel {
+  background-color: #f4f4f4;
+  padding: 1.5em;
   ul {
     margin:0 auto;
     list-style: none outside none;
-    padding-left: 0;
+    padding: 0;
     li {
       margin:0 0 1em;
     }
   }
 }
 
-.advice-panel {
-  background-color: darken(#f7eee1, 5%);
-  padding: 1.5em;
-  margin-top: 1.5em;
-}
-
 #request_search_ahead_results {
-   background-color: darken(#f7eee1, 5%);
+   background-color: #f4f4f4;
    padding: 1.5em;
    margin-bottom: 1.5em;
    h2 {
@@ -84,20 +86,17 @@
    }
 }
 
-.advice-panel {
-  background-color: darken(#f7eee1, 5%);
-  padding: 1.5em;
-  margin-top: 1.5em;
-}
 
-#request_search_ahead_results {
-   background-color: darken(#f7eee1, 5%);
-   padding: 1.5em;
-   margin-bottom: 1.5em;
-   h2 {
-    font-size: 1em;
-    font-weight: normal;
-   }
+input#reedit_button {
+  background-color: transparent;
+  color: #2688dc;
+  text-decoration: underline;
+    &:hover,
+    &:active,
+    &:focus {
+        color: #333333;
+    }
+    border: none;
 }
 
 /* Batch request page */
diff --git a/app/assets/stylesheets/responsive/_request_style.scss b/app/assets/stylesheets/responsive/_request_style.scss
index c33688793..e6f36674a 100644
--- a/app/assets/stylesheets/responsive/_request_style.scss
+++ b/app/assets/stylesheets/responsive/_request_style.scss
@@ -3,7 +3,10 @@
 div.correspondence {
   border: 1px solid #ccc;
   margin: 0 0 1em;
-  padding: 0.5em 1em 0 0.5em;
+  padding: 1em;
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    padding: 1.5em;
+  }
 
   h2 {
     text-align:right;
@@ -11,6 +14,20 @@ div.correspondence {
   }
 }
 
+.preview_subject,
+.preview_to {
+  font-weight: bold;
+  strong {
+    font-weight: normal;
+    display: block;
+    color: #777;
+  }
+}
+
+.preview_subject {
+  margin-bottom: 1.5em;
+}
+
 div.comment_in_request {
   border: 1px dotted #ccc;
   margin:0 0 1em 3em;
@@ -30,7 +47,7 @@ div.comment_in_request {
   margin-bottom: 1em;
 }
 
-.correspondence_text,.comment_in_request_text {
+.comment_in_request_text {
   margin:0 1.2em 0 0.9em;
 }
 
diff --git a/app/views/request/preview.html.erb b/app/views/request/preview.html.erb
index ddd5ab30c..3a5b8ae87 100644
--- a/app/views/request/preview.html.erb
+++ b/app/views/request/preview.html.erb
@@ -5,58 +5,68 @@
 <% end %>
 <%= form_for(@info_request, :url => (@batch ? new_batch_path : new_request_path), :html => { :id => 'preview_form' }  ) do |f| %>
 
-    <h1><%= _('3. Now check your request') %></h1>
-    <ul>
-    <li><%= _('Check you haven\'t included any <strong>personal information</strong>.') %></li>
-    <li><%= raw(_('Your name, request and any responses will appear in <strong>search engines</strong>
-        (<a href="{{url}}">details</a>).', :url => (help_privacy_path+"#public_request").html_safe)) %>
-    </li>
-    </ul>
-
-    <%= fields_for :outgoing_message do |o| %>
-
-        <div class="correspondence" id="outgoing-0">
-            <p class="preview_subject">
-                <strong><%= _('To:') %></strong>
-                <% if @batch %>
-                  <%= _("Your selected authorities")%>
-                <% else %>
-                  <%=h(@info_request.public_body.name)%>
-                <% end %>
-                <br><strong><%= _('Subject:') %></strong> <%= @info_request.email_subject_request %>
-            </p>
-
-            <div class="correspondence_text">
-                <p><%= @outgoing_message.get_body_for_html_display %></p>
-                <%= o.hidden_field(:body) %>
-            </div>
+    <h1><%= _('Preview your request') %></h1>
+    <div class="message-preview">
+        <div class="preview-advice">
+            <div class="advice-panel">
+                <ul>
+                    <li><%= _('Check you haven\'t included any <strong>personal information</strong>.') %></li>
+                    <li><%= raw(_('Your name, request and any responses will appear in <strong>search engines</strong>
+                        (<a href="{{url}}">details</a>).', :url => (help_privacy_path+"#public_request").html_safe)) %>
+                    </li>
+                    <li><%= _('<a href="{{url}}">Do you want to request private information about yourself?</a>', :url => (help_requesting_path+"#data_protection").html_safe) %></li>
+                </ul>
 
-            <p class="event_actions">
-            </p>
+            </div>
         </div>
-    <% end %>
-
-    <p><%= _('<strong>Privacy note:</strong> If you want to request private information about
-    yourself then <a href="{{url}}">click here</a>.', :url => (help_requesting_path+"#data_protection").html_safe) %>
-
-    <p>
-    <%= f.hidden_field(:title) %>
-    <% if @batch %>
-      <% params[:public_body_ids].each do |public_body_id| %>
-        <%= hidden_field_tag("public_body_ids[]", public_body_id)%>
-      <% end %>
-    <% else %>
-      <%= f.hidden_field(:public_body_id, { :value => @info_request.public_body_id } ) %>
-    <% end %>
-    <%= f.hidden_field(:tag_string) %>
-    <%= hidden_field_tag(:submitted_new_request, 1) %>
-    <%= hidden_field_tag(:preview, 0 ) %>
-    <%= submit_tag _("Edit this request"), :name => 'reedit', :id => 'reedit_button' %>
-    <%= submit_tag _("Send request"), :name => 'submit', :id => 'submit_button' %>
-    </p>
-
-    <% if !@info_request.tag_string.empty? %>
-        <p><strong><%= _('Tags:') %></strong> <%=h @info_request.tag_string %></p>
-    <% end %>
+        <div class="preview-pane">
+        <%= fields_for :outgoing_message do |o| %>
+
+            <div class="correspondence" id="outgoing-0">
+                <p class="preview_to">
+                    <strong><%= _('To') %></strong>
+                    <% if @batch %>
+                      <%= _("Your selected authorities")%>
+                    <% else %>
+                      <%=h(@info_request.public_body.name)%>
+                    <% end %>
 
+                </p>
+                <p class="preview_subject">
+                 <strong><%= _('Subject') %></strong> <%= @info_request.email_subject_request %>
+                </p>
+
+                <div class="correspondence_text">
+                    <p><%= @outgoing_message.get_body_for_html_display %></p>
+                    <%= o.hidden_field(:body) %>
+                </div>
+
+                <p class="event_actions">
+                </p>
+            </div>
+        <% end %>
+
+
+
+        <p>
+        <%= f.hidden_field(:title) %>
+        <% if @batch %>
+          <% params[:public_body_ids].each do |public_body_id| %>
+            <%= hidden_field_tag("public_body_ids[]", public_body_id)%>
+          <% end %>
+        <% else %>
+          <%= f.hidden_field(:public_body_id, { :value => @info_request.public_body_id } ) %>
+        <% end %>
+        <%= f.hidden_field(:tag_string) %>
+        <%= hidden_field_tag(:submitted_new_request, 1) %>
+        <%= hidden_field_tag(:preview, 0 ) %>
+        <%= submit_tag _("Edit your request"), :name => 'reedit', :id => 'reedit_button' %>
+        <%= submit_tag _("Send request"), :name => 'submit', :id => 'submit_button' %>
+        </p>
+
+        <% if !@info_request.tag_string.empty? %>
+            <p><strong><%= _('Tags:') %></strong> <%=h @info_request.tag_string %></p>
+        <% end %>
+        </div>
+    </div>
 <% end %>