refactored grid layout to solve problems with nested columns

2 files changed, 87 insertions, 86 deletions

diff --git a/app/assets/stylesheets/responsive/_new_request_layout.scss b/app/assets/stylesheets/responsive/_new_request_layout.scss
index a381eab94..16d215dd2 100644
--- a/app/assets/stylesheets/responsive/_new_request_layout.scss
+++ b/app/assets/stylesheets/responsive/_new_request_layout.scss
@@ -28,7 +28,7 @@
 }
 
 .new_info_request{
- @include grid-row($behavior: nest);
+ @include grid-row();
 }
 
 #select_authority_help {
@@ -73,7 +73,7 @@
 
 /* /new/[body_name] page */
 #request_header {
-  @include grid-row;
+  @include grid-row($behavior: nest);
 
   /* Restrict width of form elements on wide screens */
     #request_header_body, #request_header_subject, #typeahead_response {
@@ -97,6 +97,9 @@
 
 #typeahead_response .close-button {
   float: right;
+
+.request_body {
+  @include grid-row($behavior: nest);
 }
 
 .request_body {
@@ -105,10 +108,9 @@
 
 /* Advice sits on right hand side */
 #request_advice, .preview-advice {
-
   @include grid-column(12);
   @include respond-min( $main_menu-mobile_menu_cutoff ){
-    @include grid-column($columns:4, $push: 8);
+    @include grid-column($columns:4, $push:8, $last-column:true);
     @include ie8{
       padding-left: 0.9375em;
     }
@@ -121,7 +123,7 @@
 #request_form {
   @include grid-column(12);
   @include respond-min( $main_menu-mobile_menu_cutoff ){
-    @include grid-column($columns:8, $pull: 4);
+    @include grid-column($columns:8, $pull:4);
     @include ie8{
       padding-right: 0.9375em;
     }
@@ -137,10 +139,6 @@
   @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 ){
diff --git a/app/views/request/new.html.erb b/app/views/request/new.html.erb
index 214e7f522..74dbec84b 100644
--- a/app/views/request/new.html.erb
+++ b/app/views/request/new.html.erb
@@ -121,93 +121,96 @@
           <% end %>
         </div>
     </div>
-
-    <div id="request_advice">
-      <p>
-        <% if @info_request.public_body.info_requests.size > 0 %>
-            <%= _("Browse <a href='{{url}}'>other requests</a> to '{{public_body_name}}' for examples of how to word your request.", :public_body_name=>h(@info_request.public_body.name), :url=>public_body_path(@info_request.public_body)) %>
-        <% else %>
-            <%= _("Browse <a href='{{url}}'>other requests</a> for examples of how to word your request.", :url=>request_list_url) %>
-        <% end %>
-      </p>
-      <% unless @batch %>
-        <% if !@user %>
-          <p>
-            <%= raw(_('Everything that you enter on this page, including <strong>your name</strong>,
-            will be <strong>displayed publicly</strong> on
-            this website <a href="{{url}}">forever</a>', :url => (help_privacy_path+"#public_request").html_safe)) %>.
-          </p>
-          <p>
-            <%= raw(_('<a href="{{url}}">Thinking of using a pseudonym?</a>.', :url => (help_privacy_path+"#real_name").html_safe)) %>
-          </p>
-        <% else %>
-          <p>
-            <%= raw(_('Everything that you enter on this page
-            will be <strong>displayed publicly</strong> on
-            this website forever (<a href="{{url}}">why?</a>).', :url => (help_privacy_path+"#public_request").html_safe)) %>
-          </p>
-      <% end %>
-
+    <div class="request_body">
+      <div id="request_advice">
         <p>
-          <%= raw(_("<strong> Can I request information about myself?</strong>\n" +
-          "\t\t\t<a href=\"{{url}}\">No!</a>", :url => (help_requesting_path+"#data_protection").html_safe)) %>
+          <% if @info_request.public_body.info_requests.size > 0 %>
+              <%= _("Browse <a href='{{url}}'>other requests</a> to '{{public_body_name}}' for examples of how to word your request.", :public_body_name=>h(@info_request.public_body.name), :url=>public_body_path(@info_request.public_body)) %>
+          <% else %>
+              <%= _("Browse <a href='{{url}}'>other requests</a> for examples of how to word your request.", :url=>request_list_url) %>
+          <% end %>
         </p>
-        <div class="advice-panel">
-          <ul>
-            <% end %>
-            <li><%= _('Write your request in <strong>simple, precise language</strong>.') %></li>
-            <li><%= _('Ask for <strong>specific</strong> documents or information, this site is not suitable for general enquiries.') %></li>
-            <li><%= _('<a href="{{url}}">Keep it <strong>focused</strong></a>, you\'ll be more likely to get what you want.', :url => (help_requesting_path + '#focused').html_safe) %></li>
-          </ul>
-        </div>
-    </div>
-
-    <div id="request_form">
-
-        <div id="request_header_subject">
+        <% unless @batch %>
+          <% if !@user %>
             <p>
-                <label class="form_label" for="typeahead_search"><%= _('Summary:') %></label>
-                <%= f.text_field :title, :size => 50, :id =>"typeahead_search" %>
+              <%= raw(_('Everything that you enter on this page, including <strong>your name</strong>,
+              will be <strong>displayed publicly</strong> on
+              this website <a href="{{url}}">forever</a>', :url => (help_privacy_path+"#public_request").html_safe)) %>.
+            </p>
+            <p>
+              <%= raw(_('<a href="{{url}}">Thinking of using a pseudonym?</a>.', :url => (help_privacy_path+"#real_name").html_safe)) %>
+            </p>
+          <% else %>
+            <p>
+              <%= raw(_('Everything that you enter on this page
+              will be <strong>displayed publicly</strong> on
+              this website forever (<a href="{{url}}">why?</a>).', :url => (help_privacy_path+"#public_request").html_safe)) %>
             </p>
-            <div class="form_item_note">
-                <%= _("A one line summary of the information you are requesting, \n\t\t\te.g.") %>
-                  <%= render :partial => "summary_suggestion" %>
-            </div>
-        </div>
-
-        <div id="typeahead_response">
-        </div>
-
-        <%= fields_for :outgoing_message do |o| %>
-        <p>
-            <label class="form_label" for="outgoing_message_body"><%= _('Your request:') %></label>
-            <%= o.text_area :body, :rows => 20, :cols => 60 %>
-        </p>
         <% end %>
 
-        <div class="form_button">
-            <% if @batch %>
-              <% params[:public_body_ids].each do |public_body_id| %>
-                <%= hidden_field_tag("public_body_ids[]", public_body_id)%>
+          <p>
+            <%= raw(_("<strong> Can I request information about myself?</strong>\n" +
+            "\t\t\t<a href=\"{{url}}\">No!</a>", :url => (help_requesting_path+"#data_protection").html_safe)) %>
+          </p>
+          <div class="advice-panel">
+            <ul>
               <% end %>
-            <% else %>
-              <%= f.hidden_field(:public_body_id, { :value => @info_request.public_body_id } ) %>
-            <% end %>
-            <%= hidden_field_tag(:submitted_new_request, 1 ) %>
-            <%= hidden_field_tag(:preview, 1 ) %>
-            <%= submit_tag _("Preview your public request") %>
-        </div>
+              <li><%= _('Write your request in <strong>simple, precise language</strong>.') %></li>
+              <li><%= _('Ask for <strong>specific</strong> documents or information, this site is not suitable for general enquiries.') %></li>
+              <li><%= _('<a href="{{url}}">Keep it <strong>focused</strong></a>, you\'ll be more likely to get what you want.', :url => (help_requesting_path + '#focused').html_safe) %></li>
+            </ul>
+          </div>
+      </div>
+
+      <div id="request_form">
+
+          <div id="request_header_subject">
+              <p>
+                  <label class="form_label" for="typeahead_search"><%= _('Summary:') %></label>
+                  <%= f.text_field :title, :size => 50, :id =>"typeahead_search" %>
+              </p>
+              <div class="form_item_note">
+                  <%= _("A one line summary of the information you are requesting, \n\t\t\te.g.") %>
+                    <%= render :partial => "summary_suggestion" %>
+              </div>
+          </div>
 
-        <% if !@info_request.tag_string.empty? %>
-            <p class="form_note">
-                <!-- <label class="form_label" for="info_request_tag_string"><%= _("Tags (separated by a space):") %></label>
-                <%= f.text_field :tag_string, :size => 50 %> -->
+          <div id="typeahead_response">
+          </div>
 
-                <%= f.hidden_field(:tag_string) %>
-                <strong>Tags:</strong> <%=h @info_request.tag_string %>
-            </p>
-        <% end %>
+          <%= fields_for :outgoing_message do |o| %>
+          <p>
+              <label class="form_label" for="outgoing_message_body"><%= _('Your request:') %></label>
+              <%= o.text_area :body, :rows => 20, :cols => 60 %>
+          </p>
+          <% end %>
+
+
+
+          <div class="form_button">
+              <% 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 %>
+              <%= hidden_field_tag(:submitted_new_request, 1 ) %>
+              <%= hidden_field_tag(:preview, 1 ) %>
+              <%= submit_tag _("Preview your public request") %>
+          </div>
+
+          <% if !@info_request.tag_string.empty? %>
+              <p class="form_note">
+                  <!-- <label class="form_label" for="info_request_tag_string"><%= _("Tags (separated by a space):") %></label>
+                  <%= f.text_field :tag_string, :size => 50 %> -->
+
+                  <%= f.hidden_field(:tag_string) %>
+                  <strong>Tags:</strong> <%=h @info_request.tag_string %>
+              </p>
+          <% end %>
 
+          </div>
         </div>
 <% end %>
 <% if @batch %>