gunghogeoduck/osem-fcy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Adapting number of columns in the carousel schedule taking screen width into account

Browse source
This commit is contained in:
Ana 2016-06-13 13:34:55 +02:00
parent d8f9de9363
commit 53b02d6a74
8 changed files with 235 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/assets/stylesheets/osem-schedule-print.css
View file

@ -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;

137
app/assets/stylesheets/osem-schedule.css.scss
View file

@ -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;
}
}

8
app/controllers/conference_controller.rb
View file

@ -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')

7
app/models/event.rb
View file

@ -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
#

2
app/models/event_type.rb
View file

@ -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

63
app/views/conference/_carousel.html.erb Normal file
View file

@ -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 -->

98
app/views/conference/_schedule.html.erb
View file

@ -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 %>

9
app/views/conference/_schedule_item.html.haml
View file

@ -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