From 53b02d6a74f7b1f5c5b9a3bea08eb455b46d17d0 Mon Sep 17 00:00:00 2001
From: Ana <anamma06@gmail.com>
Date: Mon, 13 Jun 2016 13:34:55 +0200
Subject: [PATCH] Adapting number of columns in the carousel schedule taking
 screen width into account

---
 .../stylesheets/osem-schedule-print.css       |   8 +-
 app/assets/stylesheets/osem-schedule.css.scss | 137 +++++++++++++++++-
 app/controllers/conference_controller.rb      |   8 +-
 app/models/event.rb                           |   7 -
 app/models/event_type.rb                      |   2 +-
 app/views/conference/_carousel.html.erb       |  63 ++++++++
 app/views/conference/_schedule.html.erb       |  98 +++----------
 app/views/conference/_schedule_item.html.haml |   9 +-
 8 files changed, 235 insertions(+), 97 deletions(-)
 create mode 100644 app/views/conference/_carousel.html.erb

diff --git a/app/assets/stylesheets/osem-schedule-print.css b/app/assets/stylesheets/osem-schedule-print.css
index 3cbbb129..cad70a1c 100644
--- a/app/assets/stylesheets/osem-schedule-print.css
+++ b/app/assets/stylesheets/osem-schedule-print.css
@@ -46,9 +46,15 @@
 .event img, .img-circle {
    display: none;
 }
+h5 {
+   font-size: 10px;
+   line-height: 12px;
+   margin: 0px;
+ }
 .table th, .table td {
    line-height: 12px;
-}
+   padding: 3px;
+  }
 
 .schedule-speaker {
    font-weight: normal;
diff --git a/app/assets/stylesheets/osem-schedule.css.scss b/app/assets/stylesheets/osem-schedule.css.scss
index f7dd5afa..b92769fd 100644
--- a/app/assets/stylesheets/osem-schedule.css.scss
+++ b/app/assets/stylesheets/osem-schedule.css.scss
@@ -13,6 +13,9 @@ background-image: -webkit-gradient(
     color-stop(0.97, rgb(194,232,190)),
     color-stop(1, rgb(194,232,190))
 );
+
+cursor: pointer;
+padding: 2px;
 }
 
 #schedule td.event:hover
