From 889987f3ad51de0a84fc3a1d06265ee99095dabc Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Fri, 25 Aug 2017 18:46:04 +0200
Subject: [PATCH] Refactor styling

---
 .../stylesheets/request-for-comments.css.scss | 91 +++++++++----------
 app/views/request_for_comments/show.html.erb  | 20 ++--
 2 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss
index 16acb580..5c1d9227 100644
--- a/app/assets/stylesheets/request-for-comments.css.scss
+++ b/app/assets/stylesheets/request-for-comments.css.scss
@@ -25,47 +25,51 @@
 .comment {
   width: 100%;
   min-width: 200px;
+
+  .comment-header {
+    width: 100%;
+    overflow: hidden;
+    padding-bottom: 10px;
+    margin: auto;
+
+    .comment-username {
+      font-weight: bold;
+      width: 60%;
+      float: left;
+    }
+
+    .comment-date {
+      text-align: right;
+      color: #008cba;
+      margin-left: 60%;
+      font-size: x-small;
+    }
+
+    .comment-updated {
+      text-align: right;
+      margin-left: 60%;
+      font-size: x-small;
+    }
+  }
+
+  .comment-content {
+    word-wrap: break-word;
+    margin-bottom: 10px;
+  }
+
+  .comment-editor {
+    width: 100%;
+    height: auto;
+    background-color: inherit;
+    border-style: hidden;
+  }
+
+  .comment-actions {
+    display: none;
+  }
 }
 
-.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;
-  margin-bottom: 10px;
-}
-
-.popover-comment-editor {
-  width: 100%;
-  height: auto;
-  background-color: inherit;
-  border-style: hidden;
-}
-
-.popover-divider {
+.comment-divider {
   width: 100%;
   height: 1px;
   background-color: #008cba;
@@ -74,10 +78,6 @@
   margin-bottom: 10px;
 }
 
-.popover-action-button {
-  display: none;
-}
-
 #otherComments {
   h5 {
     margin-top: 0;
@@ -96,11 +96,10 @@
       font-style: italic;
     }
 
-    .popover-actions {
+    .comment-actions {
       display: flex;
 
-      .popover-action-button {
-        display: block;
+      button {
         margin-right: 5px;
       }
     }
diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 070e70de..c064695f 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -182,25 +182,25 @@ also, all settings from the rails model needed for the editor configuration in t
     comments.forEach(function(comment, index) {
       var commentText = preprocess(comment.text);
       if (index !== 0) {
-        htmlContent += '<div class="popover-divider"></div>'
+        htmlContent += '<div class="comment-divider"></div>'
       }
       htmlContent += '<div class="comment">';
-      htmlContent += '<div class="popover-header">' +
-        '<div class="popover-username">' + preprocess(comment.username) + '</div>' +
-        '<div class="popover-date">' + comment.date + '</div>';
+      htmlContent += '<div class="comment-header">' +
+        '<div class="comment-username">' + preprocess(comment.username) + '</div>' +
+        '<div class="comment-date">' + comment.date + '</div>';
       if (comment.updated) {
-        htmlContent += '<div class="popover-updated">' +
+        htmlContent += '<div class="comment-updated">' +
           '<i class="fa fa-pencil" aria-hidden="true"></i>' +
           '<%= t('request_for_comments.comment_edited') %>' +
           '</div>'
       }
       htmlContent += '</div>' +
-          '<div class="popover-comment">' + commentText + '</div>' +
-          '<textarea class="hidden popover-comment-editor">' + commentText + '</textarea>';
+          '<div class="comment-content">' + commentText + '</div>' +
+          '<textarea class="hidden comment-editor">' + commentText + '</textarea>';
       if (comment.editable) {
-        htmlContent += '<div class="popover-actions">' +
-            '<button class="popover-action-button action-edit btn btn-xs btn-warning" data-comment-id=' + comment.id + '><%= t('shared.edit') %></button>' +
-            '<button class="popover-action-button action-delete btn btn-xs btn-danger" data-comment-id=' + comment.id + '><%= t('shared.destroy') %></button>' +
+        htmlContent += '<div class="comment-actions">' +
+            '<button class="action-edit btn btn-xs btn-warning" data-comment-id=' + comment.id + '><%= t('shared.edit') %></button>' +
+            '<button class="action-delete btn btn-xs btn-danger" data-comment-id=' + comment.id + '><%= t('shared.destroy') %></button>' +
           '</div>';
       }
       htmlContent += '</div>';