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 %> + 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 @@ @@ -18,94 +18,44 @@ <% @dates.each do |date| %>
- +
+ <% number_columns = 3 %> + <%= render 'carousel', date: date, number_columns: number_columns, conf_period: @conf_period %> +
<% end %> <%= 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