home.html.heex

<!-- Shown only on mobile devices -->
<div class="mt-[5rem] p-4 ml-4 mr-4 mb-4 border-2 radius rounded-md lg:hidden">
  <div class="flex justify-start flex-col overflow-hidden whitespace-nowrap">
    <h5 class="text-md leading-tight font-medium mb-2 text-green-700">people online</h5>
    <ul id="people_online-list-mobile" phx-update="append" class="pa-1"></ul>
  </div>
</div>

<div id="chat-container" class="max-h-screen flex flex-col lg:flex-row lg:min-h-screen ">
  <div class="flex flex-col lg:flex-grow">
    <!-- The list of messages will appear here: -->
    <ul id="msg-list" phx-update="append" class="pa-1 lg:mt-[4rem] overflow-y-auto"></ul>

    <footer class="bg-slate-800 p-2 h-[3rem] bottom-0 w-full flex justify-center sticky mt-[auto]">
      <div class="w-full flex flex-row items-center text-gray-700 focus:outline-none font-normal">
        <%= if @loggedin do %>
          <input
            type="text"
            disabled
            class="hidden"
            id="name"
            placeholder={person_name(@person)}
            value={person_name(@person)}
          />
        <% else %>
          <input
            type="text"
            id="name"
            placeholder="Name"
            required
            class="grow-0 w-1/6 px-1.5 py-1.5"
          />
        <% end %>

        <input
          type="text"
          id="msg"
          placeholder="Your message"
          required
          class="grow w-2/3 mx-1 px-2 py-1.5"
        />

        <button
          id="send"
          class="text-white bold rounded px-3 py-1.5 w-fit
            transition-colors duration-150 bg-sky-500 hover:bg-sky-600"
        >
          Send
        </button>
      </div>
    </footer>
  </div>
  <!-- Online people will only be shown here on desktop devices -->
  <div class="hidden lg:flex">
    <div class="mt-[5rem] p-4 ml-4 mr-4 mb-4 border-2 radius rounded-md max-w-[20vw]">
      <div class="flex justify-start flex-col overflow-hidden whitespace-nowrap">
        <h5 class="text-md leading-tight font-medium mb-2 text-green-700">people online</h5>
        <ul id="people_online-list-desktop" phx-update="append" class="pa-1"></ul>
      </div>
    </div>
  </div>
</div>