Pretty avatars

3 files changed, 72 insertions, 46 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index 408167b..e7f42f7 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -9,33 +9,57 @@ body {
 .container {
   margin: 0 auto;
   max-width: 90.0rem;
-  padding: 0 2.0rem;
+  padding: 0 1.0rem;
   position: relative;
   width: 100%;
 }
 
-.wa-avatar {
+.wa-avatars {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.wa-avatars .wa-avatar {
+  flex: 0 0 50%;
   text-align: center;
+  padding: 16px 40px 12px 40px;
+}
+.wa-avatars .wa-avatar figure {
+  margin: 0;
+}
+
+.wa-avatar img {
+  max-height: 140px;
+  border-radius: 50%;
+}
+
+.wa-avatar--tiny {
+  max-height: 42px;
+  border-radius: 50%;
 }
 
 .wa-row {
+  margin-top: 10px;
   display: flex;
-  flex-direction: column;
+  align-items: center;
 }
 .wa-row-left {
-  align-items: flex-start;
+  flex-direction: row;
 }
 .wa-row-right {
-  align-items: flex-end;
+  flex-direction: row-reverse;
 }
 
-/* Message box */
-.wa-message {
-  padding: 0px !important;
-  margin-top: 10px;
+.wa-white-box {
   background-color: white;
   border-radius: 5px;
   box-shadow: 1px 1px 2px grey;
+}
+
+/* Message box */
+.wa-message {
+  padding: 0px !important;
+  margin: 0 10px 0 10px;
   max-width: 65%;
 }
 
@@ -47,6 +71,7 @@ body {
 .wa-message-box {
   padding: 0 10px 0 10px;
   margin-top: 5px;
+  overflow-wrap: break-word;
 }
 
 .wa-message-date {
diff --git a/lib/waev_web/templates/exports/show.html.eex b/lib/waev_web/templates/exports/show.html.eex
index 4d7de74..501f3c2 100644
--- a/lib/waev_web/templates/exports/show.html.eex
+++ b/lib/waev_web/templates/exports/show.html.eex
@@ -1,46 +1,47 @@
-<div class="container">
-  <div class="row">
-    <div class="column column-50 wa-avatar">
+<div class="wa-avatars">
+  <div class="wa-avatar">
+    <figure>
       <img alt="<%= @export.left.name %>" src="<%= Routes.exports_path(@conn, :get_avatar, @id, @export.left.name) %>" />
-      <%= @export.left.name %>
-    </div>
-    <div class="column column-50 wa-avatar">
+      <figcaption><%= @export.left.name %></figcaption>
+    </figure>
+  </div>
+  <div class="wa-avatar">
+    <figure>
       <img alt="<%= @export.right.name %>" src="<%= Routes.exports_path(@conn, :get_avatar, @id, @export.right.name) %>" />
-      <%= @export.right.name %>
-    </div>
+      <figcaption><%= @export.right.name %></figcaption>
+    </figure>
   </div>
+</div>
 
-  <%= for message <- @export.messages do %>
-    <%= case message.side do %>
-      <% :left -> %>
-  <div class="wa-row wa-row-left">
-      <% :right -> %>
-  <div class="wa-row wa-row-right">
-      <% nil -> %>
-  <div class="wa-row">
-    <% end %>
+<%= for message <- @export.messages do %>
+  <%= case message.side do %>
+    <% :left -> %>
+<div class="wa-row wa-row-left">
+  <img class="wa-avatar--tiny" src="<%= Routes.exports_path(@conn, :get_avatar, @id, @export.left.name) %>" />
+    <% :right -> %>
+<div class="wa-row wa-row-right">
+  <img class="wa-avatar--tiny" src="<%= Routes.exports_path(@conn, :get_avatar, @id, @export.right.name) %>" />
+  <% end %>
 
-    <div class="wa-message">
+  <div class="wa-message wa-white-box">
+    <%= case message.attachment do %>
+      <% %Waev.Export.Message.File{filename: filename, type: :image} -> %>
+    <img class="wa-message-photo" alt="<%= filename %>" src="<%= Routes.exports_path(@conn, :get_media, @id, filename) %>" />
+      <% _ -> %>
+    <% end %>
+    <div class="wa-message-box">
       <%= case message.attachment do %>
-        <% %Waev.Export.Message.File{filename: filename, type: :image} -> %>
-      <img class="wa-message-photo" alt="<%= filename %>" src="<%= Routes.exports_path(@conn, :get_media, @id, filename) %>" />
+        <% %Waev.Export.Message.File{filename: filename, type: :file} -> %>
+      <a class="wa-message-text" href="<%= Routes.exports_path(@conn, :get_media, @id, filename) %>"><%= filename %></a>
         <% _ -> %>
       <% end %>
-      <div class="wa-message-box">
-        <%= case message.attachment do %>
-          <% %Waev.Export.Message.File{filename: filename, type: :file} -> %>
-        <a class="wa-message-text" href="<%= Routes.exports_path(@conn, :get_media, @id, filename) %>"><%= filename %></a>
-          <% _ -> %>
-        <% end %>
 
-        <div><%= message.text %></div>
-        <div class="wa-message-date">
-          <%= message.date %>
-        </div>
+      <div><%= message.text %></div>
+      <div class="wa-message-date">
+        <%= message.date %>
       </div>
     </div>
-
   </div>
-  <% end %>
 
 </div>
+<% end %>
diff --git a/lib/waev_web/templates/layout/app.html.eex b/lib/waev_web/templates/layout/app.html.eex
index d83e5bc..0b81432 100644
--- a/lib/waev_web/templates/layout/app.html.eex
+++ b/lib/waev_web/templates/layout/app.html.eex
@@ -9,11 +9,11 @@
     <%= csrf_meta_tag() %>
   </head>
   <body>
-    <header>
-      <section class="container">
-        <h1>WhatsApp Exports Viewer</h1>
-      </section>
-    </header>
+    <!-- <header>
+         <section class="container">
+         <h1>WhatsApp Exports Viewer</h1>
+         </section>
+         </header> -->
     <main role="main" class="container">
       <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
       <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>