All events moved to a different controller method

All events moved to a different controller method and css changed to put together things with the same css attributes.

app/assets/stylesheets/osem-schedule.css.scss

@@ -69,28 +69,14 @@ a.unstyled-link {
     outline: 0;
 }
 
-#schedule td.event {
+.program-dropdown, .schedule-dropdown{
-  background-image: linear-gradient(to top, #f7faf2 24%, #c2e8be 97%,
-#c2e8be 100%);
-}
-
-#schedule td.event:hover {
-  background-image: linear-gradient(to top, #f7faf2 24%, #53ab4a 97%,
-#53ab4a 100%);
-}
-
-.schedule-dropdown{
   margin-left: 20%;
   margin-right: 20%;
-  margin-top: 20px;
+  margin-top: 40px;
   margin-bottom: 20px;
 }
 
-.schedule-dropdown > button{
+.schedule-dropdown > button, .program-dropdown > button, .program-dropdown > .dropdown-menu, .schedule-dropdown > .dropdown-menu{
-  width: 100%;
-}
-
-.schedule-dropdown > .dropdown-menu{
   width: 100%;
 }
 

app/controllers/conference_controller.rb

@@ -13,6 +13,10 @@ class ConferenceController < ApplicationController
 
   def schedule
     @rooms = @conference.venue.rooms if @conference.venue
+    unless @conference.program.events.scheduled.any?
+      redirect_to events_conference_path(@conference.short_title)
+    end
+
     @events = @conference.program.events
     @events_xml = @events.scheduled.order(start_time: :asc).group_by{ |event| event.start_time.to_date }
     @dates = @conference.start_date..@conference.end_date
@@ -20,15 +24,13 @@ class ConferenceController < ApplicationController
     @conf_start = 9
     conf_end = 20
     @conf_period = conf_end - @conf_start
+  end
+
+  def events
+    @dates = @conference.start_date..@conference.end_date
 
     @scheduled_events = @conference.program.events.scheduled
     @unscheduled_events = @conference.program.events.unscheduled
-
-    if @dates == Date.current
-      @today = Date.current.strftime('%Y-%m-%d')
-    else
-      @today = @conference.start_date.strftime('%Y-%m-%d')
-    end
   end
 
   private

app/models/ability.rb

@@ -34,7 +34,7 @@ class Ability
       conference.splashpage && conference.splashpage.public == true
     end
     # Can view the schedule
-    can [:schedule], Conference do |conference|
+    can [:schedule, :events], Conference do |conference|
       conference.program.cfp && conference.program.schedule_public
     end
 

app/views/conference/_all_events.html.haml

@@ -1,57 +0,0 @@
-%h1.text-center
-  Program for
-  = @conference.title
-.dropdown.program-dropdown
-  %button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" }
-    Dates
-    %span.caret
-  %ul.dropdown-menu
-    - @dates.each do |date|
-      / we check if there is any event that day to indicate it appropiately
-      %li.li-dropdown-program
-        = link_to date, "#program-" + "#{date}", class: "program-selector#{ ' no-events-day' unless @conference.program.any_event_for_this_date?(date) }"
-    - if @unscheduled_events.any?
-      %li.li-dropdown-program
-        = link_to('Unscheduled', "#program-unscheduled", class: 'program-selector')
-
-.row
-
-  / scheduled events
-  - date = nil
-  - time = nil
-  - @scheduled_events.each do |event|
-    - unless event.start_time.strftime('%Y-%m-%d').eql?(date)
-      .col-xs-12.col-md-12
-        .date-content
-          %span{ class: 'date-title', id: "program-#{ event.start_time.strftime('%Y-%m-%d') }" }
-            = date = event.start_time.strftime('%Y-%m-%d')
-          %a{ title: "Go up", class: "pull-right", href: "#program" }
-            %i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true }
-    - unless event.start_time.strftime('%H:%M').eql?(time)
-      .col-xs-12.col-md-1
-        .start-time
-          = time = event.start_time.strftime('%H:%M')
-      .col-xs-12.col-md-11
-        .new-time-event
-          = render partial: 'event', locals: {event: event}
-    - else
-      .col-xs-12.col-md-11.col-md-offset-1
-        = render partial: 'event', locals: {event: event}
-
-  / confirmed events that are not scheduled
-  - if @unscheduled_events.any?
-    .col-xs-12.col-md-12
-      .date-content
-        %span.date-title#program-unscheduled
-          Unscheduled events
-        %a{ title: "Go up", class: "pull-right", href: "#program" }
-          %i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true }
-    - @unscheduled_events.each do |event|
-      .col-xs-12.col-md-12
-        .unscheduled-event
-          = render partial: 'event', locals: {event: event}
-
-:javascript
-  $('.program-selector').on('click', function(e) {
-    $('.li-dropdown-program').removeClass('active');
-  });

