plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-11-23 11:12:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

Correctly position websites list on mobile (#57)

Browse Source 
On mobile, the website list at /sites does not have any X padding. The
elements touch the screen left and right. This corrects it by wrapping
the list in a div with "px-4" on it.

This could also be achieved by setting "px-4" and "md:px-0" on every
element but it is unecessarily complex and if some more elements
appeared on this screen, it would be easy to forget this. A container
should be in charge of this, which is what is proposed here.
This commit is contained in:
pmhoudry 2020-04-21 03:56:12 -04:00 committed by GitHub
parent bed7cc1ec7
commit f52aac6a31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
lib/plausible_web/templates/site/index.html.eex
View File

@ -1,22 +1,24 @@
<div class="pt-16"></div>
<div class="max-w-xl mx-auto flex flex-col sm:flex-row justify-between">
<h1 class="text-2xl font-black">My websites</h1>
<a href="/sites/new" class="button w-full my-2 sm:my-0 sm:w-auto">+ Add a website</a>
</div>
<div class="flex items-center justify-center w-full py-8 mb-16">
<div class="overflow-hidden bg-white rounded max-w-xl w-full shadow-md leading-normal">
<%= for site <- @sites do %>
<div class="w-full relative">
<a href="/<%= URI.encode_www_form(site.domain) %>" class="block hover:bg-gray-100 group p-4 border-b no-underline flex justify-between transition">
<p class="w-full font-bold text-lg mb-1 text-gray-800"><%= site.domain %></p>
</a>
<%= link(to: "/#{URI.encode_www_form(site.domain)}/settings", class: "flex absolute hover:bg-gray-100 transition rounded py-2 px-5", style: "top: 12px; right: 6px;") do %>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings -mt-px"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
</div>
<p class="ml-1 text-gray-800 font-medium">Settings</p>
<% end %>
</div>
<% end %>
<div class="px-4">
<div class="max-w-xl mx-auto flex flex-col sm:flex-row justify-between">
<h1 class="text-2xl font-black">My websites</h1>
<a href="/sites/new" class="button w-full my-2 sm:my-0 sm:w-auto">+ Add a website</a>
</div>
<div class="flex items-center justify-center w-full py-8 mb-16">
<div class="overflow-hidden bg-white rounded max-w-xl w-full shadow-md leading-normal">
<%= for site <- @sites do %>
<div class="w-full relative">
<a href="/<%= URI.encode_www_form(site.domain) %>" class="block hover:bg-gray-100 group p-4 border-b no-underline flex justify-between transition">
<p class="w-full font-bold text-lg mb-1 text-gray-800"><%= site.domain %></p>
</a>
<%= link(to: "/#{URI.encode_www_form(site.domain)}/settings", class: "flex absolute hover:bg-gray-100 transition rounded py-2 px-5", style: "top: 12px; right: 6px;") do %>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings -mt-px"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
</div>
<p class="ml-1 text-gray-800 font-medium">Settings</p>
<% end %>
</div>
<% end %>
</div>
</div>
</div>