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

add initial styles for start form

Browse Source
pull/105/head
Alex Turchyn 2 years ago
parent 28429c1167
commit b6bb10b45c
8 changed files with 130 additions and 19 deletions
Show Stats Download Patch File Download Diff File

27
app/javascript/form.scss
Unescape View File

@ -30,3 +30,30 @@ button .enabled {
button[disabled] .enabled { button[disabled] .enabled {
display: none; display: none;
} }
button .disabled {
display: none;
}
button[disabled] .disabled {
display: initial;
}
button .enabled {
display: initial;
}
button[disabled] .enabled {
display: none;
}
.btn {
@apply no-animation;
}
.base-input {
@apply input input-bordered bg-white;
}
.base-button {
@apply btn btn-neutral text-white text-base;
}

6
app/views/icons/_download.html.erb
Unescape View File

@ -0,0 +1,6 @@
<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="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
<path d="M7 11l5 5l5 -5" />
<path d="M12 4l0 12" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

7
app/views/icons/_mail_forward.html.erb
Unescape View File

@ -0,0 +1,7 @@
<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="M12 18h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5" />
<path d="M3 6l9 6l9 -6" />
<path d="M15 18h6" />
<path d="M18 15l3 3l-3 3" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 447 B

6
app/views/layouts/form.html.erb
Unescape View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html data-theme="docuseal" class="h-full">
<head> <head>
<title> <title>
Docuseal Docuseal
@ -11,7 +11,9 @@
<%= stylesheet_pack_tag 'form', media: 'all' %> <%= stylesheet_pack_tag 'form', media: 'all' %>
<%= yield :head %> <%= yield :head %>
</head> </head>
<body class="font-sans antialiased font-normal leading-normal bg-white text-gray-700"> <body class="h-full">
<div class="max-w-6xl mx-auto px-4 md:px-2">
<%= yield %> <%= yield %>
</div>
</body> </body>
</html> </html>

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

@ -1,11 +1,11 @@
<span class="enabled"> <span class="enabled">
<span class="flex justify-center space-x-3"> <span class="flex justify-center space-x-2">
<%= icon if icon %> <%= icon if icon %>
<span><%= title %></span> <span><%= title %></span>
</span> </span>
</span> </span>
<span class="disabled"> <span class="disabled">
<span class="flex justify-center space-x-3"> <span class="flex justify-center space-x-2">
<%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %> <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
<span><%= disabled_with %>...</span> <span><%= disabled_with %>...</span>
</span> </span>

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

@ -1,4 +1,4 @@
<svg height="37px" width="37px" 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, '37px') %>" width="<%= local_assigns.fetch(:width, '37px') %>" 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 <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" /> 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 <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.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

49
app/views/start_form/show.html.erb
Unescape View File

@ -1,9 +1,44 @@
You have been invited to submit template <%= @template.name %> <div class="max-w-xl mx-auto px-2 mt-12">
<%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put do |f| %> <div class="card bg-base-200">
Provide youe email to start <div class="card-body">
<div class="space-y-4 mx-auto">
<div class="space-y-4">
<div class="flex items-center justify-center">
<div class="flex items-center">
<div class="mr-3">
<%= render 'shared/logo', width: "50px", height: "50px"%>
</div>
<h1 class="text-5xl font-bold text-center">DocuSeal</h1>
</div>
</div>
<h2 class="text-xl font-semibold text-center">You have been invited to submit the document</h2>
<div class="flex items-center justify-center bg-neutral rounded-xl p-4 md:justify-start">
<div class="flex items-center">
<div class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-gray-100 " 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="M3 19c3.333 -2 5 -4 5 -6c0 -3 -1 -3 -2 -3s-2.032 1.085 -2 3c.034 2.048 1.658 2.877 2.5 4c1.5 2 2.5 2.5 3.5 1c.667 -1 1.167 -1.833 1.5 -2.5c1 2.333 2.333 3.5 4 3.5h2.5" />
<path d="M20 17v-12c0 -1.121 -.879 -2 -2 -2s-2 .879 -2 2v12l2 2l2 -2z" />
<path d="M16 7h4" />
</svg>
</div>
<div> <div>
<%= f.label :email %> <h3 class="text-gray-100 font-bold mb-1"><%= @template.name %></h3>
<%= f.email_field :email, required: true %> <p class="text-sm text-gray-300">Invited by <%= @template.account.name %></p>
</div>
</div>
</div>
</div>
<%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put, html: { class: 'space-y-4' } do |f| %>
<div class="form-control !mt-0">
<%= f.label :email, class: 'label' %>
<%= f.email_field :email, required: true, class: 'base-input', placeholder: 'Provide youe email to start' %>
</div>
<div class="form-control">
<%= f.button button_title(title: 'Confirm', disabled_with: 'Processing'), class: 'base-button' %>
</div>
<% end %>
</div>
</div>
</div> </div>
<%= f.button button_title(title: 'Confirm', disabled_with: 'Processing') %> </div>
<% end %>

44
app/views/submit_form/completed.html.erb
Unescape View File

@ -1,5 +1,39 @@
<p> <div class="max-w-xl mx-auto px-2 mt-12">
Form completed - thanks! <div class="card bg-base-200">
</p> <div class="card-body">
<%= button_to button_title(title: 'Send copy to Email', disabled_with: 'Sending'), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' } %> <div class="space-y-4 mx-auto">
<%= button_to button_title(title: 'Download documents', disabled_with: 'Downloading'), submitter_download_index_path(@submitter.slug), method: :get, form: { onsubmit: 'event.submitter.disabled = true' } %> <div class="space-y-4">
<div class="flex items-center justify-center">
<div class="flex items-center">
<div class="mr-3">
<%= render 'shared/logo', width: "50px", height: "50px"%>
</div>
<h1 class="text-5xl font-bold text-center">DocuSeal</h1>
</div>
</div>
<div class="flex items-center justify-center bg-base-300 rounded-xl p-4 md:justify-start mb-4">
<div class="flex items-center">
<div class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-gray-700 " 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="M3 19c3.333 -2 5 -4 5 -6c0 -3 -1 -3 -2 -3s-2.032 1.085 -2 3c.034 2.048 1.658 2.877 2.5 4c1.5 2 2.5 2.5 3.5 1c.667 -1 1.167 -1.833 1.5 -2.5c1 2.333 2.333 3.5 4 3.5h2.5" />
<path d="M20 17v-12c0 -1.121 -.879 -2 -2 -2s-2 .879 -2 2v12l2 2l2 -2z" />
<path d="M16 7h4" />
</svg>
</div>
<div>
<h3 class="text-lg text-gray-700 font-bold mb-1">Document signed</h3>
<p class="text-sm text-gray-500">Signed on <%= l(@submission.completed_at.to_date, format: :short) %></p>
</div>
</div>
</div>
</div>
<div>
<%= button_to button_title(title: 'Send copy to Email', disabled_with: 'Sending', icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submission_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %>
<div class="divider">OR</div>
<%= button_to button_title(title: 'Download documents', disabled_with: 'Downloading', icon: svg_icon('download', class: 'w-6 h-6')), submission_download_index_path(@submitter.slug), method: :get, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %>
</div>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save