From be196b2bcb88f7c35ae6d00ac6d9fc05bf2d5cfd Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Sun, 2 Jul 2023 00:14:26 +0300
Subject: [PATCH] optimize dashboard on mobile

---
 app/javascript/template_builder/builder.vue | 24 ++++++++++---
 app/javascript/template_builder/logo.vue    |  4 +--
 app/views/dashboard/index.html.erb          |  2 +-
 app/views/shared/_clipboard_copy.html.erb   |  4 +--
 app/views/shared/_flash.html.erb            | 20 ++++++-----
 app/views/shared/_logo.html.erb             |  2 +-
 app/views/shared/_navbar.html.erb           |  4 +--
 app/views/shared/_settings_nav.html.erb     |  4 +--
 app/views/storage_settings/index.html.erb   | 10 ++----
 app/views/submissions/show.html.erb         |  8 ++---
 app/views/templates/show.html.erb           | 40 ++++++++++-----------
 11 files changed, 68 insertions(+), 54 deletions(-)

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 0a8ea12d..42673175 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -25,7 +25,9 @@
             width="20"
             class="inline"
           />
-          Recipients
+          <span class="hidden md:inline">
+            Recipients
+          </span>
         </a>
         <button
           class="base-button"
@@ -41,7 +43,10 @@
           <IconDeviceFloppy
             v-else
             width="20"
-          />Save
+          />
+          <span class="hidden md:inline">
+            Save
+          </span>
         </button>
       </div>
     </div>
@@ -51,7 +56,7 @@
     >
       <div
         ref="previews"
-        class="overflow-y-auto overflow-x-hidden w-52 flex-none pr-3 mt-0.5 pt-0.5"
+        class="overflow-y-auto overflow-x-hidden w-52 flex-none pr-3 mt-0.5 pt-0.5 hidden lg:block"
       >
         <DocumentPreview
           v-for="(item, index) in template.schema"
@@ -100,9 +105,20 @@
             />
           </template>
         </div>
+        <div
+          v-if="sortedDocuments.length"
+          class="sticky md:hidden"
+          style="bottom: 100px"
+        >
+          <div class="px-4 py-3 rounded-2xl bg-base-200 flex items-center justify-between ml-4 mr-6">
+            <span class="w-full text-center text-lg">
+              You need a larger screen to use builder tools.
+            </span>
+          </div>
+        </div>
       </div>
       <div
-        class="relative w-80 flex-none pt-0.5 pr-4 pl-0.5"
+        class="relative w-80 flex-none pt-0.5 pr-4 pl-0.5 hidden md:block"
         :class="drawField ? 'overflow-hidden' : 'overflow-auto'"
       >
         <div
diff --git a/app/javascript/template_builder/logo.vue b/app/javascript/template_builder/logo.vue
index 943a1ce2..9e600cd4 100644
--- a/app/javascript/template_builder/logo.vue
+++ b/app/javascript/template_builder/logo.vue
@@ -1,7 +1,7 @@
 <template>
   <svg
-    height="40px"
-    width="40px"
+    height="40"
+    width="40"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index 21edf738..6aba24b0 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -24,7 +24,7 @@
             </p>
           </div>
         </a>
-        <div class="absolute top-0 bottom-0 w-0 pt-7 space-y-1.5 hidden group-hover:block" style="right: 40px">
+        <div class="absolute top-0 bottom-0 w-0 pt-7 space-y-1.5 hidden md:group-hover:block" style="right: 40px">
           <a href="<%= edit_template_path(template) %>" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
             <%= svg_icon('pencil', class: 'w-4 h-4') %>
           </a>
diff --git a/app/views/shared/_clipboard_copy.html.erb b/app/views/shared/_clipboard_copy.html.erb
index b4580fb3..9757d3e3 100644
--- a/app/views/shared/_clipboard_copy.html.erb
+++ b/app/views/shared/_clipboard_copy.html.erb
@@ -3,13 +3,13 @@
     <input type="radio" class="peer hidden">
     <span class="peer-checked:hidden flex items-center space-x-2">
       <%= svg_icon('link', class: local_assigns[:icon_class] || 'w-6 h-6 text-white') %>
-      <span>
+      <span class="hidden md:inline">
         <%= local_assigns[:copy_title] || 'Copy' %>
       </span>
     </span>
     <span class="hidden peer-checked:flex items-center space-x-2">
       <%= svg_icon('clipboard_copy', class: local_assigns[:icon_class] || 'w-6 h-6 text-white') %>
-      <span>
+      <span class="hidden md:inline">
         <%= local_assigns[:copied_title] || 'Copied' %>
       </span>
     </span>