app/views/conference/_schedule_tabs.html.haml

@@ -0,0 +1,7 @@
+%div{ role: "tabpanel" }
+  / Nav tabs
+  %ul.nav.nav-tabs{ role: "tablist" }
+    %li{ class: "schedule #{ 'active' if active == 'schedule' }", role: "presentation" }
+      = link_to('Schedule', schedule_conference_path(@conference.short_title))
+    %li{ class: "program #{ 'active' if active == 'program' }", role: "presentation" }
+      = link_to('All events', events_conference_path(@conference.short_title))

app/views/conference/events.html.haml

@@ -0,0 +1,60 @@
+.container#program
+  -if @scheduled_events.any?
+    = render partial: 'schedule_tabs',  locals: { active: 'program' }
+
+  %h1.text-center
+    Program for
+    = @conference.title
+  .dropdown.program-dropdown
+    %button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" }
+      Dates
+      %span.caret
+    %ul.dropdown-menu
+      - @dates.each do |date|
+        %li.li-dropdown-program
+          = link_to date, "##{date}", class: "program-selector#{ ' no-events-day' unless @conference.program.any_event_for_this_date?(date) }"
+      - if @unscheduled_events.any?
+        %li.li-dropdown-program
+          = link_to('Unscheduled', "#unscheduled", class: 'program-selector')
+
+  .row
+
+    / scheduled events
+    - date = nil
+    - time = nil
+    - @scheduled_events.each do |event|
+      - unless event.start_time.strftime('%Y-%m-%d').eql?(date)
+        .col-xs-12.col-md-12
+          .date-content
+            %span{ class: 'date-title', id: "#{ event.start_time.strftime('%Y-%m-%d') }" }
+              = date = event.start_time.strftime('%Y-%m-%d')
+            %a{ title: "Go up", class: "pull-right", href: "#program" }
+              %i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true }
+      - unless event.start_time.strftime('%H:%M').eql?(time)
+        .col-xs-12.col-md-1
+          .start-time
+            = time = event.start_time.strftime('%H:%M')
+        .col-xs-12.col-md-11
+          .new-time-event
+            = render partial: 'event', locals: {event: event}
+      - else
+        .col-xs-12.col-md-11.col-md-offset-1
+          = render partial: 'event', locals: {event: event}
+
+    / confirmed events that are not scheduled
+    - if @unscheduled_events.any?
+      .col-xs-12.col-md-12
+        .date-content
+          %span.date-title#unscheduled
+            Unscheduled events
+          %a{ title: "Go up", class: "pull-right", href: "#program" }
+            %i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true }
+      - @unscheduled_events.each do |event|
+        .col-xs-12.col-md-12
+          .unscheduled-event
+            = render partial: 'event', locals: {event: event}
+
+:javascript
+  $('.program-selector').on('click', function(e) {
+    $('.li-dropdown-program').removeClass('active');
+  });

app/views/conference/schedule.html.erb

