Copy from https://bbbootstrap.com/snippets/user-business-timeline-322…

…89439

app/controllers/home_controller.rb

@@ -11,6 +11,9 @@ def index
     @third_level_user_job_roles = @second_level_user_job_roles.flat_map do |user_job_role|
       user_job_role.managed_user_job_roles.select(&:managed_user_job_roles)
     end.reject { |ujr| ujr.managed_user_job_roles.blank? }
+
+    @good_events = GoodEvent.all
+    @bad_events = BadEvent.all
   end
 
   protected

app/javascript/packs/application.scss

@@ -69,3 +69,5 @@
 
 // If you want to add custom CSS you can put it here.
 @import "stylesheets/custom";
+
+@import "stylesheets/timeline";

app/javascript/stylesheets/timeline.css

@@ -0,0 +1,97 @@
+.mt-70{
+  margin-top: 70px;
+}
+
+.mb-70{
+  margin-bottom: 70px;
+}
+
+.vertical-timeline {
+ width: 100%;
+ position: relative;
+ padding: 1.5rem 0 1rem;
+}
+
+.vertical-timeline::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 67px;
+ height: 100%;
+ width: 4px;
+ background: #e9ecef;
+ border-radius: .25rem;
+}
+
+.vertical-timeline-element {
+ position: relative;
+ margin: 0 0 1rem;
+}
+
+.vertical-timeline--animate .vertical-timeline-element-icon.bounce-in {
+ visibility: visible;
+ animation: cd-bounce-1 .8s;
+}
+.vertical-timeline-element-icon {
+ position: absolute;
+ top: 0;
+ left: 60px;
+}
+
+.vertical-timeline-element-icon .badge-dot-xl {
+ box-shadow: 0 0 0 5px #fff;
+}
+
+.badge-dot-xl {
+ width: 18px;
+ height: 18px;
+ position: relative;
+}
+.badge:empty {
+ display: none;
+}
+
+
+.badge-dot-xl::before {
+ content: '';
+ width: 10px;
+ height: 10px;
+ border-radius: .25rem;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin: -5px 0 0 -5px;
+ background: #fff;
+}
+
+.vertical-timeline-element-content {
+ position: relative;
+ margin-left: 90px;
+ font-size: .8rem;
+}
+
+.vertical-timeline-element-content .timeline-title {
+ font-size: .8rem;
+ text-transform: uppercase;
+ margin: 0 0 .5rem;
+ padding: 2px 0 0;
+ font-weight: bold;
+}
+
+.vertical-timeline-element-content .vertical-timeline-element-date {
+ display: block;
+ position: absolute;
+ left: -90px;
+ top: 0;
+ padding-right: 10px;
+ text-align: right;
+ color: #adb5bd;
+ font-size: .7619rem;
+ white-space: nowrap;
+}
+
+.vertical-timeline-element-content:after {
+ content: "";
+ display: table;
+ clear: both;
+}

app/views/home/index.html.erb

@@ -33,3 +33,61 @@
     </div>
   </section>
 <% end %>
+
+<%# Timeline Section %>
+<div class="row d-flex justify-content-center mt-70 mb-70">
+  <%# Good Events Column %>
+  <div class="col-md-6">
+    <div class="main-card mb-3 card">
+      <div class="card-body">
+        <h5 class="card-title text-success">Good Events</h5>
+        <div class="vertical-timeline vertical-timeline--animate vertical-timeline--one-column">
+          <% @good_events&.each do |event| %>
+            <div class="vertical-timeline-item vertical-timeline-element">
+              <div>
+                <span class="vertical-timeline-element-icon bounce-in">
+                  <i class="badge badge-dot badge-dot-xl badge-success"></i>
+                </span>
+                <div class="vertical-timeline-element-content bounce-in">
+                  <h4 class="timeline-title"><%= event.good_title %></h4>
+                  <p><%= event.users.pluck(:chinese_name).to_sentence %></p>
+                  <span class="vertical-timeline-element-date">
+                    <%= event.created_at.strftime("%I:%M %p") %>
+                  </span>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <%# Bad Events Column %>
+  <div class="col-md-6">
+    <div class="main-card mb-3 card">
+      <div class="card-body">
+        <h5 class="card-title text-danger">Bad Events</h5>
+        <div class="vertical-timeline vertical-timeline--animate vertical-timeline--one-column">
+          <% @bad_events&.each do |event| %>
+            <div class="vertical-timeline-item vertical-timeline-element">
+              <div>
+                <span class="vertical-timeline-element-icon bounce-in">
+                  <i class="badge badge-dot badge-dot-xl badge-danger"></i>
+                </span>
+                <div class="vertical-timeline-element-content bounce-in">
+                  <h4 class="timeline-title"><%= event.bad_title %></h4>
+                  <p><%= event.users.pluck(:chinese_name).to_sentence %></p>
+                  <span class="vertical-timeline-element-date">
+                    <%= event.created_at.strftime("%I:%M %p") %>
+                  </span>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+