4 changed files with 5 additions and 73 deletions
-
4app/views/layouts/_notification.html.erb
-
2app/views/layouts/application.html.erb
-
68app/views/layouts/toaster/_toaster.html.erb
-
4lib/formatters/basic_formatter.rb
@ -1,68 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<style> |
|||
#snackbar { |
|||
visibility: hidden; |
|||
min-width: 250px; |
|||
margin-left: -125px; |
|||
background-color: #333; |
|||
color: #fff; |
|||
text-align: center; |
|||
border-radius: 2px; |
|||
padding: 16px; |
|||
position: fixed; |
|||
z-index: 1; |
|||
left: 50%; |
|||
top: 30px; |
|||
font-size: 17px; |
|||
} |
|||
|
|||
#snackbar.show { |
|||
visibility: visible; |
|||
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; |
|||
animation: fadein 0.5s, fadeout 0.5s 2.5s; |
|||
} |
|||
|
|||
@-webkit-keyframes fadein { |
|||
from {top: 0; opacity: 0;} |
|||
to {top: 30px; opacity: 1;} |
|||
} |
|||
|
|||
@keyframes fadein { |
|||
from {top: 0; opacity: 0;} |
|||
to {top: 30px; opacity: 1;} |
|||
} |
|||
|
|||
@-webkit-keyframes fadeout { |
|||
from {top: 30px; opacity: 1;} |
|||
to {top: 0; opacity: 0;} |
|||
} |
|||
|
|||
@keyframes fadeout { |
|||
from {top: 30px; opacity: 1;} |
|||
to {top: 0; opacity: 0;} |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
|
|||
<h2>Snackbar / Toast</h2> |
|||
<p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p> |
|||
<p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p> |
|||
|
|||
<button onclick="myFunction()">Show Snackbar</button> |
|||
|
|||
<div id="snackbar">Some text some message..</div> |
|||
|
|||
<script> |
|||
function myFunction() { |
|||
var x = document.getElementById("snackbar"); |
|||
x.className = "show"; |
|||
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); |
|||
} |
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue