CSS cleanup

3 files changed, 50 insertions, 38 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index e7f42f7..4bfd6cb 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -14,67 +14,67 @@ body {
   width: 100%;
 }
 
-.wa-avatars {
+.parties {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.wa-avatars .wa-avatar {
+.party-peek {
   flex: 0 0 50%;
   text-align: center;
   padding: 16px 40px 12px 40px;
 }
-.wa-avatars .wa-avatar figure {
+.party-peek figure {
   margin: 0;
 }
 
-.wa-avatar img {
-  max-height: 140px;
+.avatar {
   border-radius: 50%;
 }
-
-.wa-avatar--tiny {
+.avatar--big {
+  max-height: 140px;
+}
+.avatar--tiny {
   max-height: 42px;
-  border-radius: 50%;
 }
 
-.wa-row {
+.row {
   margin-top: 10px;
   display: flex;
   align-items: center;
 }
-.wa-row-left {
+.row-left {
   flex-direction: row;
 }
-.wa-row-right {
+.row-right {
   flex-direction: row-reverse;
 }
 
-.wa-white-box {
+.white-box {
   background-color: white;
   border-radius: 5px;
   box-shadow: 1px 1px 2px grey;
 }
 
 /* Message box */
-.wa-message {
+.message {
   padding: 0px !important;
   margin: 0 10px 0 10px;
   max-width: 65%;
 }
 
-.wa-message-photo {
+.message-photo {
   border-radius: 5px 5px 0 0;
   max-height: 600px;
 }
 
-.wa-message-box {
+.message-box {
   padding: 0 10px 0 10px;
   margin-top: 5px;
   overflow-wrap: break-word;
 }
 
-.wa-message-date {
+.message-date {
   text-align: right;
   color: grey;
   font-size: 12px;
diff --git a/lib/waev_web/templates/exports/show.html.eex b/lib/waev_web/templates/exports/show.html.eex
index 501f3c2..9ac011e 100644
--- a/lib/waev_web/templates/exports/show.html.eex
+++ b/lib/waev_web/templates/exports/show.html.eex
@@ -1,43 +1,33 @@
-<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) %>" />
-      <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) %>" />
-      <figcaption><%= @export.right.name %></figcaption>
-    </figure>
-  </div>
+<div class="parties">
+  <%= party_peek(assigns, @export.left) %>
+  <%= party_peek(assigns, @export.right) %>
 </div>
 
 <%= 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) %>" />
+<div class="row row-left">
+  <%= party_avatar(assigns, @export.left, :tiny) %>
     <% :right -> %>
-<div class="wa-row wa-row-right">
-  <img class="wa-avatar--tiny" src="<%= Routes.exports_path(@conn, :get_avatar, @id, @export.right.name) %>" />
+<div class="row row-right">
+  <%= party_avatar(assigns, @export.right, :tiny) %>
   <% end %>
 
-  <div class="wa-message wa-white-box">
+  <div class="message 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) %>" />
+    <img class="message-photo" alt="<%= filename %>" src="<%= Routes.exports_path(@conn, :get_media, @id, filename) %>" />
       <% _ -> %>
     <% end %>
-    <div class="wa-message-box">
+    <div class="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>
+      <a class="message-text" href="<%= Routes.exports_path(@conn, :get_media, @id, filename) %>"><%= filename %></a>
         <% _ -> %>
       <% end %>
 
       <div><%= message.text %></div>
-      <div class="wa-message-date">
+      <div class="message-date">
         <%= message.date %>
       </div>
     </div>
diff --git a/lib/waev_web/views/exports_view.ex b/lib/waev_web/views/exports_view.ex
index c4b637f..c4a1b59 100644
--- a/lib/waev_web/views/exports_view.ex
+++ b/lib/waev_web/views/exports_view.ex
@@ -1,3 +1,25 @@
 defmodule WaevWeb.ExportsView do
   use WaevWeb, :view
+
+  def party_peek(assigns, party) do
+    ~E"""
+<div class="party-peek">
+  <figure>
+    <%= party_avatar(assigns, party, :big) %>
+    <figcaption><%= party.name %></figcaption>
+  </figure>
+</div>
+"""
+  end
+
+  def party_avatar(assigns, party, size) do
+    modifier =
+      case size do
+        :tiny -> "avatar--tiny"
+        :big -> "avatar--big"
+      end
+    ~E"""
+<img class="avatar <%= modifier %>" src="<%= Routes.exports_path(@conn, :get_avatar, @id, party.name) %>" />
+"""
+  end
 end