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 'bulma/bulma';
@import "checkmark-icon";
@import './demo'; @import './demo';
.is-font-logo { .is-font-logo {
@ -35,6 +36,10 @@ $light: #fff;
height: 100%; height: 100%;
} }
.is-vcentered {
height: 100vh;
}
.content { .content {
padding: 30px 60px 50px; padding: 30px 60px 50px;
@ -43,8 +48,6 @@ $light: #fff;
} }
} }
body { body {
min-height: 100vh; min-height: 100vh;
} }
@ -67,3 +70,13 @@ body {
.submission-table tbody { .submission-table tbody {
font-size: 0.75em; 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' require 'google/api_client/client_secrets'
class FormsController < ApplicationController class FormsController < ApplicationController
before_action :require_login, except: [:form] before_action :require_login, except: [:form]
layout 'submission', only: [:form]
def new def new
@form = current_user.forms.build @form = current_user.forms.build
@ -39,6 +40,7 @@ class FormsController < ApplicationController
end end
def form def form
@form = Form.find_by!(token: params[:id]) @form = Form.find_by!(token: params[:id])
end end

1
app/controllers/submissions_controller.rb
View File

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