bumi/tinyforms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'form-submission-thank-you-page'

Browse Source 
* form-submission-thank-you-page:
  Cleanup
  Remove testing page render
  Add icon svg on the submission thank you page
  Make codes more readable
  Make the submission thank you page vertically centered
  Fix the identation of codes
  Implement the submission thank you page
  Define a custom layout for submission thank you page
This commit is contained in:
bumi 2020-04-22 21:00:34 +02:00
commit 81d86315aa
6 changed files with 152 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/stylesheets/application.css.scss
View File

@ -25,6 +25,7 @@ $light: #fff;
@import 'bulma/bulma';
@import "checkmark-icon";
@import './demo';
.is-font-logo {
@ -35,6 +36,10 @@ $light: #fff;
height: 100%;
}
.is-vcentered {
height: 100vh;
}
.content {
padding: 30px 60px 50px;
@ -43,8 +48,6 @@ $light: #fff;
}
}
body {
min-height: 100vh;
}
@ -66,4 +69,14 @@ body {
.submission-table tbody {
font-size: 0.75em;
}
.inline-svg svg {
display: inline
}
.svg-icon {
align-items: center;
display: inline-flex;
justify-content: center;
}

89
app/assets/stylesheets/checkmark-icon.css.scss Normal file
View File

@ -0,0 +1,89 @@
@-webkit-keyframes checkmark {
0% {
stroke-dashoffset: 100px
}
100% {
stroke-dashoffset: 200px
}
}
@-ms-keyframes checkmark {
0% {
stroke-dashoffset: 100px
}
100% {
stroke-dashoffset: 200px
}
}
@keyframes checkmark {
0% {
stroke-dashoffset: 100px
}
100% {
stroke-dashoffset: 0px
}
}
@-webkit-keyframes checkmark-circle {
0% {
stroke-dashoffset: 480px
}
100% {
stroke-dashoffset: 960px;
}
}
@-ms-keyframes checkmark-circle {
0% {
stroke-dashoffset: 240px
}
100% {
stroke-dashoffset: 480px
}
}
@keyframes checkmark-circle {
0% {
stroke-dashoffset: 480px
}
100% {
stroke-dashoffset: 960px
}
}
@keyframes colored-circle {
0% {
opacity: 0
}
100% {
opacity: 100
}
}
.svg-icon-checkmark svg polyline {
-webkit-animation: checkmark 0.30s ease-in-out 0.9s backwards;
animation: checkmark 0.30s ease-in-out 0.9s backwards
}
.svg-icon-checkmark svg g {
stroke: $success;
}
.svg-icon-checkmark svg circle {
-webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
animation: checkmark-circle 0.8s ease-in-out backwards;
}
.svg-icon-checkmark svg circle#colored {
-webkit-animation: colored-circle 0.8s ease-in-out 0.9s backwards;
animation: colored-circle 0.8s ease-in-out 0.9s backwards;
fill: $success;
}

2
app/controllers/forms_controller.rb
View File

@ -2,6 +2,7 @@ require 'google/apis/sheets_v4'
require 'google/api_client/client_secrets'
class FormsController < ApplicationController
before_action :require_login, except: [:form]
layout 'submission', only: [:form]
def new
@form = current_user.forms.build
@ -39,6 +40,7 @@ class FormsController < ApplicationController
end
def form
@form = Form.find_by!(token: params[:id])
end

1
app/controllers/submissions_controller.rb
View File

@ -2,6 +2,7 @@ require 'google/apis/sheets_v4'
class SubmissionsController < ApplicationController
skip_before_action :verify_authenticity_token
wrap_parameters false
layout 'submission', only: [:create]
def create
@form = Form.find_by!(token: params[:form_id])

21
app/views/layouts/submission.html.erb Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>Tinyform</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<main>
<%= yield %>
</main>
</body>
</html>

25
app/views/submissions/create.html.erb
View File

@ -1 +1,24 @@
Thanks
<div class="container">
<div class="columns is-vcentered">
<div class="column has-text-centered is-half is-offset-one-quarter">
<div class="svg-icon svg-icon-checkmark inline-svg">
<svg xmlns="http://www.w3.org/2000/svg" width="154px" height="154px">
<g fill="none" stroke-width="2">
<circle cx="77" cy="77" r="72" style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;">
</circle>
<circle id="colored" cx="77" cy="77" r="72"
style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;"></circle>
<polyline class="st0" stroke="#fff" stroke-width="10" points="43.5,77.8 63.7,97.9 112.2,49.4 "
style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;" />
</g>
</svg>
</div>
<h1 class="title">Thank You!</h1>
<p class="subtitle is-5">We received your submission.</p>
<p>
<button onclick="window.history.back()" class="button is-success">Back to previous page</button>
<p>
</div>
</div>
</div>