diff --git a/app/views/shared/_flash.html.erb b/app/views/shared/_flash.html.erb
index 35c7e994..be4ecba0 100644
--- a/app/views/shared/_flash.html.erb
+++ b/app/views/shared/_flash.html.erb
@@ -1,15 +1,17 @@
 <div id="flash" class="absolute top-0 w-full h-0">
   <div class="max-w-xl mx-auto mt-1.5">
-    <div class="alert py-3">
-      <% if flash[:notice] %>
-        <%= svg_icon('info_circle', class: 'stroke-info flex-shrink-0 w-6 h-6') %>
-      <% else %>
-        <%= svg_icon('exclamation_circle', class: 'stroke-error flex-shrink-0 w-6 h-6') %>
-      <% end %>
-      <div>
-        <span><%= flash[:notice] || flash[:alert] %></span>
+    <div class="px-4 py-3 rounded-2xl bg-base-200 flex items-center justify-between mx-4 md:mx-0">
+      <div class="flex items-center space-x-3">
+        <% if flash[:notice] %>
+          <%= svg_icon('info_circle', class: 'stroke-info flex-none w-6 h-6') %>
+        <% else %>
+          <%= svg_icon('exclamation_circle', class: 'stroke-error flex-none w-6 h-6') %>
+        <% end %>
+        <div>
+          <span><%= flash[:notice] || flash[:alert] %></span>
+        </div>
       </div>
-      <a href="#" onclick="[event.preventDefault(), window.flash.remove()]">&times;</a>
+      <a href="#" onclick="[event.preventDefault(), window.flash.remove()]" class="mr-1">&times;</a>
     </div>
   </div>
 </div>
diff --git a/app/views/shared/_logo.html.erb b/app/views/shared/_logo.html.erb
index 2fcf8130..fbaa78b8 100644
--- a/app/views/shared/_logo.html.erb
+++ b/app/views/shared/_logo.html.erb
@@ -1,4 +1,4 @@
-<svg height="<%= local_assigns.fetch(:height, '37px') %>" width="<%= local_assigns.fetch(:width, '37px') %>" class="<%= local_assigns[:class] %>" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.998 511.998" xml:space="preserve">
+<svg height="<%= local_assigns.fetch(:height, '37') %>" width="<%= local_assigns.fetch(:width, '37') %>" class="<%= local_assigns[:class] %>" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.998 511.998" xml:space="preserve">
   <path style="fill:#C8AF9B;" d="M503.999,247.999c0,128.13-111.033,240-248,240S8,376.129,8,247.999s111.033-224,248-224
     S503.999,119.869,503.999,247.999z" />
   <path style="fill:#AA968C;" d="M255.999,23.999C119.033,23.999,8,119.868,8,247.999c0,24.631,4.138,48.647,11.74,71.397
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index 7c3be4f1..6c2bb1f9 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -6,11 +6,11 @@
   <% if signed_in? %>
     <div class="space-x-6">
       <%= link_to 'Settings', settings_profile_index_path, class: 'font-medium text-lg' %>
-      <div class="dropdown dropdown-end z-50">
+      <div class="dropdown dropdown-end">
         <label tabindex="0" class="cursor-pointer bg-base-content text-purple-300 rounded-full p-2 w-9 justify-center flex">
           <span class="text-sm align-text-top"><%= current_user.initials %></span>
         </label>
-        <ul tabindex="0" class="dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box whitespace-nowrap">
+        <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box whitespace-nowrap">
           <li>
             <%= link_to 'Profile', settings_profile_index_path, class: 'text-right' %>
           </li>
diff --git a/app/views/shared/_settings_nav.html.erb b/app/views/shared/_settings_nav.html.erb
index 8ed90f49..7a1a1e3c 100644
--- a/app/views/shared/_settings_nav.html.erb
+++ b/app/views/shared/_settings_nav.html.erb
@@ -1,6 +1,6 @@
 <menu-active class="block w-full md:w-52">
-  <div class="-ml-6">
-    <ul class="menu">
+  <div class="">
+    <ul class="menu px-0">
       <li class="menu-title py-0"><span>Settings</span></li>
       <li></li>
       <li>
diff --git a/app/views/storage_settings/index.html.erb b/app/views/storage_settings/index.html.erb
index dd57c1a1..8f029f0d 100644
--- a/app/views/storage_settings/index.html.erb
+++ b/app/views/storage_settings/index.html.erb
@@ -9,13 +9,9 @@
       <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="block relative">
         <ul class="items-center w-full text-sm font-medium text-gray-900 space-y-2 sm:space-y-0 sm:flex sm:space-x-2">
           <% options.each do |(label, val)| %>
