diff options
| -rw-r--r-- | assets/css/app.css | 43 | ||||
| -rw-r--r-- | lib/waev_web/templates/exports/show.html.eex | 65 | ||||
| -rw-r--r-- | lib/waev_web/templates/layout/app.html.eex | 10 |
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> |