significantly simply chat message layout #121

README.md

@@ -58,7 +58,7 @@ and _deploying_ a Chat app in Phoenix!
     - [13.2 Create a _New File_ Called `coveralls.json`](#132-create-a-new-file-called-coverallsjson)
     - [13.3 Run the Tests with Coverage Checking](#133-run-the-tests-with-coverage-checking)
     - [13.4 Write a Test for the Untested Function](#134-write-a-test-for-the-untested-function)
-- [Tailwind CSS Stylin'](#tailwind-css-stylin)
+- [14. Tailwind CSS Stylin'](#14-tailwind-css-stylin)
   - [TODO: Update GIF](#todo-update-gif)
 - [Authentication](#authentication)
 - [Continuous Integration](#continuous-integration)
@@ -153,10 +153,11 @@ scroll down to the "Clone Repo and Run on Localhost" section instead.
 ## 0. Pre-requisites (_Before you Start_)
 
 1. **Elixir _Installed_** on your **local machine**. <br />
-  see: 
-  [dwyl/learn-elixir#**installation**](https://github.com/dwyl/learn-elixir#installation) <br />
-  e.g: <br />
-```
+see: 
+[dwyl/learn-elixir#**installation**](https://github.com/dwyl/learn-elixir#installation) <br />
+e.g:
+
+```sh
 brew install elixir
 ```
 > _**Note**: if you already have `Elixir` installed on your Mac,
@@ -165,9 +166,11 @@ brew install elixir
 
 
 1. **Phoenix** framework **installed**.
-  see: https://hexdocs.pm/phoenix/installation.html <br />
-  e.g: <br />
-```
+see: 
+[hexdocs.pm/phoenix/installation.html](https://hexdocs.pm/phoenix/installation.html) <br />
+e.g:
+
+```sh
 mix archive.install hex phx_new
 ```
 
@@ -192,22 +195,27 @@ see:
 
 Check you have the _latest version_ of **Elixir**
 (_run the following command in your terminal_):
+
 ```sh
 elixir -v
 ```
 
 You should see something like:
+
 ```sh
 Erlang/OTP 25 [erts-13.1.1] [source] [64-bit] [smp:10:10] [ds:10:10:10] [async-threads:1] [jit] [dtrace]
 
 Elixir 1.14.1 (compiled with Erlang/OTP 25)
 ```
 
 Check you have the **latest** version of **Phoenix**:
+
 ```sh
 mix phx.new -v
 ```
+
 You should see:
+
 ```sh
 Phoenix installer v1.6.15
 ```
@@ -220,15 +228,19 @@ Phoenix installer v1.6.15
 
 _Confirm_ **PostgreSQL** is running (_so the App can store chat messages_)
 run the following command:
+
 ```sh
 lsof -i :5432
 ```
+
 You should see output _similar_ to the following:
+
 ```sh
 COMMAND  PID  USER   FD  TYPE DEVICE                  SIZE/OFF NODE NAME
 postgres 529 Nelson  5u  IPv6 0xbc5d729e529f062b      0t0  TCP localhost:postgresql (LISTEN)
 postgres 529 Nelson  6u  IPv4 0xbc5d729e55a89a13      0t0  TCP localhost:postgresql (LISTEN)
 ```
+
 This tells us that PostgreSQL is "_listening_" on TCP Port `5432`
 (_the default port_)
 
@@ -1137,36 +1149,38 @@ With that our app is fully tested!
 
 <br />
 
-# Tailwind CSS Stylin'
+# 14. Tailwind CSS Stylin'
+
+As it stands, the app is _fine_.
+However, we can give it a bit of pizzazz :sparkles:.
+Let's style our view templates a bit
+so the app looks awesome!
 
 If you're new to `Tailwind`,
-please see: https://github.com/dwyl/learn-tailwind
+please see: 
+[dwyl/**learn-tailwind**](https://github.com/dwyl/learn-tailwind)
 
 > **Note**: We're aren't repeating the setup steps here
-as **`Phoenix 1.7`** will include Tailwind by default.
+as **`Phoenix 1.7`** will include Tailwind by default. <br />
 But if you are following this guide 
 with an earlier version of **`Phoenix`**,
 see: 
 [**`Tailwind` in `Phoenix`**](https://github.com/dwyl/learn-tailwind#part-2-tailwind-in-phoenix)
 
-As it stands, the app is _fine_.
-However, we can give it a bit of pizzazz :sparkles:.
-Let's style our view templates a bit
-so the app looks awesome!
 
-Head over to the `lib/chat_web/templates/layout/app.html.heex`
-and change it to the following.
+Open 
+`lib/chat_web/templates/layout/app.html.heex`
+and change the contents to the following:
 
 ```html
 <main class="w-full">
-  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
   <%= @inner_content %>
 </main>
 ```
 
-In the `lib/chat_web/templates/layout/index.html.heex`
-fil, make the following changes.
+In the 
+`lib/chat_web/templates/layout/index.html.heex`
+file, make the following changes.
 
 ```html
 <div class="mt-2 mb-2 pb-[8rem]">

assets/js/app.js

@@ -65,44 +65,28 @@ window.liveSocket = liveSocket
 let channel = socket.channel('room:lobby', {}); // connect to chat "room"
 
 channel.on('shout', function (payload) { // listen to the 'shout' event
-  let li = document.createElement("li"); // create new list item DOM element
-
   // Get information from payload
   const name = payload.name || 'guest';    
   const message = payload.message 
   const date = formatInsertedAtString(payload.inserted_at).date
   const time = formatInsertedAtString(payload.inserted_at).time
 
-  // HTML to insert
-  let HTMLtoInsert = `
-  <div class="flex justify-start mt-8 ml-4">
-    <div class="flex flex-row items-start">
-      <div class="w-[6rem]">
-        <span class="font-semibold text-slate-600 break-words">
-          ${name}
-        </span>
-      </div>
-      <div class="bg-amber-200 relative mr-4 ml-4 h-full">
-        <div class="absolute left-1/2 -ml-0.5 w-[0.1px] h-1/4 bg-gray-600"></div>
-      </div>
-      <div class="flex flex-col items-start max-w-[50vw]">
-        <div class="relative max-w-xl px-4 py-2 text-gray-700 bg-gray-100 rounded shadow">
-          <span class="block">
-            ${message}
-          </span>
-        </div>
-        <span class="text-xs font-thin mt-2">
-          <span>${date}</span>
-          <span class="text-gray-400">at</span>
-          <span>${time}</span>
-        </span>
+  let li = document.createElement("li"); // create new list item DOM element
+  // Message HTML with Tailwind CSS:
+  li.innerHTML = `
+  <div class="flex flex-row w-[95%] mx-2 border-b-[1px] border-slate-300 py-1">
+    <div class="text-left w-1/5 font-semibold text-slate-800 break-words">
+      ${name}
+      <div class="text-xs mr-1">
+        <span class="font-thin">${date}</span> 
+        <span>${time}</span>
       </div>
     </div>
+    <div class="flex w-3/5 mx-1 grow">
+      ${message}
+    </div>
   </div>
   `
-
-  li.innerHTML = HTMLtoInsert
-
   // Append to list
   ul.appendChild(li);
 });

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

@@ -10,7 +10,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body>
-    <header class="bg-slate-800 w-full h-[5rem] top-0 fixed flex flex-col justify-center z-10">
+    <header class="bg-slate-800 w-full h-[4rem] top-0 fixed flex flex-col justify-center z-10">
       <nav class="flex flex-row justify-between items-center">
         <h1 class="w-4/5 lg:text-3xl text-center font-mono text-white ml-4">
           Phoenix Chat Example

lib/chat_web/templates/page/index.html.heex

@@ -1,4 +1,4 @@
-<div class="my-2">
+
   <ul id='msg-list' phx-update="append" class="pa-1"> </ul>
   <footer class="bg-slate-800 p-2 h-[3rem] fixed bottom-0 w-full flex justify-center">
     <div class="w-full flex flex-row items-center">
@@ -40,4 +40,3 @@
 
     </div>
   </footer>
-</div>