Skip to content

Commit

Permalink
DRY flash to 1 element and load svg/classes dynamically
Browse files Browse the repository at this point in the history
  • Loading branch information
Ryan Kulp committed Dec 28, 2023
1 parent f5a5b94 commit e5a4858
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 44 deletions.
12 changes: 12 additions & 0 deletions app/helpers/application_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,16 @@ def nav_link_classes(path = nil)
defaults.gsub!('gray', 'black').gsub!('-medium', '-bold') if request.path == "/#{path}"
defaults
end

def flash_classes
defaults = 'text-green-500 bg-green-100'
defaults.gsub!('green', 'red') if flash[:alert].present?
defaults
end

def flash_icon
gpath = 'M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
gpath = 'M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' if flash[:alert].present?
"<svg aria-hidden='true' class='w-5 h-5' fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='#{gpath}' clip-rule='evenodd'></path></svg>"
end
end
64 changes: 20 additions & 44 deletions app/views/shared/_flash.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,27 @@
<% visibility = 'hidden' unless (flash[:alert].present? || flash[:notice].present?) %>
<% if notice || alert %>
<div class="md:grid md:grid-cols-3 md:gap-6 mt-12">
<div class="md:col-span-1"></div>
<div class="flex justify-center">

<div class="<%= visibility %> md:grid md:grid-cols-3 md:gap-6 mt-12">
<div class="md:col-span-1"></div>
<div class="flex justify-center">
<% if flash[:alert].present? %>
<div id="toast-warning" class="fixed z-20 flex mx-auto top-5 items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow-md border border-gray-100 animate-[flashfade_4s_both]" data-controller="removals" data-action="animationend->removals#remove" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Warning icon</span>
<div id="flash-toast" class="fixed z-20 flex mx-auto top-5 items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow-md border border-gray-100 animate-[flashfade_4s_both]" data-controller="removals" data-action="animationend->removals#remove" role="alert">
<div class="<%= flash_classes %> inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg">
<%== flash_icon %>
</div>
<div class="ml-3 text-sm font-normal"><%= alert %></div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss-target="#toast-warning" aria-label="Close" id="flash_alert_close">
<span class="sr-only">Close</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<div class="ml-3 text-sm font-normal"><%= notice || alert %></div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss-target="#flash-toast" aria-label="Close" onclick="this.parentElement.remove()">
<span class="sr-only">Close</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<% end %>
<% if flash[:notice].present? %>
<div id="toast-success" class="fixed z-20 flex mx-auto top-5 items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow-md border border-gray-100 animate-[flashfade_4s_both]" data-controller="removals" data-action="animationend->removals#remove" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Check icon</span>
</div>
<div class="ml-3 text-sm font-normal"><%= notice %></div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss-target="#toast-success" aria-label="Close" id="flash_alert_close">
<span class="sr-only">Close</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<% end %>
</div>
</div>
</div>

<!-- Flash management -->
<script type="text/javascript">
var flashAlert = document.getElementById('flash_alert_close');
if (flashAlert !== null) {
document.getElementById('flash_alert_close').addEventListener('click', function() {
this.parentElement.remove();
<script type="text/javascript">
// Remove flash messages after the animation ends
document.addEventListener('animationend', function(event) {
if (event.animationName === 'flashfade') {
event.target.remove();
}
});
}

// Remove flash messages after the animation ends
document.addEventListener('animationend', function(event) {
if (event.animationName === 'flashfade') {
event.target.remove();
}
});
</script>
</script>
<% end %>

2 comments on commit e5a4858

@ryanckulp
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @5andu for small changes made. was able to remove half the markup, which i should have done a long time ago so that's on me. a further improvement would be storing the check/warning SVGs inside the asset/images pipeline so that users can easily swap out their own by simply overriding the filenames with new content. but not a big priority, these are great!

@5andu
Copy link
Contributor

@5andu 5andu commented on e5a4858 Dec 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted thanks!

Please sign in to comment.