@@ -102,7 +105,7 @@ a.unstyled-link {
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4; /* number of lines to show */
+  -webkit-line-clamp: 5; /* number of lines to show */
 }
 
 .break-words{
@@ -122,3 +125,135 @@ a.unstyled-link {
    -webkit-hyphens: auto;
    hyphens: auto;
 }
+
+.room {
+  font-size: 11px;
+  height: 70px;
+  line-height: 14px;
+  overflow: hidden;
+}
+
+.event-title{
+  font-size: 11px;
+  height: 42px;
+  line-height: 14px;
+  overflow: hidden;
+}
+
+td.room{
+  width: 15%;
+  padding: 3px !important;
+  height: 77px;
+  max-width:15%;
+}
+
+th.date{
+  font-size: 12px;
+  padding: 8px 0px 8px 1% !important;
+}
+
+.speaker-pic{
+  padding: 5px 2px;
+  width: 25px;
+}
+
+/* Small devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+  .room {
+    font-size: 12px;
+    height: 75px;
+    line-height: 15px;
+  }
+
+  .event-title{
+    font-size: 12px;
+    height: 45px;
+    line-height: 15px;
+  }
+
+  .speaker-pic{
+    padding: 5px 3px;
+    width: 30px;
+  }
+
+  td.room{
+    width: 12%;
+    height: 90px;
+    padding: 5px !important;
+    max-width:12%;
+  }
+
+  th.date{
+    font-size: 13px;
+  }
+
+  td.event{
+    padding: 5px !important;
+  }
+}
+
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  .room {
+    font-size: 13px;
+    height: 80px;
+    line-height: 16px;
+  }
+
+  .event-title{
+    font-size: 13px;
+    height: 48px;
+    line-height: 16px;
+  }
+
+  .speaker-pic{
+    padding: 5px 4px;
+    width: 35px;
+  }
+
+  td.room{
+    width: 10%;
+    height: 100px;
+    padding: 6px !important;
+    max-width: 10%;
+  }
+
+  td.event{
+    padding: 6px !important;
+  }
+}
+
+/* Large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  .room {
+    font-size: 14px;
+    height: 85px;
+    line-height: 17px;
+  }
+
+  .event-title{
+    font-size: 14px;
+    height: 51px;
+    line-height: 17px;
+  }
+
+  .speaker-pic{
+    padding: 5px;
+    width: 39px;
+  }
+
+  td.room{
+    width: 9%;
+    height: 105px;
+    padding: 7px !important;
+    max-width: 9%;
+  }
+
+  td.event{
+    padding: 7px !important;
+  }
+
+  th.date{
+    font-size: 14px;
+  }
+}
diff --git a/app/controllers/conference_controller.rb b/app/controllers/conference_controller.rb
index 894e912e..da98b944 100644
--- a/app/controllers/conference_controller.rb
+++ b/app/controllers/conference_controller.rb
@@ -16,14 +16,10 @@ class ConferenceController < ApplicationController
     @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
-
-    @number_columns = 1
+    @step_minutes = EventType::LENGTH_STEP.minutes
     @conf_start = 9
     conf_end = 20
-    @intervals = @number_columns * 60 / EventType::LENGTH_STEP + 1
-    @width = 85 / @intervals
-    @step_minutes = EventType::LENGTH_STEP.minutes
-    @carousel_number = ((conf_end - @conf_start) / @number_columns.to_f).ceil
+    @conf_period = conf_end - @conf_start
 
     if @dates == Date.current
       @today = Date.current.strftime('%Y-%m-%d')
diff --git a/app/models/event.rb b/app/models/event.rb
index b9c01089..fe605131 100644
--- a/app/models/event.rb
+++ b/app/models/event.rb
@@ -223,13 +223,6 @@ class Event < ActiveRecord::Base
     (100 * result.values.count(true) / result.values.compact.count).to_s
   end
 
-  ##
-  # Returns the number of columns this event should span in the schedule
-  #
-  def span
-    self.event_type.length / EventType::LENGTH_STEP
-  end
-
   ##
   # Returns end of the event
   #
diff --git a/app/models/event_type.rb b/app/models/event_type.rb
index 548d2006..96d988cc 100644
--- a/app/models/event_type.rb
+++ b/app/models/event_type.rb
@@ -10,7 +10,7 @@ class EventType < ActiveRecord::Base
 
   alias_attribute :name, :title
 
-  # If LENGTH_STEP > 60 the public schedule must be changed
+  # If LENGTH_STEP must be divisor of 60, otherwise the schedule wont be displayed properly
   LENGTH_STEP = 15
 
   private
diff --git a/app/views/conference/_carousel.html.erb b/app/views/conference/_carousel.html.erb
new file mode 100644
index 00000000..be89386b
--- /dev/null
+++ b/app/views/conference/_carousel.html.erb
@@ -0,0 +1,63 @@
+<% intervals = number_columns * 60 / EventType::LENGTH_STEP + 1 %>
+<% width = 85 / intervals %>
+<% carousel_number = (conf_period / number_columns.to_f).ceil %>
+<div id="carousel-<%= date %>-<%= number_columns %>" class="carousel slide" data-ride="carousel" data-wrap='false' data-interval='false'>
+  <!-- Wrapper for slides -->
+  <div class="carousel-inner">
+    <% start_time = DateTime.parse("#{date} #{@conf_start}:00") %>
+    <% (0..carousel_number-1).each do |number| %>
+      <div class="item <%= number == 0 ? 'active first' : ( number == carousel_number-1 ? 'last' : '') %>">
+        <table class="table table-bordered" id="schedule" width="100%" style="margin:0px; padding:0px;">
+          <tr>
+            <th></th>
+            <% td_start_time = start_time %>
+            <% (1..intervals).each do |i| %>
+                <th class="date"><%= (td_start_time).strftime("%H:%M") %></th>
+                <% td_start_time += @step_minutes %>
+            <% end %>
+          </tr>
+
+          <% start_room_time = start_time %>
+          <% @rooms.each do |room| %>
+            <% start_room_time = start_time %>
+            <% span = 1 %>
+            <tr>
+              <td class="room">
+                <div class="room room-elipsis break-words">
+                  <%= room.name %>
+                </div>
+              </td>
+                <% events = room.events{ |e| e.start_time >= start_time and e.start_time < (start_time + number_columns.hour)} %>
+                <% (1..intervals).each do |i| %>
+                  <% if  span > 1 %>
+                    <% span -= 1 %>
+                  <% else %>
+                    <% event = events.find{|e| e.start_time <= start_room_time and e.end_time > start_room_time} %>
+                    <% if event %>
+                      <!-- There is an event, calculate the span and show it -->
+                      <% event_span =  (event.end_time.to_i - start_room_time.to_i) / 60 / EventType::LENGTH_STEP %>
+                      <% span = ((event_span + i - 1 ) > intervals ? intervals  + 1 - i : event_span) %>
+                      <%= render partial: 'schedule_item', locals: {event: event, span: span, width: width} %>
+                    <% else %>
+                      <!-- span equals 1 show an empty td -->
+                      <td width="<%= width %>%"; style="padding:0px;"></td>
+                    <% end %>
+                  <% end %>
+                  <% start_room_time += @step_minutes %>
+                <% end %>
+            </tr>
+          <% end %>
+          <% start_time = start_room_time - @step_minutes %>
+        </table>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Controls -->
+  <a class="left carousel-control" href="#carousel-<%= date %>-<%= number_columns %>" role="button" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left"></span>
+  </a>
+  <a class="right carousel-control" href="#carousel-<%= date %>-<%= number_columns %>" role="button" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right"></span>
+  </a>
+</div> <!-- Carousel -->
diff --git a/app/views/conference/_schedule.html.erb b/app/views/conference/_schedule.html.erb
index b614f31f..d5eb93b2 100644
--- a/app/views/conference/_schedule.html.erb
+++ b/app/views/conference/_schedule.html.erb
@@ -8,7 +8,7 @@
     <ul class="dropdown-menu">
       <% @dates.each do |date| %>
         <li class='li-dropdown-schedule'>
-          <%= link_to date, "#" + "#{date}", "data-toggle" => "tab" %>
+          <%= link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab" %>
         </li>
     <% end %>
     </ul>
@@ -18,94 +18,44 @@
     <% @dates.each do |date| %>
       <div class="tab-pane <%= 'active' if @dates.first == date %>" id ="<%= date %>" >
 
-        <div id="carousel-<%= date %>" class="carousel slide" data-ride="carousel" data-wrap='false' data-interval='false'>
-          <!-- Wrapper for slides -->
-          <div class="carousel-inner">
-            <% start_time = DateTime.parse("#{date} #{@conf_start}:00") %>
-            <% (0..@carousel_number-1).each do |number| %>
-              <div class="item <%= number == 0 ? 'active first' : ( number == @carousel_number-1 ? 'last' : '') %>">
-                <table class="table table-bordered" id="schedule" width="100%" style="margin:0px; padding:0px;">
-                  <tr>
-                    <th></th>
-                    <% td_start_time = start_time %>
-                    <% (1..@intervals).each do |i| %>
-                        <th style="font-size:12px; padding: 8px 0px 8px 4px;"><%= (td_start_time).strftime("%H:%M") %></th>
-                        <% td_start_time += @step_minutes %>
-                    <% end %>
-                  </tr>
+        <div class="visible-xs-inline">
+          <% number_columns = 1 %>
+          <%= render 'carousel', date: date, number_columns: number_columns, conf_period: @conf_period %>
+        </div>
 
-                  <% @rooms.each do |room| %>
-                    <% start_room_time = start_time %>
-                    <% span = 1 %>
-                    <tr>
-                      <td width="15%" height= "70px"; style="padding: 5px;max-width:15%;">
-                        <div class="room-elipsis break-words", style= "font-size: 11px; height:60px; line-height: 15px; overflow: hidden;">
-                          <%= room.name %>
-                        </div>
-                      </td>
-                        <% events = room.events{ |e| e.start_time >= start_time and e.start_time < (start_time + @number_columns.hour)} %>
-                        <% (1..@intervals).each do |i| %>
-                          <% if  span > 1 %>
-                            <% span -= 1 %>
-                          <% else %>
-                            <% event = events.find{|e| e.start_time <= start_room_time and e.end_time > start_room_time} %>
-                            <% if event %>
-                              <!-- There is an event, calculate the span and show it -->
-                              <% event_span =  (event.end_time.to_i - start_room_time.to_i) / 60 / EventType::LENGTH_STEP %>
-                              <% span = ((event_span + i - 1 ) > @intervals ? @intervals  + 1 - i : event_span) %>
-                              <%= render partial: 'schedule_item', locals: {event: event, span: span, width: @width} %>
-                            <% else %>
-                              <!-- span equals 1 show an empty td -->
-                              <td width="<%= @width %>%"; height='75px'; style="padding:0px;"></td>
-                            <% end %>
-                          <% end %>
-                          <% start_room_time += @step_minutes %>
-                        <% end %>
-                    </tr>
-                  <% end %>
-                  <% start_time += @number_columns.hour %>
-                </table>
-              </div>
-            <% end %>
-          </div>
+        <div class="visible-sm-inline">
+          <% number_columns = 2 %>
+          <%= render 'carousel', date: date, number_columns: number_columns, conf_period: @conf_period %>
+        </div>
 
-          <!-- Controls -->
-          <a class="left carousel-control" href="#carousel-<%= date %>" role="button" data-slide="prev">
-            <span class="glyphicon glyphicon-chevron-left"></span>
-          </a>
-          <a class="right carousel-control" href="#carousel-<%= date %>" role="button" data-slide="next">
-            <span class="glyphicon glyphicon-chevron-right"></span>
-          </a>
-        </div> <!-- Carousel -->
+        <div class="visible-md-inline visible-lg-inline">
+          <% number_columns = 3 %>
+          <%= render 'carousel', date: date, number_columns: number_columns, conf_period: @conf_period %>
+        </div>
 
       </div> <!-- Tab -->
     <% end %>
   </div>
 </div>
 <%= javascript_tag do %>
+// change of active tab and the button title when a date clicked
 $(function() {
-  // add a hash to the URL when the user clicks on a tab
-  $('a[data-toggle="tab"]').on('click', function(e) {
+  $('.date-tab').on('click', function(e) {
     $('.li-dropdown-schedule').removeClass('active');
     $('.schedule-dropdown').find('button').text($(this).text());
-    history.pushState(null, null, $(this).attr('href'));
-  });
-  // navigate to a tab when the history changes
-  window.addEventListener("popstate", function(e) {
-    var activeTab = $('[href=' + location.hash + ']');
-    if (activeTab.length) {
-      activeTab.tab('show');
-    } else {
-      $('.nav-tabs a[href=#<%= j @today %>]').tab('show');
-    }
   });
 });
 
+// use the date tag in the url to select a tab and the title of the button
 $(function() {
     var hash = window.location.hash;
-    hash && $('ul.nav a[href="' + hash + '"]').tab('show');
+    if(hash && !(hash === '#schedule')){
+      hash && $('ul a[href="' + hash + '"]').tab('show');
+      $('button.dropdown-toggle').text(hash.substr(1));
+    }
 });
 
+// hide the right and left controls when neccesary after moving the carousel
 $('.carousel').on('slid.bs.carousel', '',
 function(){
   $(this).children('.left.carousel-control').show();
@@ -117,10 +67,8 @@ function(){
   }
 });
 
-
 $(document).ready(function(){
-    $('.carousel').children('.left.carousel-control').hide();
+  // hide the left control when the page is ready
+  $('.carousel').children('.left.carousel-control').hide();
 });
-
-
 <% end %>
diff --git a/app/views/conference/_schedule_item.html.haml b/app/views/conference/_schedule_item.html.haml
index e52c9df4..39f2a147 100644
--- a/app/views/conference/_schedule_item.html.haml
+++ b/app/views/conference/_schedule_item.html.haml
@@ -1,13 +1,10 @@
 %td.event{ width: "#{ width * span }%" , |
-           height: "75px" , |
            colspan: span, |
-           style: "cursor:pointer; padding:0px;" , |
            role: "button" } |
   %a.unstyled-link{href: url_for(conference_program_proposal_path(@conference.short_title, event.id))}
-    %div{ class:"event-elipsis break-words", style: "font-size: 11px; height:45px; line-height: 15px; overflow: hidden;"}
+    %div{ class:"event-elipsis break-words event-title"}
       = event.title
     - if speaker = event.speakers.first
-      = image_tag speaker.gravatar_url, :class => "img-circle pull-right", |
+      = image_tag speaker.gravatar_url, :class => "img-circle pull-right speaker-pic", |
                                          :alt => speaker.name, |
-                                         :title => speaker.name, |
-                                         :style => "padding:5px 2px; width:25px" |
+                                         :title => speaker.name