Add settings links on hover

This commit is contained in:
Uku Taht 2020-11-25 15:29:08 +02:00
parent d8eb994eff
commit 8369f8d94f

View File

@ -8,24 +8,30 @@
<ul class="my-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> <ul class="my-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<%= for site <- @sites do %> <%= for site <- @sites do %>
<%= link(to: "/" <> URI.encode_www_form(site.domain)) do %> <div class="relative group">
<li class="col-span-1 bg-white rounded-lg shadow p-4 hover:shadow-lg cursor-pointer"> <%= link(to: "/" <> URI.encode_www_form(site.domain)) do %>
<div class="w-full flex items-center justify-between space-x-4"> <li class="col-span-1 bg-white rounded-lg shadow p-4 group-hover:shadow-lg cursor-pointer">
<img src="https://icons.duckduckgo.com/ip3/<%= site.domain %>.ico" referrerpolicy="no-referrer" class="w-4 h-4 flex-shrink-0 mt-px"> <div class="w-full flex items-center justify-between space-x-4">
<div class="flex-1 truncate -mt-px"> <img src="https://icons.duckduckgo.com/ip3/<%= site.domain %>.ico" referrerpolicy="no-referrer" class="w-4 h-4 flex-shrink-0 mt-px">
<h3 class="text-gray-900 font-medium truncate"><%= site.domain %></h3> <div class="flex-1 truncate -mt-px">
<h3 class="text-gray-900 font-medium text-lg truncate"><%= site.domain %></h3>
</div>
</div> </div>
</div> <div class="pl-8 mt-2 flex items-center justify-between">
<div class="pl-8 mt-2 flex items-center justify-between"> <span class="text-gray-600 text-sm truncate">
<span class="text-gray-600 text-sm truncate"> <span class="text-gray-800">
<span class="text-gray-800"> <b><%= PlausibleWeb.StatsView.large_number_format(Map.get(@visitors, site.domain, 0)) %></b>
<b><%= PlausibleWeb.StatsView.large_number_format(Map.get(@visitors, site.domain, 0)) %></b> visitors in last 24h
visitors in last 24h </span>
</span> </span>
</span> </div>
</div> </li>
</li> <% end %>
<% end %>
<%= link(to: "/" <> URI.encode_www_form(site.domain) <> "/settings", class: "absolute top-0 right-0 p-4 mt-1") do %>
<svg class="w-5 h-5 text-gray-600 opacity-0 group-hover:opacity-100 transition" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
<% end %>
</div>
<% end %> <% end %>
</ul> </ul>
</div> </div>