<div id="relative">
<div _="on click elsewhere add .hidden to the first <div/> in me end">
<a _="on click
preventDefault() on event
get the next <div/>
toggle .hidden on it
if it does not match .hidden then trigger 'showed' on it end
end"
href="<%= notifications_path %>"
class="text-gray-500 focus:outline-none">
<%= heroicon "bell", variant: :solid, options: { class: "w-5 h-5" } %>
</a>
<div class="hidden overflow-hidden absolute z-100 right-2 top-16 w-80 h-[480px] overflow-y-scroll rounded-lg shadow-2xl bg-white"
hx-get="<%= notifications_path %>"
hx-trigger="showed once delay:0.25s">
<div class="px-4 py-1 divide-y divide-gray-100">
<% 1.upto(3).each do %>
<div class="w-full flex items-center space-x-4 py-4">
<div class="placeholder flex-shrink-0 w-10 h-10 rounded-full"></div>
<div class="w-full space-y-2">
<div class="placeholder w-full h-4"></div>
<div class="placeholder w-full h-2"></div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
class NotificationsController < ApplicationController
layout false
def index
@notifications = current_member.notifications
end
end
@layer components {
.placeholder { @apply overflow-hidden relative bg-gray-200 bg-opacity-60 rounded-lg }
.placeholder::after {
content: " ";
box-shadow: 0 0 50px 9px rgba(254, 254, 254, 100);
position: absolute;
top: 0;
left: -100%;
height: 100%;
animation: load 1s infinite;
}
@keyframes load {
0%{ left: -100%}
100%{ left: 150%}
}
}
Martin Sojka, Maker of CodeSnips