@@ -1,43 +0,0 @@
-<div class="container">
-  <% if @rooms.length > 1 and @conference.program.events.scheduled.any? %>
-      <div role="tabpanel">
-        <!-- Nav tabs -->
-        <ul class="nav nav-tabs" role="tablist">
-          <li role="presentation" class="active schedule">
-            <a title="Timetable of the events" href="#schedule" aria-controls="schedule" role="tab" data-toggle="tab">Schedule</a>
-          </li>
-          <li role="presentation" class="program">
-            <a title="All, including unscheduled Events" href="#program" aria-controls="program" role="tab" data-toggle="tab">All Events</a>
-          </li>
-        </ul>
-
-        <!-- Tab panes -->
-        <div class="tab-content">
-          <div role="tabpanel" class="tab-pane active" id="schedule">
-            <%= render 'schedule' %>
-          </div>
-          <div role="tabpanel" class="tab-pane" id="program">
-            <%= render 'all_events' %>
-          </div>
-        </div>
-      </div>
-  <% else %>
-      <%= render 'all_events' %>
-  <% end %>
-</div>
-
-<%= javascript_tag do %>
-// We set the program tab to active if the url tag starts by 'program-'
-$( document ).ready(function() {
-  if(window.location.hash.substring(1).startsWith('program-')){
-    schedule = $('.schedule');
-    schedule.removeClass('active');
-    schedule.find('a').attr("aria-expanded", "false");
-    $('#schedule').removeClass('active');
-    program = $('.program');
-    program.addClass('active');
-    program.find('a').attr("aria-expanded", "true");
-    $('#program').addClass('active');
-  }
-});
-<% end %>

app/views/conference/schedule.html.haml

@@ -0,0 +1,69 @@
+.container
+  = render partial: 'schedule_tabs',  locals: { active: 'schedule' }
+
+  #schedule-content
+    %h1.text-center
+      Schedule for
+      = @conference.title
+    .dropdown.schedule-dropdown
+      %button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" }
+        = @dates.first
+        %span.caret
+      %ul.dropdown-menu
+        - @dates.each do |date|
+          %li.li-dropdown-schedule
+            = link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab"
+
+    .tab-content
+      - @dates.each do |date|
+        %div{ class: "tab-pane #{ 'active' if @dates.first == date }", id: "#{ date }" }
+
+          .visible-xs-inline
+            = render partial: 'carousel', locals: { date: date, number_columns: 1 }
+
+          .visible-sm-inline
+            = render partial: 'carousel', locals: { date: date, number_columns: 2 }
+
+          .visible-md-inline.visible-lg-inline
+            = render partial: 'carousel', locals: { date: date, number_columns: 3 }
+
+:javascript
+  // change of active tab and the button title when a date clicked
+  $(function() {
+    $('.date-tab').on('click', function(e) {
+      $('.li-dropdown-schedule').removeClass('active');
+      $('.schedule-dropdown').find('button').text($(this).text());
+    });
+  });
+
+  // hide the right and left controls when neccesary after moving the carousel
+  $('.carousel').on('slid.bs.carousel', '',
+  function(){
+    $(this).children('.left.carousel-control').show();
+    $(this).children('.right.carousel-control').show();
+    if($(this).find('.first').hasClass('active')) {
+      $(this).children('.left.carousel-control').hide();
+    } else if($(this).find('.last').hasClass('active')) {
+      $(this).children('.right.carousel-control').hide();
+    }
+  });
+
+  $(document).ready(function(){
+    // hide the left control when the page is ready
+    $('.carousel').children('.left.carousel-control').hide();
+
+    // carousel swipe
+    $(".carousel-inner").swiperight(function() {
+      $(this).parent().carousel('prev');
+    });
+    $(".carousel-inner").swipeleft(function() {
+      $(this).parent().carousel('next');
+    });
+
+    // use the date tag in the url to select a tab and the title of the button
+    var hash = window.location.hash;
+    if(hash && !(hash === '#schedule')){
+      hash && $('ul a[href="' + hash + '"]').tab('show');
+      $('button.dropdown-toggle').text(hash.substr(1));
+    }
+  });

config/routes.rb

@@ -115,6 +115,7 @@ Osem::Application.routes.draw do
 
     member do
       get :schedule
+      get :events
     end
   end