optimize dashboard on mobile

This commit is contained in:
Alex Turchyn
2023-07-02 00:14:26 +03:00
parent ca232e40ac
commit be196b2bcb
11 changed files with 68 additions and 54 deletions
+20 -20
View File
@@ -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>