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
Download Patch File Download Diff File Expand all files Collapse all files

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>