-            <li class="w-full border border-neutral-focus rounded-xl hover:bg-neutral hover:text-white">
-              <%= f.label :selected, value: val, class: 'w-full py-3 text-sm font-medium flex items-center relative' do %>
-                <%= f.radio_button :selected, val, checked: value['service'] == val, data: { action: 'change:toggle-visible#trigger' }, class: 'base-radio self-start ml-3' %>
-                <span class="absolute text-center left-0 right-0">
-                  <%= label %>
-                </span>
-              <% end %>
+            <li class="w-full text-sm font-medium flex items-center relative group py-3.5">
+              <%= f.radio_button :selected, val, checked: value['service'] == val, id: "#{val}_radio", data: { action: 'change:toggle-visible#trigger' }, class: 'base-radio ml-3 relative peer z-10' %>
+              <%= f.label :selected, label, value: val, for: "#{val}_radio", class: 'absolute border-neutral-focus border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white' %>
             </li>
           <% end %>
         </ul>
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index 9b613bfe..61abcc5e 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -1,7 +1,7 @@
 <div style="max-width: 1600px" class="mx-auto pl-4">
   <div class="flex justify-between py-1.5 items-center pr-4">
-    <a href="<%= template_path(@submission.template) %>" class="flex space-x-3">
-      <span><%= render 'shared/logo' %></span>
+    <a href="<%= template_path(@submission.template) %>" class="flex space-x-3 py-1">
+      <span><%= render 'shared/logo', width: 40, height: 40 %></span>
       <span class="text-3xl font-semibold focus:text-clip"><%= @submission.template.name %></span>
     </a>
     <div class="space-x-3 flex items-center">
@@ -20,7 +20,7 @@
     </div>
   </div>
   <div class="flex" style="max-height: calc(100vh - 60px)">
-    <div class="overflow-y-auto overflow-x-hidden w-52 flex-none pr-3 mt-0.5 pt-0.5">
+    <div class="overflow-y-auto overflow-x-hidden hidden lg:block w-52 flex-none pr-3 mt-0.5 pt-0.5">
       <% @submission.template.schema.each do |item| %>
         <% document = @submission.template.documents.find { |a| item['attachment_uuid'] == a.uuid } %>
         <a href="#<%= "page-#{document.uuid}-0" %>" onclick="[event.preventDefault(), window[event.target.closest('a').href.split('#')[1]].scrollIntoView({ behavior: 'smooth', block: 'start' })]" class="block cursor-pointer">
@@ -53,7 +53,7 @@
         <% end %>
       </div>
     </div>
-    <div class="relative w-80 flex-none pt-0.5 pr-4 pl-0.5 overflow-auto space">
+    <div class="hidden md:block relative 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] %>
       <% submitter_fields_index = @submission.template.fields.group_by { |f| f['submitter_uuid'] } %>
       <% @submission.template.submitters.each_with_index do |item, index| %>
diff --git a/app/views/templates/show.html.erb b/app/views/templates/show.html.erb
index f264553b..5ac08ebe 100644
--- a/app/views/templates/show.html.erb
+++ b/app/views/templates/show.html.erb
@@ -1,4 +1,4 @@
-<div class="flex md:justify-between items-start mb-6">
+<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:justify-between items-start mb-6">
   <h1 class="text-4xl font-semibold mr-4" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
     <%= @template.name %>
   </h1>
@@ -36,7 +36,7 @@
 <% if @submissions.present? %>
   <div class="space-y-4">
     <% @submissions.each do |submission| %>
-      <a href="<%= submission_path(submission) %>" class="bg-base-200 w-full flex justify-between rounded-2xl px-6 py-5 items-center">
+      <a href="<%= submission_path(submission) %>" class="bg-base-200 w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:justify-between rounded-2xl px-6 py-5 md:items-center">
         <% submitters = submission.template.submitters.filter_map { |item| submission.submitters.find { |e| e.uuid == item['uuid'] } } %>
         <% if submitters.size == 1 %>
           <div>
@@ -52,48 +52,48 @@
           </div>
           <div class="flex space-x-2 items-center">
             <div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
-              <span class="badge <%= status_badges[submitter.status] %> w-32 badge-lg btn-sm uppercase text-sm font-medium border-1">
+              <span class="badge <%= status_badges[submitter.status] %> md:w-32 badge-lg btn-sm uppercase text-sm font-medium border-1">
                 <%= submitter.status %>
               </span>
             </div>
             <% if submitter.completed_at? %>
               <form onsubmit="event.preventDefault()">
                 <button onclick="event.stopPropagation()">
-                  <download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="btn btn-sm btn-neutral text-white w-36">
+                  <download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="btn btn-sm btn-neutral text-white md:w-36">
                     <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
                       <%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
-                      <span>Download</span>
+                      <span class="hidden md:inline">Download</span>
                     </span>
                     <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
                       <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
-                      <span>Downloa...</span>
+                      <span class="hidden md:inline">Downloa...</span>
                     </span>
                   </download-button>
                 </button>
               </form>
             <% else %>
-              <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link' %>
+              <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white md:w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link' %>
             <% end %>
-            <%= button_to button_title(title: submitter.completed_at? ? 'Archive' : 'Remove', disabled_with: 'Remov'), submission_path(submission), class: 'btn btn-outline btn-sm w-28', title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
+            <%= button_to button_title(title: submitter.completed_at? ? 'Archive' : 'Remove', disabled_with: 'Remov'), submission_path(submission), class: 'btn btn-outline btn-sm md:w-28', title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
           </div>
         <% else %>
-          <div class="space-y-1 w-full mr-4">
+          <div class="space-y-1 w-full md:mr-2">
             <% submitters.each_with_index do |submitter, index| %>
               <div class="flex justify-between items-center">
                 <span class="flex space-x-2 text-lg">
                   <%= render 'icons/user_number', class: 'w-6 h-6 stroke-2', number: index + 1 %>
-                  <span>
+                  <span class="break-all">
                     <%= submitter.email %>
                   </span>
                 </span>
                 <% unless submitters.all?(&:completed_at?) %>
                   <div class="flex items-center space-x-3">
                     <div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
-                      <span class="badge w-24 <%= status_badges[submitter.status] %> btn-xs uppercase text-xs font-medium border-1">
+                      <span class="badge md:w-24 <%= status_badges[submitter.status] %> btn-xs uppercase text-xs font-medium border-1">
                         <%= submitter.status %>
                       </span>
                     </div>
-                    <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-xs text-xs btn-neutral text-white w-32 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link' %>
+                    <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-xs text-xs btn-neutral text-white md:w-32 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link' %>
                   </div>
                 <% end %>
               </div>
@@ -103,26 +103,26 @@
             <% if submitters.all?(&:completed_at?) %>
               <% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
               <div class="tooltip flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
-                <span class="badge <%= status_badges[latest_submitter.status] %> w-32 badge-lg btn-sm uppercase text-sm font-medium border-1">
+                <span class="badge <%= status_badges[latest_submitter.status] %> md:w-32 badge-lg btn-sm uppercase text-sm font-medium border-1">
                   <%= latest_submitter.status %>
                 </span>
               </div>
               <form onsubmit="event.preventDefault()">
                 <button onclick="event.stopPropagation()">
-                  <download-button data-src="<%= submitter_download_index_path(latest_submitter.slug) %>" class="btn btn-sm btn-neutral text-white w-36">
+                  <download-button data-src="<%= submitter_download_index_path(latest_submitter.slug) %>" class="btn btn-sm btn-neutral text-white md:w-36">
                     <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
                       <%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
-                      <span>Download</span>
+                      <span class="hidden md:inline">Download</span>
                     </span>
                     <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
                       <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
-                      <span>Downloa...</span>
+                      <span class="hidden md:inline">Downloa...</span>
                     </span>
                   </download-button>
                 </button>
               </form>
             <% end %>
-            <%= button_to button_title(title: submitters.all?(&:completed_at?) ? 'Archive' : 'Remove', disabled_with: 'Remov'), submission_path(submission), class: 'btn btn-outline btn-sm w-28', title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
+            <%= button_to button_title(title: submitters.all?(&:completed_at?) ? 'Archive' : 'Remove', disabled_with: 'Remov'), submission_path(submission), class: 'btn btn-outline btn-sm md:w-28', title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
           </div>
         <% end %>
       </a>
@@ -133,11 +133,11 @@
   <div class="card bg-base-200">
     <div class="card-body text-center py-16">
       <div class="max-w-md mx-auto">
-        <p class="text-3xl font-bold text-base-content mb-4">There are no Submissions yet</p>
-        <p class="text-gray-600">Send an invitation to fill and submit the documents via email</p>
+        <p class="text-3xl font-bold text-base-content mb-4">There are no Submissions</p>
+        <p class="text-gray-600">Send an invitation to fill and submit the documents</p>
         <%= link_to new_template_submission_path(@template), class: 'base-button mt-6', data: { turbo_frame: 'modal' } do %>
           <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-          <span class="hidden md:block">Add Recipients</span>
+          <span class="mr-1">Add Recipients</span>
         <% end %>
       </div>
     </div>