Henne Vogelsang
GitHub
commit
92e9043a57
11 changed files with 320 additions and 93 deletions
|
|
@ -12,6 +12,7 @@
|
|||
//
|
||||
//= require jquery
|
||||
//= require jquery_ujs
|
||||
//= require jquery.mobile.custom.min
|
||||
//= require waypoints/jquery.waypoints
|
||||
//= require dataTables/jquery.dataTables
|
||||
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
|
||||
|
|
|
|||
3
app/assets/javascripts/jquery.mobile.custom.min.js
vendored
Normal file
3
app/assets/javascripts/jquery.mobile.custom.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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: 3px 2px;
|
||||
}
|
||||
|
||||
#schedule td.event:hover
|
||||
|
|
@ -75,3 +78,129 @@ a.unstyled-link {
|
|||
background-image: linear-gradient(to top, #f7faf2 24%, #53ab4a 97%,
|
||||
#53ab4a 100%);
|
||||
}
|
||||
|
||||
.schedule-dropdown{
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.schedule-dropdown > button{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.schedule-dropdown > .dropdown-menu{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.elipsis{
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.break-words{
|
||||
/* These are technically the same, but use both */
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
||||
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-all;
|
||||
|
||||
/* Non standard for webkit */
|
||||
word-break: break-word;
|
||||
|
||||
-ms-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.room, .event-title{
|
||||
font-size: 11px;
|
||||
line-height: 17px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
td.room{
|
||||
width: 15%;
|
||||
padding: 3px !important;
|
||||
max-width:15%;
|
||||
}
|
||||
|
||||
th.date{
|
||||
font-size: 12px;
|
||||
padding: 8px 0px 8px 1% !important;
|
||||
}
|
||||
|
||||
.speaker-pic{
|
||||
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, .event-title{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
td.room{
|
||||
width: 12%;
|
||||
max-width:12%;
|
||||
}
|
||||
|
||||
th.date{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
td.event{
|
||||
padding: 3px 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices (desktops, 992px and up) */
|
||||
@media (min-width: 992px) {
|
||||
.room, .event-title{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
td.room{
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
|
||||
td.event{
|
||||
padding: 3px 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (large desktops, 1200px and up) */
|
||||
@media (min-width: 1200px) {
|
||||
.room, .event-title{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
td.room{
|
||||
width: 9%;
|
||||
max-width: 9%;
|
||||
}
|
||||
|
||||
td.event{
|
||||
padding: 3px 6px !important;
|
||||
}
|
||||
|
||||
th.date{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +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
|
||||
@step_minutes = EventType::LENGTH_STEP.minutes
|
||||
@conf_start = 9
|
||||
conf_end = 20
|
||||
@conf_period = conf_end - @conf_start
|
||||
|
||||
if @dates == Date.current
|
||||
@today = Date.current.strftime('%Y-%m-%d')
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -223,6 +223,13 @@ class Event < ActiveRecord::Base
|
|||
(100 * result.values.count(true) / result.values.compact.count).to_s
|
||||
end
|
||||
|
||||
##
|
||||
# Returns end of the event
|
||||
#
|
||||
def end_time
|
||||
self.start_time + self.event_type.length.minutes
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
##
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ class EventType < ActiveRecord::Base
|
|||
|
||||
alias_attribute :name, :title
|
||||
|
||||
# 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
63
app/views/conference/_carousel.html.erb
Normal 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 schedule-table" id="schedule">
|
||||
<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" 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>
|
||||
<% 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 class="no-padding" width="<%= width %>%"></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 -->
|
||||
|
|
@ -1,88 +1,82 @@
|
|||
<div id="schedule-content">
|
||||
<h1 class="text-center"> Schedule for <%= @conference.title %></h1>
|
||||
<ul class="nav nav-tabs">
|
||||
<h1 class="text-center"> Schedule for <%= @conference.title %></h1>
|
||||
<div class="dropdown schedule-dropdown">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<%= @dates.first %>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<% @dates.each do |date| %>
|
||||
<li <%= "class=active" if @dates.first == date %>>
|
||||
<%= link_to date, "#" + "#{date}", "data-toggle" => "tab" %>
|
||||
<li class='li-dropdown-schedule'>
|
||||
<%= link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab" %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<% @dates.each do |date| %>
|
||||
<div class="tab-pane <%= 'active' if @dates.first == date %>" id ="<%= date %>" >
|
||||
<table class="table table-bordered" id="schedule" width="100%">
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<% @rooms.each do |room| %>
|
||||
<th><%= room.name %></th>
|
||||
<% end %>
|
||||
</tr>
|
||||
<div class="tab-content">
|
||||
<% @dates.each do |date| %>
|
||||
<div class="tab-pane <%= 'active' if @dates.first == date %>" id ="<%= date %>" >
|
||||
|
||||
<% span = {} %>
|
||||
<% @rooms.each do |room| %>
|
||||
<% span[room.id] = 1 %>
|
||||
<% end %>
|
||||
|
||||
<% conf_start = DateTime.parse("#{date} 09:00") %>
|
||||
<% conf_end = DateTime.parse("#{date} 19:00") %>
|
||||
|
||||
<% while conf_start < conf_end %>
|
||||
<%-
|
||||
start_hour = conf_start.hour
|
||||
start_min = conf_start.min %>
|
||||
|
||||
<tr>
|
||||
<td style="width:5%">
|
||||
<%= conf_start.strftime("%H:%M") %>
|
||||
</td>
|
||||
|
||||
<% @rooms.each do |room| %>
|
||||
<% events_for_date = @events.find_all {|e| e.room_id == room.id && e.start_time && e.start_time.to_date == date } %>
|
||||
<% event = events_for_date.find_all{|e| e.start_time.hour == start_hour && e.start_time.min == start_min } %>
|
||||
<% if !event.empty? %>
|
||||
<!-- There is an event, calculate the span and show it -->
|
||||
<% span[room.id] = event[0].event_type.length / 15 %>
|
||||
<%= render partial: 'schedule_item', locals: {event: event, room: room, span: span} %>
|
||||
<% span[room.id] = span[room.id] + 1 %>
|
||||
<% elsif span[room.id] > 1 %>
|
||||
<!-- span is <%= span[room.id] %> and bigger than 1, substract 1 from span -->
|
||||
<% span[room.id] = ( span[room.id] - 1 ) if span[room.id] > 1 %>
|
||||
<% end %>
|
||||
<% if span[room.id] == 1 %>
|
||||
<!-- span equals 1 show an empty td -->
|
||||
<td style="width: <%= 95 / @rooms.length %>%">
|
||||
</td>
|
||||
<% end %>
|
||||
<%end %>
|
||||
</tr>
|
||||
<% conf_start += 15.minutes %>
|
||||
<%end %>
|
||||
</table>
|
||||
<div class="visible-xs-inline">
|
||||
<% number_columns = 1 %>
|
||||
<%= render 'carousel', date: date, number_columns: number_columns %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="visible-sm-inline">
|
||||
<% number_columns = 2 %>
|
||||
<%= 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 %>
|
||||
</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) {
|
||||
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');
|
||||
}
|
||||
$('.date-tab').on('click', function(e) {
|
||||
$('.li-dropdown-schedule').removeClass('active');
|
||||
$('.schedule-dropdown').find('button').text($(this).text());
|
||||
});
|
||||
});
|
||||
|
||||
// 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();
|
||||
$(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');
|
||||
});
|
||||
});
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,12 @@
|
|||
%td.event{ style: "width: #{95 / @rooms.length}%; cursor:pointer", |
|
||||
rowspan: span[room.id], |
|
||||
%td.event{ width: "#{ width * span }%" , |
|
||||
colspan: span, |
|
||||
role: "button" } |
|
||||
%a.unstyled-link{href: url_for(conference_program_proposal_path(@conference.short_title, event[0].id))}
|
||||
- if speaker = event[0].speakers.first
|
||||
= image_tag speaker.gravatar_url, :class => "img-circle pull-right", |
|
||||
:alt => speaker.name, |
|
||||
:title => speaker.name, |
|
||||
:style => "padding:8px;" |
|
||||
%h5
|
||||
%span.fa.fa-comment
|
||||
= event[0].title
|
||||
- unless event[0].subtitle.blank?
|
||||
%span.schedule-subtitle
|
||||
= event[0].subtitle
|
||||
%span.schedule-speaker
|
||||
%span.fa.fa-user
|
||||
= speaker.name
|
||||
- if event[0].track
|
||||
%span.schedule-track
|
||||
%span.fa.fa-road
|
||||
%span.label{ style: "background-color: #{event[0].track.color}" }
|
||||
= event[0].track.name
|
||||
|
||||
%a.unstyled-link{href: url_for(conference_program_proposal_path(@conference.short_title, event.id))}
|
||||
%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, |
|
||||
:style => "height: #{ speaker_height(@rooms) }px; width: #{ speaker_width(@rooms) }px;"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="container">
|
||||
<% if @conference.program.events.scheduled.any? %>
|
||||
<% if @rooms.length > 1 and @conference.program.events.scheduled.any? %>
|
||||
<div role="tabpanel">
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue