Post follow and updates notifications V1 (#111)

* It is now possible to follow a post in order to receive updates about it
* Notifications are now sent when updates are published
* Post status changes are now tracked
* Update sidebar now shows the post status history
* Mark a comment as a post update using the comment form
* ... more ...

app/javascript/stylesheets/components/Comments.scss

@@ -1,9 +1,25 @@
 .commentsContainer {
+  @extend .my-3;
+
   .newCommentForm {
     @extend
       .d-flex,
+      .flex-column,
       .my-3;
 
+    .commentBodyForm {
+      @extend .d-flex;
+    }
+
+    .commentIsUpdateForm {
+      @extend
+        .d-flex,
+        .justify-content-between,
+        .mt-3;
+
+      margin-left: 48px;
+    }
+
     .currentUserAvatar {
       @extend
         .gravatar,

app/javascript/stylesheets/components/Post.scss

@@ -17,7 +17,9 @@
       @extend .sidebarCard;
 
       .postUpdateList {
-        @extend .w-100;
+        @extend
+          .scroll-shadows,
+          .w-100;
 
         max-height: 250px;
         overflow-y: scroll;
@@ -26,8 +28,16 @@
           @extend
             .d-flex,
             .flex-column,
-            .p-2,
-            .my-1;
+            .p-2;
+
+          &:after { // displays the little centered border under each post update
+            content: "";
+            display: block;
+            margin: 0 auto;
+            width: 25%;
+            padding-top: 16px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+          }
 
           .postUpdateListItemHeader {
             @extend .d-flex;
@@ -42,7 +52,7 @@
           }
 
           .postUpdateListItemBody {
-            @extend .m-0;
+            @extend .my-1;
 
             font-size: 15px;
           }
@@ -54,7 +64,9 @@
       @extend .sidebarCard;
 
       .likeList {
-        @extend .w-100;
+        @extend
+          .scroll-shadows,
+          .w-100;
 
         max-height: 170px;
         overflow-y: scroll;
@@ -69,7 +81,19 @@
           }
         }
       }
-    } 
+    }
+
+    .actionBoxContainer {
+      @extend
+        .sidebarCard,
+        .text-center;
+
+      .btn {
+        @extend
+          .mt-3,
+          .mb-1;
+      }
+    }
   }
 
   .postAndCommentsContainer {

app/javascript/stylesheets/general/_components.scss

@@ -72,7 +72,7 @@ a {
       .mb-3,
       .p-2;
 
-    width: 250px;
+    width: 280px;
     margin-right: 16px;
   }
 }

app/javascript/stylesheets/general/_custom_texts.scss

@@ -27,6 +27,15 @@
   color: $muted-text-color;
 }
 
+.smallMutedText {
+  @extend
+    .mutedText,
+    .m-0;
+  
+  font-size: smaller;
+  line-height: 95%;
+}
+
 .uppercaseText {
   @extend
     .text-secondary,

app/javascript/stylesheets/general/_index.scss

@@ -4,7 +4,7 @@
 */
 
 .container {
-  max-width: 920px;
+  max-width: 960px;
 }
 
 .turbolinks-progress-bar {
@@ -34,4 +34,41 @@
   color: #fff;
   background-color: #343a40;
   border-color: #343a40;
+}
+
+// Credits: https://codepen.io/chriscoyier/pen/YzXBYvL
+.scroll-shadows {
+  max-height: 200px;
+  overflow: auto;
+
+  background:
+    /* Shadow Cover TOP */
+    linear-gradient(
+      white 30%,
+      rgba(255, 255, 255, 0)
+    ) center top,
+    
+    /* Shadow Cover BOTTOM */
+    linear-gradient(
+      rgba(255, 255, 255, 0), 
+      white 70%
+    ) center bottom,
+    
+    /* Shadow TOP */
+    radial-gradient(
+      farthest-side at 50% 0,
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0)
+    ) center top,
+    
+    /* Shadow BOTTOM */
+    radial-gradient(
+      farthest-side at 50% 100%,
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0)
+    ) center bottom;
+  
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
+  background-attachment: local, local, scroll, scroll;
 }