From 028d43088557f03e2bf2f161061c0a5bfa32c33d Mon Sep 17 00:00:00 2001
From: Ana <anamma06@gmail.com>
Date: Fri, 17 Jun 2016 14:00:31 +0200
Subject: [PATCH] Schedule height fits a 600px screen and the schedule is hiden
 if there is only one room

---
 .../stylesheets/osem-schedule-print.css       |  4 +-
 app/assets/stylesheets/osem-schedule.css.scss | 95 ++++---------------
 app/helpers/application_helper.rb             | 37 ++++++++
 app/models/conference.rb                      | 10 --
 app/views/conference/_carousel.html.erb       | 10 +-
 app/views/conference/_schedule.html.erb       |  6 +-
 app/views/conference/_schedule_item.html.haml |  8 +-
 app/views/conference/schedule.html.erb        |  2 +-
 8 files changed, 74 insertions(+), 98 deletions(-)

diff --git a/app/assets/stylesheets/osem-schedule-print.css b/app/assets/stylesheets/osem-schedule-print.css
index cad70a1c..54fc3593 100644
--- a/app/assets/stylesheets/osem-schedule-print.css
+++ b/app/assets/stylesheets/osem-schedule-print.css
@@ -50,11 +50,11 @@ 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 b92769fd..cc48da5d 100644
--- a/app/assets/stylesheets/osem-schedule.css.scss
+++ b/app/assets/stylesheets/osem-schedule.css.scss
@@ -15,7 +15,7 @@ background-image: -webkit-gradient(
 );
 
 cursor: pointer;
-padding: 2px;
+padding: 3px 2px;
 }
 
 #schedule td.event:hover
@@ -94,18 +94,10 @@ a.unstyled-link {
   width: 100%;
 }
 
