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

Add icon svg on the submission thank you page

Browse Source 
Added icon svg and animation
This commit is contained in:
karemarsy 2020-04-22 20:13:24 +02:00
parent 144fa22820
commit 139ae58906
3 changed files with 143 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,7 @@ $light: #fff;
height: 100%;
}
.is-vcentered{
.is-vcentered {
height: 100vh;
}
@ -47,8 +47,6 @@ $light: #fff;
}
}
body {
min-height: 100vh;
}
@ -56,4 +54,125 @@ body {
.button.google {
background: rgb(225, 98, 89);
color: white;
}
.animation-ctn {
text-align: center;
margin-top: 5em;
}
@-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
}
}
/* other styles */
/* .svg svg {
display: none
}
*/
.inlinesvg .svg svg {
display: inline
}
.svg-icon {
align-items: center;
display: inline-flex;
justify-content: center;
height: 154px;
width: 154px;
}
/* .svg img {
display: none
} */
.svg-icon--order-success 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--order-success svg circle {
-webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
animation: checkmark-circle 0.8s ease-in-out backwards;
}
.svg-icon--order-success 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;
}

2
app/views/layouts/submission.html.erb
View File

@ -11,7 +11,7 @@
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body class="has-text-centered-mobile">
<body>
<main>
<%= yield %>

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

@ -1,16 +1,28 @@
<div class="container">
<div class="columns is-vcentered">
<div class="column is-half is-offset-one-quarter">
<div class="column is-family-secondary has-text-centered is-half is-offset-one-quarter">
<div>
<h5 class="is-size-1 has-text-centered has-text-warning">
<i class="fas fa-thumbs-up "></i>
</h5>
<div class="animation-ctn">
<div class="svg-icon svg-icon--order-success svg">
<svg xmlns="http://www.w3.org/2000/svg" width="154px" height="154px">
<g fill="none" stroke="#22AE73" stroke-width="2">
<circle cx="77" cy="77" r="72" style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;">
</circle>
<circle id="colored" fill="#22AE73" 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>
</div>
</div>
<h1 class="has-text-centered has-text-black is-size-1 has-text-weight-semibold is-family-secondary">Thank You!
<h1 class=" has-text-black is-size-1 has-text-weight-semibold">Thank You!
</h1><br>
<p class="is-size-5 has-text-centered has-text-black is-family-secondary">We received your submission.</p><br>
<div class="has-text-centered">
<button class="button is-active is-medium is-dark">Back to previous page</button>
<p class="is-size-5 has-text-black ">We received your submission.</p><br>
<div class="">
<button class="button is-success is-medium">Back to previous page</button>
</div>
</div>