WIP

app/javascript/stylesheets/print.scss

@@ -20,8 +20,10 @@
   grid-auto-columns: 1fr 200px;
 }
 
-.print-header {
-  size: 12px;
+.govuk-heading-s {
+  font-size: small;
+  margin-bottom: 0;
+  margin-top: 5px;
 }
 
 .govuk-body{
@@ -35,4 +37,5 @@
   .cell {
     background-color: lightgrey;
   }
+  .noprint {display:none;}
 }

app/views/form/print.html.erb

@@ -1,8 +1,8 @@
-<h1>Print the form</h1>
+<h1>2021/2022 form</h1>
 
 <%= form_with do |f| %>
   <% @form.all_subsections.each do |subsection_name, subsection_content| %>
-    <p class="print-header"><%= subsection_content["label"] %></p>
+    <p class="govuk-heading-s"><%= subsection_content["label"] %></p>
     <% large_answers = @form.questions_for_subsection(subsection_name).any? {|key, info| info["type"]== 'checkbox' || info["type"]== 'radio' && info["answer_options"].keys.length > 4} ? "two-grid" : "three-grid" %>
     <div class="<%= large_answers %>">
         <% @form.questions_for_subsection(subsection_name).each_with_index do |question, index| %>

app/views/form/print/_checkbox_question.html.erb

@@ -3,9 +3,21 @@
     <%= question["header"].html_safe.present? ?  question["header"].html_safe : "missing question header"%>
   </strong>
 </div>
-<div class="govuk-body">
+<div class="two-grid govuk-body">
+  <div>
     <% question["answer_options"].each do |index, answer_option| %>
+      <% if index.to_i.even? %>
         <input type="checkbox"/>
-    <label><%=answer_option %></label>
+        <label><%=answer_option %></label><br/>
       <% end %>
+    <%end %>
+  </div>
+  <div>
+    <% question["answer_options"].each do |index, answer_option| %>
+      <% if !index.to_i.even? %>
+        <input type="checkbox"/>
+        <label><%=answer_option %></label><br/>
+      <% end %>
+    <%end %>
+  </div>
 </div>

app/views/layouts/_footer.html.erb

@@ -1,4 +1,4 @@
-<div class="govuk-width-container ">
+<div class="govuk-width-container noprint">
 
   <div class="govuk-footer__meta">
     <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">

app/views/layouts/application.html.erb

@@ -45,7 +45,7 @@
       %>
     </header>
 
-    <aside class="govuk-width-container">
+    <aside class="govuk-width-container noprint">
       <%= render GovukComponent::PhaseBannerComponent.new(
         tag: { text: 'Beta' },
         text: "This is a new service – #{govuk_mail_to("test@mhclg.gov.uk", "give feedback or report a problem", subject: "Feedback about Lettings and Sales of Social Housing in England Data Collection")}".html_safe