adminbruno
/
docuseal
mirror of https://github.com/docusealco/docuseal
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

optimize dashboard on mobile

Browse Source
pull/105/head
Alex Turchyn 2 years ago
parent ca232e40ac
commit be196b2bcb
11 changed files with 68 additions and 54 deletions
Show Stats Download Patch File Download Diff File

22
app/javascript/template_builder/builder.vue
Unescape View File

@ -25,7 +25,9 @@
width="20"
class="inline"
/>
<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

4
app/javascript/template_builder/logo.vue
Unescape View File

@ -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"

2
app/views/dashboard/index.html.erb
Unescape View File

@ -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>

4
app/views/shared/_clipboard_copy.html.erb
Unescape View File

@ -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>

10
app/views/shared/_flash.html.erb
Unescape View File

@ -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">
<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-shrink-0 w-6 h-6') %>
<%= svg_icon('info_circle', class: 'stroke-info flex-none w-6 h-6') %>
<% else %>
<%= svg_icon('exclamation_circle', class: 'stroke-error flex-shrink-0 w-6 h-6') %>
<%= svg_icon('exclamation_circle', class: 'stroke-error flex-none w-6 h-6') %>
<% end %>
<div>
<span><%= flash[:notice] || flash[:alert] %></span>
</div>
<a href="#" onclick="[event.preventDefault(), window.flash.remove()]">&times;</a>
</div>
<a href="#" onclick="[event.preventDefault(), window.flash.remove()]" class="mr-1">&times;</a>
</div>
</div>
</div>

2
app/views/shared/_logo.html.erb
Unescape View File

@ -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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

4
app/views/shared/_navbar.html.erb
Unescape View File

@ -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>

4
app/views/shared/_settings_nav.html.erb
Unescape View File

@ -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>

10
app/views/storage_settings/index.html.erb
Unescape View File

@ -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>

8
app/views/submissions/show.html.erb
Unescape View File

@ -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| %>

40
app/views/templates/show.html.erb
Unescape 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>

Write Preview
Loading…
Cancel
Save