diff options
| -rw-r--r-- | assets/css/app.css | 38 | ||||
| -rw-r--r-- | lib/waev_web/templates/exports/show.html.eex | 65 |
2 files changed, 56 insertions, 47 deletions
diff --git a/assets/css/app.css b/assets/css/app.css index 31b96d1..408167b 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -2,47 +2,51 @@ @import "./milligram.css"; -.container{ +body { + background-color: #dddddd; +} + +.container { margin: 0 auto; - max-width: 80.0rem; + max-width: 90.0rem; padding: 0 2.0rem; position: relative; width: 100%; } .wa-avatar { - position: fixed; - top: 0; - background-color: #dddddd; + text-align: center; } -.wa-left { - left: 0; + +.wa-row { + display: flex; + flex-direction: column; } -.wa-right { - right: 0; +.wa-row-left { + align-items: flex-start; } - -/* Chat background */ -.wa-back { - background-color: #dddddd; +.wa-row-right { + align-items: flex-end; } /* Message box */ .wa-message { - padding: 5px !important; + padding: 0px !important; margin-top: 10px; background-color: white; border-radius: 5px; box-shadow: 1px 1px 2px grey; + max-width: 65%; } .wa-message-photo { - border-radius: 5px; + border-radius: 5px 5px 0 0; + max-height: 600px; } -.wa-message-text { +.wa-message-box { + padding: 0 10px 0 10px; margin-top: 5px; - border-radius: 5px; } .wa-message-date { diff --git a/lib/waev_web/templates/exports/show.html.eex b/lib/waev_web/templates/exports/show.html.eex index 17e245e..425f2f8 100644 --- a/lib/waev_web/templates/exports/show.html.eex +++ b/lib/waev_web/templates/exports/show.html.eex @@ -1,40 +1,45 @@ -<div class="wa-avatar wa-left"> - <%= @export.left.name %> -</div> - -<div class="wa-avatar wa-right"> - <%= @export.right.name %> -</div> - -<div class="container wa-back"> +<div class="container"> + <div class="row"> + <div class="column column-50 wa-avatar"> + <%= @export.left.name %> + </div> + <div class="column column-50 wa-avatar"> + <%= @export.right.name %> + </div> + </div> <%= for message <- @export.messages do %> - <div class="row"> <%= case message.side do %> - <% :left -> %> - <div class="column wa-message column-75"> - <% :right -> %> - <div class="column wa-message column-75 column-offset-25"> - <% nil -> %> - <div class="column wa-message column-50 column-offset-25"> + <% :left -> %> + <div class="wa-row wa-row-left"> + <% :right -> %> + <div class="wa-row wa-row-right"> + <% nil -> %> + <div class="wa-row"> <% end %> - <%= case message.attachment do %> - <% %Waev.Export.Message.File{filename: filename, available: false} -> %> - <i><%= filename %></i> (fichero adjunto no disponible) - <% %Waev.Export.Message.File{filename: filename, available: true, type: :file} -> %> - <a href="<%= Routes.exports_path(@conn, :get_attachment, @id, filename) %>"><%= filename %></a> - <% %Waev.Export.Message.File{filename: filename, available: true, type: :photo} -> %> - <div><img class="wa-message-photo" alt="<%= filename %>" src="<%= Routes.exports_path(@conn, :get_attachment, @id, filename) %>" /></div> - <div><a href="<%= Routes.exports_path(@conn, :get_attachment, @id, filename) %>"><%= filename %></a></div> - <% nil -> %> - <% end %> + <div class="wa-message"> + <%= case message.attachment do %> + <% %Waev.Export.Message.File{filename: filename, available: true, type: :photo} -> %> + <img class="wa-message-photo" alt="<%= filename %>" src="<%= Routes.exports_path(@conn, :get_attachment, @id, filename) %>" /> + <% _ -> %> + <% end %> + <div class="wa-message-box"> + <%= case message.attachment do %> + <% %Waev.Export.Message.File{filename: filename, available: false} -> %> + <i class="wa-message-text"><%= filename %></i> (fichero adjunto no disponible) + <% %Waev.Export.Message.File{filename: filename, available: true, type: :file} -> %> + <a class="wa-message-text" href="<%= Routes.exports_path(@conn, :get_attachment, @id, filename) %>"><%= filename %></a> + <% _ -> %> + <% end %> - <%= message.text %> - <div class="wa-message-date"> - <%= message.date %> - </div> + <div><%= message.text %></div> + <div class="wa-message-date"> + <%= message.date %> + </div> </div> + </div> + </div> <% end %> |