make topbar slightly more responsive

This commit is contained in:
shibao 2022-01-31 22:40:07 -05:00
parent 7015ec5997
commit e0c0828444
2 changed files with 8 additions and 7 deletions

View File

@ -13,7 +13,7 @@ defmodule CanneryWeb.Component.Topbar do
%{results: [], title_content: nil, flash: nil, current_user: nil} |> Map.merge(assigns) %{results: [], title_content: nil, flash: nil, current_user: nil} |> Map.merge(assigns)
~H""" ~H"""
<header class="mb-8 px-8 py-4 w-full bg-primary-400"> <header class="mb-8 px-8 py-4 w-full bg-primary-400 overflow-x-hidden">
<nav role="navigation"> <nav role="navigation">
<div class="flex flex-row justify-between items-center space-x-4"> <div class="flex flex-row justify-between items-center space-x-4">
<div class="flex flex-row justify-start items-center space-x-2"> <div class="flex flex-row justify-start items-center space-x-2">
@ -27,8 +27,9 @@ defmodule CanneryWeb.Component.Topbar do
<%= @title_content %> <%= @title_content %>
<% end %> <% end %>
</div> </div>
<ul class="flex flex-row flex-wrap justify-center items-center
space-x-4 text-lg text-white"> <ul class="flex flex-col sm:flex-row flex-wrap justify-center items-center
space-x-4 text-lg text-white text-ellipsis">
<%= if @current_user do %> <%= if @current_user do %>
<li> <li>
<%= link("Tags", <%= link("Tags",
@ -64,7 +65,7 @@ defmodule CanneryWeb.Component.Topbar do
<% end %> <% end %>
<li> <li>
<%= link(@current_user.email, <%= link(@current_user.email,
class: "hover:underline", class: "hover:underline truncate",
to: Routes.user_settings_path(CanneryWeb.Endpoint, :edit) to: Routes.user_settings_path(CanneryWeb.Endpoint, :edit)
) %> ) %>
</li> </li>

View File

@ -1,11 +1,11 @@
<nav role="navigation"> <nav role="navigation">
<div class="flex flex-row justify-between items-center space-x-4"> <div class="flex flex-row justify-between items-center space-x-4 overflow-x-hidden">
<%= link to: Routes.live_path(CanneryWeb.Endpoint, HomeLive) do %> <%= link to: Routes.live_path(CanneryWeb.Endpoint, HomeLive) do %>
<h1 class="leading-5 text-xl text-white hover:underline">Cannery</h1> <h1 class="leading-5 text-xl text-white hover:underline">Cannery</h1>
<% end %> <% end %>
<ul class="flex flex-row flex-wrap justify-center items-center <ul class="flex flex-col sm:flex-row flex-wrap justify-center items-center
space-x-4 text-lg text-white"> space-x-4 text-lg text-white text-ellipsis">
<%# user settings %> <%# user settings %>
<%= if assigns |> Map.has_key?(:current_user) && @current_user do %> <%= if assigns |> Map.has_key?(:current_user) && @current_user do %>
<li> <li>