pvincent
11 months ago
15 changed files with 170 additions and 31 deletions
-
3.vscode/extensions.json
-
13.vscode/settings.json
-
1Gemfile
-
2Gemfile.lock
-
39README.md
-
6app/controllers/scores_controller.rb
-
44app/views/layouts/_notification.html.erb
-
5app/views/layouts/application.html.erb
-
68app/views/layouts/toaster/_toaster.html.erb
-
4app/views/scores/_form.html.erb
-
4app/views/scores/edit.html.erb
-
5app/views/scores/index.html.erb
-
1app/views/scores/new.html.erb
-
4app/views/scores/show.html.erb
-
2lib/formatters/basic_formatter.rb
@ -0,0 +1,44 @@ |
|||
<h2>NOTIFICATION BAR</h2> |
|||
|
|||
<nav class='relative w-full'> |
|||
<% if alert.present? %> |
|||
<div class="absolute inset-x-0 top-10"> |
|||
<div class="flex max-w-sm w-full bg-white shadow-md rounded-lg mx-auto"> |
|||
<div class="w-2 bg-red-600"> |
|||
</div> |
|||
<div class="w-full flex justify-between items-start px-2 py-2"> |
|||
<div class="flex flex-col ml-2"> |
|||
<label class="text-gray-800">Alert</label> |
|||
<p class="text-gray-500 "><%= alert %></p> |
|||
</div> |
|||
<a href="#"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
|||
</svg> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<% end %> |
|||
|
|||
<% if notice.present? %> |
|||
<div class="absolute inset-x-0 top-50"> |
|||
<div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto"> |
|||
<div class="w-2 bg-green-600"> |
|||
</div> |
|||
<div class="w-full flex justify-between items-start px-2 py-2"> |
|||
<div class="flex flex-col ml-2"> |
|||
<label class="text-gray-800">Notice</label> |
|||
<p class="text-gray-500 "><%= notice %></p> |
|||
</div> |
|||
<a href="#"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
|||
</svg> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<% end %> |
|||
|
|||
</nav> |
@ -0,0 +1,68 @@ |
|||
<!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> |
@ -1,8 +1,8 @@ |
|||
<div class="mx-auto md:w-2/3 w-full"> |
|||
<h1 class="font-bold text-4xl">Editing score</h1> |
|||
|
|||
<%= render "form", score: @score %> |
|||
<%= render "form", score: @score %> |
|||
|
|||
<%= link_to "Show this score", @score, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> |
|||
<%= link_to "Show this score", @score, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> |
|||
<%= link_to "Back to scores", scores_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> |
|||
</div> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue