WIP

app/javascript/stylesheets/print.scss

@@ -6,6 +6,13 @@
   border: 1px solid gray;
 }
 
+.one-grid {
+  display: grid;
+  grid-template-columns: auto;
+  font-size: 10px;
+  grid-auto-columns: 1fr 200px;
+}
+
 .two-grid {
   display: grid;
   grid-template-columns: auto auto;
@@ -13,6 +20,13 @@
   grid-auto-columns: 1fr 200px;
 }
 
+.four-grid {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  font-size: 10px;
+  grid-auto-columns: 1fr 200px;
+}
+
 .three-grid {
   display: grid;
   grid-template-columns: auto auto auto;
@@ -24,6 +38,8 @@
   font-size: small;
   margin-bottom: 0;
   margin-top: 5px;
+  background-color: #1d70b8;
+  color: white;
 }
 
 .govuk-body{

app/views/form/print.html.erb

@@ -3,11 +3,11 @@
 <%= form_with do |f| %>
   <% @form.all_subsections.each do |subsection_name, subsection_content| %>
     <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" %>
+    <% large_answers = @form.questions_for_subsection(subsection_name).any? {|key, info| info["type"]== 'checkbox' || info["type"]== 'radio' && info["answer_options"].keys.length > 4} ? "one-grid" : "three-grid" %>
     <div class="<%= large_answers %>">
         <% @form.questions_for_subsection(subsection_name).each_with_index do |question, index| %>
           <div class="grid-row">
-            <%= render partial: "form/print/#{question[1]["print_type"] || question[1]["type"]}_question", locals: { question_key: question[0].to_sym, question: question[1], index: index, f: f } %>
+            <%= render partial: "form/print/#{question[1]["print_type"] || question[1]["type"]}_question", locals: { question_key: question[0].to_sym, question: question[1], index: index, f: f, outer_grid: large_answers } %>
           </div>
       <% end %>
     </div>

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

@@ -1,23 +1 @@
-<div class="cell govuk-body">
-  <strong class="cell question_cell">
-    <%= question["header"].html_safe.present? ?  question["header"].html_safe : "missing question header"%>
-  </strong>
-</div>
-<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><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>
+<%= render partial: "form/print/radio_question", locals: { question_key: question_key, question: question, index: index, f: f, outer_grid: outer_grid } %>

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

@@ -0,0 +1,10 @@
+<div class="cell govuk-body">
+  <strong class="cell">
+    <%= question["header"].html_safe.present? ?  question["header"].html_safe : "missing question header"%><br/>
+  </strong>
+</div>
+<div>
+  <div class="cell_answer">
+    <br/>
+  </div>
+</div>

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

@@ -3,21 +3,59 @@
     <%= question["header"].html_safe.present? ?  question["header"].html_safe : "missing question header"%>
   </strong>
 </div>
+<%if outer_grid == 'three-grid' %>
   <div class="two-grid govuk-body">
     <div>
-    <% question["answer_options"].each do |index, answer_option| %>
+      <% question["answer_options"].each_with_index do |answer_option, index| %>
         <% if index.to_i.even? %>
           <input type="checkbox"/>
-        <label><%=answer_option %></label><br/>
+          <label><%=answer_option[1] %></label><br/>
         <% end %>
       <%end %>
     </div>
     <div>
-    <% question["answer_options"].each do |index, answer_option| %>
+      <% question["answer_options"].each_with_index do |answer_option, index| %>
         <% if !index.to_i.even?%>
           <input type="checkbox"/>
-        <label><%=answer_option %></label><br/>
+          <label><%=answer_option[1] %></label><br/>
         <% end %>
       <%end %>
     </div>
   </div>
+
+<% else %>
+  <div class="four-grid govuk-body">
+    <div>
+      <% question["answer_options"].each_with_index do |answer_option, index| %>
+        <% if index.to_i.even? && index.to_i%4 != 0 %>
+          <input type="checkbox"/>
+          <label><%=answer_option[1] %></label><br/>
+        <% end %>
+      <%end %>
+    </div>
+    <div>
+      <% question["answer_options"].each_with_index do |answer_option, index| %>
+        <% if !index.to_i.even? && index.to_i%3 != 0%>
+          <input type="checkbox"/>
+          <label><%=answer_option[1] %></label><br/>
+        <% end %>
+      <%end %>
+    </div>
+    <div>
+      <% question["answer_options"].each_with_index do |answer_option, index| %>
+        <% if index.to_i.even? && index.to_i%4 == 0%>
+          <input type="checkbox"/>
+          <label><%=answer_option[1] %></label><br/>
+        <% end %>
+      <%end %>
+    </div>
+    <div>
+      <% question["answer_options"].each_with_index do |answer_option, index| %>
+        <% if !index.to_i.even? && index.to_i%3 == 0%>
+          <input type="checkbox"/>
+          <label><%=answer_option[1] %></label><br/>
+        <% end %>
+      <%end %>
+    </div>
+  </div>
+<% end %>

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

@@ -1,11 +1 @@
-<div class="cell govuk-body">
-  <strong class="cell question_cell">
-    <%= question["header"].html_safe.present? ?  question["header"].html_safe : "missing question header"%>
-  </strong>
-</div>
-<div class="govuk-body">
-  <% question["answer_options"].each do |index, answer_option| %>
-    <input type="checkbox"/>
-    <label><%=answer_option %></label>
-  <%end %>
-</div>
+<%= render partial: "form/print/radio_question", locals: { question_key: question_key, question: question, index: index, f: f, outer_grid: outer_grid } %>