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

Merge branch 'master' into landing-page

Browse Source
This commit is contained in:
Yannick Musafiri 2020-04-23 12:01:54 -07:00 committed by GitHub
commit cd06ac2dd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 158 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
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;
}
@ -59,10 +62,11 @@ body {
}
.table-wrapper {
overflow: auto;
overflow-y: scroll;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
/*
Colours
#FFFFFF - White
@ -302,3 +306,16 @@ Footer
#footer a {
color: #FFFFFF !important;
}
.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])

2
app/views/forms/show.html.erb
View File

@ -27,7 +27,7 @@
</div>
<div class="box table-wrapper">
<table class="table is-fullwidth is-striped is-hoverable">
<table class="submission-table table is-fullwidth is-striped is-hoverable">
<thead>
<tr>
<% @form.spreadsheet_headers.each do |value| %>

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>