Modify and finalize live now for events (#346)

* Add MVP for live events

* Modify and finalize live now for events

* Add profile to front end of live article indicator

* Check for footer container before doing calculations on it

app/assets/javascripts/initializers/initializeFooterMod.js

@@ -1,11 +1,12 @@
 function initializeFooterMod() {
+  var footerContainer = document.getElementById("footer-container");
   if (
-    document.getElementById('page-content').className.indexOf('stories-show') > -1
+    footerContainer && document.getElementById('page-content').className.indexOf('stories-show') > -1
   ) {
     document
       .getElementById('footer-container')
       .classList.remove('centered-footer');
-  } else {
+  } else if (footerContainer) {
     document
       .getElementById('footer-container')
       .classList.add('centered-footer');

app/assets/javascripts/initializers/initializeLiveArticle.js.erb

@@ -14,7 +14,7 @@ function initializeLiveArticle() {
           return;
         }
       }
-      if( article.path && window.location.href.indexOf(article.path) == -1) {
+      if( article.path && window.location.href.indexOf(article.path) == -1 && window.location.href.indexOf("/live") == -1) {
         el.innerHTML = liveIndicator(article);
         document.getElementById("live-exit-button").onclick = function(event){
           event.preventDefault();
@@ -43,7 +43,7 @@ function liveIndicator(article) {
           <a href="'+article.path+'" class="live-link" id="live-link"><div class="live-article-indicator-inner" id="live-article-indicator-inner">\
             <div class="live-pre-header"><span class="pulsating-circle"></span>Live Now</div>\
             <div class="live-article-title">'+article.title+'</div>\
-            <div class="live-user">'+article.user.name+'</div>\
+            <div class="live-user"><img src="'+article.user.profile_pic+'" />'+article.user.name+'</div>\
             <div class="live-tags">'+tagsHTML+'</div>\
           </div></a>'
 }

app/assets/stylesheets/shared.scss

@@ -206,10 +206,11 @@
 }
 .live-article-indicator-inner{
   padding:10px 20px;
-  background: $yellow;
-  border: 4px solid $black;
+  background: white;
+  border: 2px solid $dark-purple;
+  box-shadow: 5px 5px 0px $dark-purple;
   border-radius: 3px;
-  max-width:300px;
+  max-width:calc(22vw + 96px);
   min-width:200px;
   display:none;
   @media screen and ( min-width: 1410px ){
@@ -220,18 +221,29 @@
   }
   .live-pre-header{
     font-size:1em;
-    margin-top:7px;
-    margin-left:30px;
+    margin-top:2px;
+    margin-left:25px;
     margin-bottom:15px;
     font-weight:800;
     font-family: $helvetica-condensed;
     font-stretch:condensed;
   }
   .live-article-title{
-    font-size:1.6em;
+    font-size:1.4em;
     font-weight:600;
     margin: 5px 0px;
   }
+  .live-user{
+    font-weight: bold;
+    color:$dark-medium-gray;
+    img{
+      height: 27px;
+      width: 27px;
+      border-radius: 100px;
+      margin-right: 6px;
+      vertical-align: -6px;
+    }
+  }
   .live-tags{
     margin: 8px 0px;
     color:$medium-gray;
@@ -273,21 +285,21 @@
 
 .pulsating-circle {
   position: absolute;
-  left: 25px;
-  top: 27px;
+  left: 24px;
+  top: 25px;
   transform: translateX(-50%) translateY(-50%);
-  width: 30px;
-  height: 30px;
+  width: 22px;
+  height: 22px;
   
   &:before {
     content: '';
     position: relative;
     display: block;
-    width: 300%;
-    height: 300%;
+    width: 150%;
+    height: 150%;
     box-sizing: border-box;
-    margin-left: -100%;
-    margin-top: -100%;
+    margin-left: -25%;
+    margin-top: -25%;
     border-radius: 45px;
     background-color: $dark-purple;
     animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;

app/controllers/internal/events_controller.rb

@@ -12,13 +12,21 @@ module Internal
       @event = Event.create!(event_params)
       redirect_to(action: :index)
     rescue ActiveRecord::RecordInvalid => error
-      flash[:alert] = error.message
+      flash[:danger] = error.message
       redirect_to(action: :index)
     end
 
     def update
       @event = Event.find(params[:id])
-      @event.update(event_params)
+      if @event.update(event_params)
+        CacheBuster.new.bust "/live_articles"
+        flash[:success] = "#{@event.title} was successfully updated"
+        redirect_to "/internal/events"
+      else
+        flash[:danger] = @event.errors.full_messages
+        @events = Event.order("starts_at ASC")
+        render "index.html.erb"
+      end
     end
 
     private
@@ -33,7 +41,10 @@ module Internal
                                   :cover_image,
                                   :location_url,
                                   :description_markdown,
-                                  :published)
+                                  :published,
+                                  :host_name,
+                                  :profile_image,
+                                  :live_now)
     end
   end
 end

app/controllers/live_articles_controller.rb

@@ -2,19 +2,32 @@ class LiveArticlesController < ApplicationController
   before_action :set_cache_control_headers, only: [:index]
 
   def index
-    if @article = Article.where(live_now: true).order("featured_number DESC").first
-      set_surrogate_key_header "live--#{@article.id}"
-      render json: { 
-                      title: @article.title,
-                      path: @article.path,
-                      tag_list: @article.tag_list,
-                      comments_count: @article.comments_count,
-                      positive_reactions_count: @article.positive_reactions_count,
-                      user: {
-                        name: @article.user.name,
-                        profile_pic: ProfileImage.new(@article.user).get(50),
-                      }
-                  }
+    @event = Event.find_by(live_now: true)
+    @article = Article.where(live_now: true).order("featured_number DESC").first
+    if @event
+      set_surrogate_key_header "live--event_#{@event.id}"
+      render json:
+        {
+          title: @event.title,
+          path: @event.location_url,
+          tag_list: [],
+          user: {
+            name: @event.host_name,
+            profile_pic: ProfileImage.new(@event).get(50),
+          },
+        }
+    elsif @article
+      set_surrogate_key_header "live--article_#{@article.id}"
+      render json:
+        {
+          title: @article.title,
+          path: @article.path,
+          tag_list: @article.tag_list,
+          user: {
+            name: @article.user.name,
+            profile_pic: ProfileImage.new(@article.user).get(50),
+          },
+        }
     else
       set_surrogate_key_header "live--nothing"
       render json: {}

app/models/event.rb

@@ -1,13 +1,15 @@
 class Event < ApplicationRecord
   mount_uploader :cover_image, CoverImageUploader
-  before_validation :evaluate_markdown
+  mount_uploader :profile_image, ProfileImageUploader
 
   validates :title, length: { maximum: 90 }
   validates :location_url, url: { allow_blank: true, schemes: ["https", "http"] }
   validate :end_time_after_start
   validates :slug, presence: { if: :published? }, format: /\A[0-9a-z-]*\z/
   after_save :bust_cache
+
   before_validation :create_slug
+  before_validation :evaluate_markdown
 
   scope :in_the_future_and_published, -> {
     where("starts_at > ?", Time.now).

app/views/internal/events/_event_form.erb

@@ -2,10 +2,22 @@
     <%= f.label :cover_image %>: 
     <%= f.file_field :cover_image %>
 </div>
+<br>
+<div>
+<img src="<%= event.profile_image_url %>" style="width: 25%;">
+<br>
+    <%= f.label :profile_image %> (for live notification): 
+    <%= f.file_field :profile_image %>
+</div>
+<br>
 <div>
     <%= f.label :title %>
     <%= f.text_field :title, maxlength: 90, size: 40, required: true %>
 </div>
+<div>
+    <%= f.label :host_name %>
+    <%= f.text_field :host_name, size: 40, required: true %>
+</div>
 <div>
     <%= f.label :category %>
     <%= f.select :category, ['AMA', 'Workshop', 'Talk', 'Town Hall'], required: true %>
@@ -36,5 +48,10 @@
     <%= f.label :publish %>
     <%= f.check_box :published %>
 <div>
+<div>
+    <%= f.label :live_now %>
+    <%= f.check_box :live_now %>
+</div>
     <%= f.submit %>
 </div> 
+<hr>

app/views/layouts/internal.html.erb

@@ -106,7 +106,7 @@
 
       <div class="starter-template">
         <% flash.each do |type, message| %>
-        <div class="alert alert-danger">
+        <div class="alert alert-<%= type %>">
           <button class="close"data-dismiss="alert">X</button>
           <%= message %>
         </div>

db/migrate/20180522195341_add_live_columns_to_events.rb

@@ -0,0 +1,7 @@
+class AddLiveColumnsToEvents < ActiveRecord::Migration[5.1]
+  def change
+    add_column :events, :live_now, :boolean, default: false
+    add_column :events, :profile_image, :string
+    add_column :events, :host_name, :string
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20180516184437) do
+ActiveRecord::Schema.define(version: 20180522195341) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
@@ -243,8 +243,11 @@ ActiveRecord::Schema.define(version: 20180516184437) do
     t.text "description_html"
     t.text "description_markdown"
     t.datetime "ends_at"
+    t.string "host_name"
+    t.boolean "live_now", default: false
     t.string "location_name"
     t.string "location_url"
+    t.string "profile_image"
     t.boolean "published"
     t.string "slug"
     t.datetime "starts_at"