From afeb6dd3186f24f9a812844e2556f146325fb425 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Wed, 17 Jan 2024 01:13:26 +0200
Subject: [PATCH] optimize submissions show page for mobile devices

---
 app/views/icons/_chevron_left.html.erb |  4 ++++
 app/views/submissions/show.html.erb    | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 app/views/icons/_chevron_left.html.erb

diff --git a/app/views/icons/_chevron_left.html.erb b/app/views/icons/_chevron_left.html.erb
new file mode 100644
index 00000000..389b06ad
--- /dev/null
+++ b/app/views/icons/_chevron_left.html.erb
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M15 6l-6 6l6 6" />
+</svg>
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index 1c22ca0e..93f02f68 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -41,7 +41,7 @@
         </a>
       <% end %>
     </div>
-    <div class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
+    <div id="document_view" class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
       <div class="pr-3.5 pl-0.5">
         <% fields_index = Templates.build_field_areas_index(@submission.template_fields || @submission.template.fields) %>
         <% values = @submission.submitters.reduce({}) { |acc, sub| acc.merge(sub.values) } %>
@@ -71,7 +71,7 @@
         <% end %>
       </div>
     </div>
-    <div class="hidden md:block relative w-80 flex-none pt-0.5 pr-4 pl-0.5 overflow-auto space">
+    <div id="parties_view" class="hidden md:block relative w-full md:w-80 flex-none pt-0.5 pr-4 pl-0.5 overflow-auto space">
       <% colors = %w[bg-red-500 bg-sky-500 bg-emerald-500 bg-yellow-300 bg-purple-600 bg-pink-500 bg-cyan-500 bg-orange-500 bg-lime-500 bg-indigo-500] %>
       <% submitter_fields_index = (@submission.template_fields || @submission.template.fields).group_by { |f| f['submitter_uuid'] } %>
       <% submitter_field_counters = Hash.new { 0 } %>
@@ -173,5 +173,16 @@
       <% end %>
     </div>
   </div>
+  <label class="md:hidden btn btn-sm btn-neutral text-white text-base z-10 fixed bottom-2 right-2 h-16 shadow-lg">
+    <input type="checkbox" class="peer hidden" onclick="[document_view.classList.toggle('hidden'), parties_view.classList.toggle('hidden')]">
+    <span class="peer-checked:hidden flex items-center space-x-2">
+      <%= svg_icon('users', class: 'w-8 h-8') %>
+      <span>Signers</span>
+    </span>
+    <span class="hidden peer-checked:flex items-center">
+      <%= svg_icon('chevron_left', class: 'w-8 h-8') %>
+      <span>Back</span>
+    </span>
+  </label>
 </div>
 <%= render 'scripts/autosize_field' %>