-.event-elipsis{
+.elipsis{
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3; /* number of lines to show */
-}
-
-.room-elipsis{
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5; /* number of lines to show */
 }
 
 .break-words{
@@ -126,24 +118,15 @@ a.unstyled-link {
    hyphens: auto;
 }
 
-.room {
+.room, .event-title{
   font-size: 11px;
-  height: 70px;
-  line-height: 14px;
-  overflow: hidden;
-}
-
-.event-title{
-  font-size: 11px;
-  height: 42px;
-  line-height: 14px;
+  line-height: 17px;
   overflow: hidden;
 }
 
 td.room{
   width: 15%;
   padding: 3px !important;
-  height: 77px;
   max-width:15%;
 }
 
@@ -153,33 +136,27 @@ th.date{
 }
 
 .speaker-pic{
-  padding: 5px 2px;
-  width: 25px;
+  padding: 4px 2px;
+}
+
+.schedule-table{
+  width: 100%;
+  margin:0px;
+  padding:0px;
+}
+
+td.no-padding{
+  padding:0px !important;
 }
 
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
-  .room {
+  .room, .event-title{
     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%;
   }
 
@@ -188,69 +165,39 @@ th.date{
   }
 
   td.event{
-    padding: 5px !important;
+    padding: 3px 4px !important;
   }
 }
 
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) {
-  .room {
+  .room, .event-title{
     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;
+    padding: 3px 5px !important;
   }
 }
 
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
-  .room {
+  .room, .event-title{
     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;
+    padding: 3px 6px !important;
   }
 
   th.date{
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index ad88edec..5004347c 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -298,4 +298,41 @@ module ApplicationHelper
     yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000
     (yiq >= 128) ? 'black' : 'white'
   end
+
+  def td_height(rooms)
+    td_height = 500 / rooms.length
+    # we want all least 3 lines in events and td padding = 3px, speaker picture height >= 25px
+    # and line-height = 17px => (17 * 3) + 6 + 25 = 82
+    td_height < 82 ? 82 : td_height
+  end
+
+  def room_height(rooms)
+    room_lines(rooms) * 17
+  end
+
+  def room_lines(rooms)
+    # line-height = 17px, td padding = 3px
+    (td_height(rooms) - 6) / 17
+  end
+
+  def event_height(rooms)
+    event_lines(rooms) * 17
+  end
+
+  def event_lines(rooms)
+    # line-height = 17px, td padding = 3px, speaker picture height >= 25px
+    (td_height(rooms) - 31) / 17
+  end
+
+  def speaker_height(rooms)
+    # td padding = 3px
+    speaker_height = td_height(rooms) - 6 - event_height(rooms)
+    # The speaker picture is a circle and the width must be <= 37 to avoid making the cell widther
+    speaker_height >= 37 ? 37 : speaker_height
+  end
+
+  def speaker_width(rooms)
+    # speaker picture padding: 4px 2px; and we want the picture to be a circle
+    speaker_height(rooms) - 4
+  end
 end
diff --git a/app/models/conference.rb b/app/models/conference.rb
index c90a8ea2..f0b73047 100644
--- a/app/models/conference.rb
+++ b/app/models/conference.rb
@@ -81,16 +81,6 @@ class Conference < ActiveRecord::Base
     result
   end
 
-  ##
-  # Check if there is any event in the program scheduled.
-  #
-  # ====Returns
-  # * +false+ ->  If there aren't schedules events
-  # * +true+ -> If there are schedules events
-  def scheduled?
-    self.program.events.where.not(start_time: nil).any?
-  end
-
   ##
   # Checks if the user is registered to the conference
   #
diff --git a/app/views/conference/_carousel.html.erb b/app/views/conference/_carousel.html.erb
index be89386b..fbdc8fa1 100644
--- a/app/views/conference/_carousel.html.erb
+++ b/app/views/conference/_carousel.html.erb
@@ -1,13 +1,13 @@
 <% intervals = number_columns * 60 / EventType::LENGTH_STEP + 1 %>
 <% width = 85 / intervals %>
-<% carousel_number = (conf_period / number_columns.to_f).ceil %>
+<% 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;">
+        <table class="table table-bordered schedule-table" id="schedule">
           <tr>
             <th></th>
             <% td_start_time = start_time %>
@@ -22,8 +22,8 @@
             <% start_room_time = start_time %>
             <% span = 1 %>
             <tr>
-              <td class="room">
-                <div class="room room-elipsis break-words">
+              <td class="room" style="height: <%= td_height(@rooms) %>px;">
+                <div class="room elipsis break-words" style="-webkit-line-clamp: <%= room_lines(@rooms) %>; height: <%= room_height(@rooms) %>px;">
                   <%= room.name %>
                 </div>
               </td>
@@ -40,7 +40,7 @@
                       <%= 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>
+                      <td class="no-padding" width="<%= width %>%"></td>
                     <% end %>
                   <% end %>
                   <% start_room_time += @step_minutes %>
diff --git a/app/views/conference/_schedule.html.erb b/app/views/conference/_schedule.html.erb
index f38c9022..991529cc 100644
--- a/app/views/conference/_schedule.html.erb
+++ b/app/views/conference/_schedule.html.erb
@@ -20,17 +20,17 @@
 
         <div class="visible-xs-inline">
           <% number_columns = 1 %>
-          <%= render 'carousel', date: date, number_columns: number_columns, conf_period: @conf_period %>
+          <%= render 'carousel', date: date, number_columns: number_columns %>
         </div>
 
         <div class="visible-sm-inline">
           <% number_columns = 2 %>
-          <%= render 'carousel', date: date, number_columns: number_columns, conf_period: @conf_period %>
+          <%= render 'carousel', date: date, number_columns: number_columns %>
         </div>
 
         <div class="visible-md-inline visible-lg-inline">
           <% number_columns = 3 %>
-          <%= render 'carousel', date: date, number_columns: number_columns, conf_period: @conf_period %>
+          <%= render 'carousel', date: date, number_columns: number_columns %>
         </div>
 
       </div> <!-- Tab -->
diff --git a/app/views/conference/_schedule_item.html.haml b/app/views/conference/_schedule_item.html.haml
index 39f2a147..d4d34ac7 100644
--- a/app/views/conference/_schedule_item.html.haml
+++ b/app/views/conference/_schedule_item.html.haml
@@ -2,9 +2,11 @@
            colspan: span, |
            role: "button" } |
   %a.unstyled-link{href: url_for(conference_program_proposal_path(@conference.short_title, event.id))}
-    %div{ class:"event-elipsis break-words event-title"}
+    %div{ class: "elipsis break-words event-title", |
+          style: "-webkit-line-clamp: #{ event_lines(@rooms) }; height: #{ event_height(@rooms) }px;"} |
       = event.title
     - if speaker = event.speakers.first
       = image_tag speaker.gravatar_url, :class => "img-circle pull-right speaker-pic", |
-                                         :alt => speaker.name, |
-                                         :title => speaker.name
+                                        :alt => speaker.name, |
+                                        :title => speaker.name, |
+                                        :style => "height: #{ speaker_height(@rooms) }px; width: #{ speaker_width(@rooms) }px;"
diff --git a/app/views/conference/schedule.html.erb b/app/views/conference/schedule.html.erb
index ceaf506d..f39b0cc2 100644
--- a/app/views/conference/schedule.html.erb
+++ b/app/views/conference/schedule.html.erb
@@ -1,5 +1,5 @@
 <div class="container">
-  <% if @conference.scheduled? %>
+  <% if @rooms.length > 1 and @conference.program.events.scheduled.any? %>
       <div role="tabpanel">
         <!-- Nav tabs -->
         <ul class="nav nav-tabs" role="tablist">