fix: truncate username on small screens (#866)

* fix: truncate username on small screens

caveat: adds suffix ' ...' to every (!) username.

* fix: truncate username via CSS

* chore: apply changes to separated layout for header
This commit is contained in:
Niklaas Baudet von Gersdorff 2021-04-05 09:57:57 +02:00 committed by GitHub
parent d39fbc48c2
commit f0725e2578
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -9,10 +9,10 @@
</a>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center justify-end">
<div class="absolute inset-y-0 right-0 flex items-center justify-end w-2/3 sm:w-auto">
<%= cond do %>
<% @conn.assigns[:current_user] -> %>
<ul class="flex">
<ul class="flex w-full sm:w-auto">
<%= if Application.get_env(:plausible, :is_selfhost) do %>
<li class="hidden mr-6 sm:block">
<%= link(to: "https://github.com/plausible/analytics", class: "font-bold rounded m-1 ml-0 p-1 hover:bg-gray-200 dark:hover:bg-gray-900 dark:text-gray-100", style: "line-height: 40px;", target: "_blank") do %>
@ -30,10 +30,10 @@
<%= link("Docs", to: "https://docs.plausible.io", class: "font-bold rounded m-1 p-1 hover:bg-gray-200 dark:hover:bg-gray-900 dark:text-gray-100", style: "line-height: 40px;", target: "_blank") %>
</li>
<% end %>
<li>
<li class="w-full sm:w-auto">
<div class="relative font-bold rounded">
<div data-dropdown-trigger class="flex items-center p-1 m-1 rounded cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-900 dark:text-gray-100">
<span class="pl-2 mr-2"><%= @conn.assigns[:current_user].name || @conn.assigns[:current_user].email %></span>
<span class="pl-2 mr-2 truncate"><%= @conn.assigns[:current_user].name || @conn.assigns[:current_user].email %></span>
<svg style="height: 18px; transform: translateY(2px); fill: #606f7b;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 640" enable-background="new 0 0 512 512" xml:space="preserve"><g><circle cx="256" cy="52.8" r="50.8"/><circle cx="256" cy="256" r="50.8"/><circle cx="256" cy="459.2" r="50.8"/></g></svg>
</div>