Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update UI with some css #4

Closed
1 task
SimonLab opened this issue Nov 23, 2021 · 8 comments
Closed
1 task

Update UI with some css #4

SimonLab opened this issue Nov 23, 2021 · 8 comments
Labels
enhancement New feature or enhancement of existing functionality priority-2 Second highest priority, should be worked on as soon as the Priority-1 issues are finished T25m Time Estimate 25 Minutes

Comments

@SimonLab
Copy link
Member

At the moment the application is pretty simple:
image

  • Add some css to make it nicer to use
@SimonLab SimonLab added enhancement New feature or enhancement of existing functionality help wanted If you can help make progress with this issue, please comment! labels Nov 23, 2021
@nelsonic nelsonic added good first issue Good for newcomers T25m Time Estimate 25 Minutes labels Mar 22, 2022
@nelsonic nelsonic added the priority-2 Second highest priority, should be worked on as soon as the Priority-1 issues are finished label May 30, 2022
@nelsonic nelsonic self-assigned this May 30, 2022
@nelsonic nelsonic mentioned this issue Jun 1, 2022
Closed
7 tasks
@nelsonic
Copy link
Member

@SimonLab want to try and add UI with Tailwind? dwyl/technology-stack#94

@nelsonic
Copy link
Member

@SimonLab thoughts?

image

We could add the date/time. as an enhancement later. 💭

@nelsonic
Copy link
Member

lib/liveview_chat_web/templates/layout/root.html.heex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="csrf-token" content={csrf_token_value()}>
    <%= live_title_tag assigns[:page_title] || "LiveviewChat", suffix: " · Phoenix Framework" %>
    <!-- <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/> -->
    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.2/cdn.js" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="mx-5 mt-5">
    <header>
      <section class="container">
        <nav>
          <ul class="float-right">
            <%= if @loggedin do %>
              <li>
                <img width="42px" src={@person.picture}/>
              </li>
              <li class="text-blue">
                <%= link "logout", to: "/logout" %>
              </li>
            <% else %>
              <li class="bg-green-600 text-white  p-2 w-full mb-2 font-bold">
                <%= link "Login", to: "/login" %>
              </li>
            <% end %>
          </ul>
        </nav>
        <h1 class="text-5xl mb-4 text-center font-mono">LiveView Chat Example</h1>
      </section>
    </header>
    <%= @inner_content %>
  </body>
</html>

lib/liveview_chat_web/templates/message/messages.html.heex

<ul id='msg-list' phx-update="append">
   <%= for message <- @messages do %>
     <li id={"msg-#{message.id}"}>
       <b><%= message.name %>:</b>
       <%= message.message %>
     </li>
   <% end %>
</ul>

<.form let={f} for={@changeset} id="form" phx-submit="new_message" phx-hook="Form">

  <%= if @loggedin do %>
    <%= text_input f, :name, id: "name", value: @person.givenName,
    class: "hidden" %>
  <% else %>
    <%= text_input f, :name, id: "name", placeholder: "Your name", autofocus: "true",
     class: "border p-2 w-full mb-2 mt-2" %>
    <%= error_tag f, :name %>
  <% end %>

   <%= text_input f, :message, id: "msg", placeholder: "Your message",
   class: "border p-2 w-full mb-2 mt-2"  %>
   <p class=" text-amber-600">
    <%= error_tag f, :message %>
   </p>
   <%= submit "Send", class: "bg-green-600 text-white px-4 py-2 rounded-xl float-right" %>
 </.form>

not adding it to my current PR cause I don't want to change everything in one go.
and if we were doing this properly we would figure out how to have a position fixed for the <input msg> and <submit "Send"> button so that it looks good on mobile too.

#help-wanted

@nelsonic
Copy link
Member

@SimonLab thoughts?
liveview-chat-with-tailwind-css

@nelsonic
Copy link
Member

@SimonLab any objections to me including this in my PR #46 ?

@nelsonic nelsonic mentioned this issue Jun 16, 2022
Merged
@SimonLab
Copy link
Member Author

@nelsonic adding the updated UI to the PR sounds good 👍

@nelsonic
Copy link
Member

Re-added the Presence, but in the Nav:
image

nelsonic added a commit that referenced this issue Jun 16, 2022
@nelsonic
re-add presence #4
27d7306
@nelsonic nelsonic added the awaiting-review An issue or pull request that needs to be reviewed label Jun 16, 2022
@nelsonic nelsonic assigned SimonLab and unassigned nelsonic Jun 16, 2022
@nelsonic
Copy link
Member

Included in PR: #46

@nelsonic nelsonic removed good first issue Good for newcomers help wanted If you can help make progress with this issue, please comment! labels Jun 16, 2022
@SimonLab SimonLab removed the awaiting-review An issue or pull request that needs to be reviewed label Jun 20, 2022
@SimonLab SimonLab removed their assignment Jun 20, 2022
@nelsonic nelsonic mentioned this issue Jun 22, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or enhancement of existing functionality priority-2 Second highest priority, should be worked on as soon as the Priority-1 issues are finished T25m Time Estimate 25 Minutes
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nelsonic @SimonLab