From 74a7deffa2c9c4de5906c831e1485cca6f36c7ad Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Thu, 17 Aug 2017 15:44:51 +0200
Subject: [PATCH] Change date position

---
 .../stylesheets/request-for-comments.css.scss | 40 ++++++++++++-------
 app/views/request_for_comments/show.html.erb  | 15 +++----
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss
index eb3fbba3..6448e6e7 100644
--- a/app/assets/stylesheets/request-for-comments.css.scss
+++ b/app/assets/stylesheets/request-for-comments.css.scss
@@ -22,26 +22,39 @@
   display: none !important;
 }
 
+p.comment {
+  width: 400px;
+}
+
+.popover-header {
+  width: 100%;
+  overflow: hidden;
+  padding-bottom: 10px;
+  margin: auto;
+}
+
 .popover-username {
   font-weight: bold;
+  width: 60%;
+  float: left;
+}
+
+.popover-date {
+  text-align: right;
+  color: #008cba;
+  margin-left: 60%;
+  font-size: x-small;
+}
+
+.popover-updated {
+  text-align: right;
+  margin-left: 60%;
+  font-size: x-small;
 }
 
 .popover-comment {
   word-wrap: break-word;
-}
-
-.popover-footer {
-  margin-top: 10px;
   margin-bottom: 10px;
-  width: 100%;
-}
-
-.popover-date {
-  color: #008cba;
-}
-
-.popover-updated {
-  font-style: italic;
 }
 
 .popover-divider {
@@ -49,6 +62,5 @@
   height: 1px;
   background-color: #008cba;
   overflow: hidden;
-  margin-top: -10px;
   margin-bottom: 10px;
 }
diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 94b388bb..ab60ef91 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -190,18 +190,19 @@ also, all settings from the rails model needed for the editor configuration in t
             if (index !== 0) {
                 popupContent += '<div class="popover-divider"></div>'
             }
-            popupContent += '<p>';
-            popupContent += '<div class="popover-username">' + comment.username + ':</div>' +
-                '<div class="popover-comment">' + preprocess(comment.text) + '</div>' +
-                '<div class="popover-footer">' +
-                  '<div class="popover-date">' + comment.date + '</div>';
+            popupContent += '<p class="comment">';
+            popupContent += '<div class="popover-header">' +
+                '<div class="popover-username">' + preprocess(comment.username) + '</div>' +
+                '<div class="popover-date">' + comment.date + '</div>';
             if (comment.updated) {
                 popupContent += '<div class="popover-updated">' +
                     '<i class="fa fa-pencil" aria-hidden="true"></i>' +
                     '<%= t('request_for_comments.comment_edited') %>' +
-                  '</div>'
+                    '</div>'
             }
-            popupContent += '</div></p>'
+            popupContent += '</div>';
+            popupContent += '<div class="popover-comment">' + preprocess(comment.text) + '</div>';
+            popupContent += '</p>';
         });
 
         // attach the popover to the ace sidebar (where the comment icon is displayed)