From 9156865068eba32bed529074ef59857a6ac15a6e Mon Sep 17 00:00:00 2001
From: Luke Barratt <luke@barratt.me>
Date: Sat, 10 May 2014 13:43:40 +0100
Subject: [PATCH] Fixes shoutbox styling

---
 app/assets/stylesheets/components/_gather.scss   |  7 ++++++-
 app/assets/stylesheets/components/_shoutbox.scss | 14 +++++++++++---
 app/views/shoutmsgs/_shoutmsg.html.erb           | 10 ++++++----
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/components/_gather.scss b/app/assets/stylesheets/components/_gather.scss
index 2f22b0e..e4c01fb 100644
--- a/app/assets/stylesheets/components/_gather.scss
+++ b/app/assets/stylesheets/components/_gather.scss
@@ -35,7 +35,12 @@
   }
 
   .shoutbox-messages {
-    @include span-columns(12);
+    display: table;
+    width: 100%;
+
+    .user {
+      width: 10%;
+    }
 
     .timestamp {
       margin: 0 5px 5px;
diff --git a/app/assets/stylesheets/components/_shoutbox.scss b/app/assets/stylesheets/components/_shoutbox.scss
index 6d62865..02ce178 100644
--- a/app/assets/stylesheets/components/_shoutbox.scss
+++ b/app/assets/stylesheets/components/_shoutbox.scss
@@ -10,9 +10,12 @@
   display: table-row;
   margin-bottom: 5px;
   clear: both;
+  position: relative;
 
-  .timestamp {
-    @extend .highlight;
+  .destroy {
+    position: absolute;
+    top: 0;
+    right: -10px;
   }
 
   .user {
@@ -34,6 +37,11 @@
   .message {
     max-width: 66%;
     display: table-cell;
-    padding-left: 10px;
+
+    .contents {
+      position: relative;
+      display: block;
+      padding: 0 10px;
+    }
   }
 }
diff --git a/app/views/shoutmsgs/_shoutmsg.html.erb b/app/views/shoutmsgs/_shoutmsg.html.erb
index 297f828..b23ff29 100644
--- a/app/views/shoutmsgs/_shoutmsg.html.erb
+++ b/app/views/shoutmsgs/_shoutmsg.html.erb
@@ -1,9 +1,6 @@
 <div class="shoutmsg">
   <div class="user">
     <span class="username">
-      <% if shoutmsg.can_destroy? cuser %>
-        <%= link_to icon('times'), shoutmsg, method: :delete %> 
-      <% end %>
       <%= namelink shoutmsg.user %>
     </span>
     <span class="time">
@@ -11,6 +8,11 @@
     </span>  
   </div>
   <div class="message">
-    <%= shoutmsg.text %>  
+    <div class="contents">
+      <%= shoutmsg.text %>
+      <% if shoutmsg.can_destroy? cuser %>
+        <%= link_to icon('times'), shoutmsg, method: :delete, class: 'destroy' %>
+      <% end %>
+    </div>
   </div>
 </div>