From 69043e1549dbae8631c62e76a5318e15e7042638 Mon Sep 17 00:00:00 2001 From: Ana Date: Fri, 10 Jun 2016 22:39:06 +0200 Subject: [PATCH 01/11] All events grouped by date and time The events are ordered by date and time in the all events section of the schedule. The event schdule definition in program has been changed to order the events. --- app/assets/stylesheets/osem-schedule.css.scss | 32 +++++++++++++ app/controllers/conference_controller.rb | 2 + app/models/event.rb | 2 +- app/models/program.rb | 2 +- app/views/conference/_all_events.html.erb | 46 +++++++++++-------- app/views/conference/_event.html.haml | 33 +++++++++++++ 6 files changed, 97 insertions(+), 20 deletions(-) create mode 100644 app/views/conference/_event.html.haml diff --git a/app/assets/stylesheets/osem-schedule.css.scss b/app/assets/stylesheets/osem-schedule.css.scss index cc48da5d..61959a67 100644 --- a/app/assets/stylesheets/osem-schedule.css.scss +++ b/app/assets/stylesheets/osem-schedule.css.scss @@ -149,6 +149,38 @@ td.no-padding{ padding:0px !important; } +.all-events-title{ + margin-top: 40px; + border-bottom: 1px solid #848484; +} + +.date-title{ + font-size: 23px; + font-weight: bold; + padding-bottom: 2px; + display:inline-block; +} + +.start-time{ + font-size: 16px; + padding-left: 30px; + margin-top: 32px; +} + +.new-time-event{ + margin-top: 20px; +} + + +.all-speaker-pic{ + padding: 20px 10px 20px 10px; +} + +.track{ + padding: 0px 5px 0px 5px; + display: inline-block; + } + /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { .room, .event-title{ diff --git a/app/controllers/conference_controller.rb b/app/controllers/conference_controller.rb index da98b944..b2f1670f 100644 --- a/app/controllers/conference_controller.rb +++ b/app/controllers/conference_controller.rb @@ -21,6 +21,8 @@ class ConferenceController < ApplicationController conf_end = 20 @conf_period = conf_end - @conf_start + @scheduled_events = @conference.program.events.scheduled + if @dates == Date.current @today = Date.current.strftime('%Y-%m-%d') else diff --git a/app/models/event.rb b/app/models/event.rb index 157446ac..1f6c7dfb 100644 --- a/app/models/event.rb +++ b/app/models/event.rb @@ -73,7 +73,7 @@ class Event < ActiveRecord::Base # ====Returns # * +true+ or +false+ def scheduled? - room && start_time ? true : false + room.present? && start_time.present? end def registration_possible? diff --git a/app/models/program.rb b/app/models/program.rb index eba1d4b0..246084a4 100644 --- a/app/models/program.rb +++ b/app/models/program.rb @@ -27,7 +27,7 @@ class Program < ActiveRecord::Base end def scheduled - where.not(start_time: nil).where.not(room: nil) + where.not(start_time: nil).where.not(room: nil).order(start_time: :asc) end def highlights diff --git a/app/views/conference/_all_events.html.erb b/app/views/conference/_all_events.html.erb index f7fd7fc0..deb7c7a7 100644 --- a/app/views/conference/_all_events.html.erb +++ b/app/views/conference/_all_events.html.erb @@ -1,19 +1,29 @@

Program for <%= @conference.title %>

-<% @conference.program.events.confirmed.each do |event| %> -
-

- <%= link_to event.title, conference_program_proposal_path(@conference.short_title, event.id) %> -
- - <%= event.subtitle %> - -

-

- presented by <%= event.speaker_names %> -

-

- <%= truncate(event.abstract, :length => 400) -%> - <%= link_to 'more', conference_program_proposal_path(@conference.short_title, @conference.program.id, event.id) if event.abstract.length > 400 %> -

-
-<% end %> +
+ <% date = nil %> + <% time = nil %> + <% @scheduled_events.each do |event| %> + <% unless event.start_time.strftime('%Y-%m-%d').eql?(date) %> +
+ '> + <%= date = event.start_time.strftime('%Y-%m-%d') %> + + + + +
+ <% end %> + <% unless event.start_time.strftime('%H:%M').eql?(time) %> +
+ <%= time = event.start_time.strftime('%H:%M') %> +
+
+ <%= render partial: 'event', locals: {event: event} %> +
+ <% else %> +
+ <%= render partial: 'event', locals: {event: event} %> +
+ <% end %> + <% end %> +
diff --git a/app/views/conference/_event.html.haml b/app/views/conference/_event.html.haml new file mode 100644 index 00000000..c556a9f1 --- /dev/null +++ b/app/views/conference/_event.html.haml @@ -0,0 +1,33 @@ +%a.unstyled-link{href: url_for(conference_program_proposal_path(@conference.short_title, event.id))} + .panel.panel-default + .panel-body + - if speaker = event.speakers.first + = image_tag speaker.gravatar_url, :class => "img-circle pull-right all-speaker-pic", | + :alt => speaker.name, | + :title => speaker.name | + %span.h3 + = event.title + %br + %small + = event.subtitle + %h4 + presented by #{event.speaker_names} + %p + = truncate(event.abstract, :length => 400) + = link_to 'more', conference_program_proposal_path(@conference.short_title, event.id) if event.abstract.length > 400 + - if event.scheduled? + %span.track + %span.fa.fa-clock-o + %span.label{ style: "background-color: grey" } + = event.start_time.strftime('%H:%M') + \- + = event.end_time.strftime('%H:%M') + %span.track + %span.fa.fa-map-marker + %span.label{ style: "background-color: grey" } + = event.room.name + - if event.track + %span.track + %span.fa.fa-road + %span.label{ style: "background-color: #{event.track.color}" } + = event.track.name From cc031b9f3a27319651518a624c6849a96715eb7b Mon Sep 17 00:00:00 2001 From: Ana Date: Sat, 11 Jun 2016 00:43:45 +0200 Subject: [PATCH 02/11] Unscheduled events added to all events Unscheduled events added to all events of the schedule --- app/assets/stylesheets/osem-schedule.css.scss | 3 +++ app/controllers/conference_controller.rb | 1 + app/models/program.rb | 4 ++++ app/views/conference/_all_events.html.erb | 19 +++++++++++++++++++ 4 files changed, 27 insertions(+) diff --git a/app/assets/stylesheets/osem-schedule.css.scss b/app/assets/stylesheets/osem-schedule.css.scss index 61959a67..587cde8d 100644 --- a/app/assets/stylesheets/osem-schedule.css.scss +++ b/app/assets/stylesheets/osem-schedule.css.scss @@ -171,6 +171,9 @@ td.no-padding{ margin-top: 20px; } +.unscheduled-event{ + margin-top: 8px; +} .all-speaker-pic{ padding: 20px 10px 20px 10px; diff --git a/app/controllers/conference_controller.rb b/app/controllers/conference_controller.rb index b2f1670f..f5e72483 100644 --- a/app/controllers/conference_controller.rb +++ b/app/controllers/conference_controller.rb @@ -22,6 +22,7 @@ class ConferenceController < ApplicationController @conf_period = conf_end - @conf_start @scheduled_events = @conference.program.events.scheduled + @unscheduled_events = @conference.program.events.unscheduled if @dates == Date.current @today = Date.current.strftime('%Y-%m-%d') diff --git a/app/models/program.rb b/app/models/program.rb index 246084a4..be8f56a9 100644 --- a/app/models/program.rb +++ b/app/models/program.rb @@ -30,6 +30,10 @@ class Program < ActiveRecord::Base where.not(start_time: nil).where.not(room: nil).order(start_time: :asc) end + def unscheduled + confirmed.where('start_time IS NULL OR room_id IS NULL') + end + def highlights where(state: :confirmed, is_highlight: true) end diff --git a/app/views/conference/_all_events.html.erb b/app/views/conference/_all_events.html.erb index deb7c7a7..6d7ac5e1 100644 --- a/app/views/conference/_all_events.html.erb +++ b/app/views/conference/_all_events.html.erb @@ -1,5 +1,7 @@

Program for <%= @conference.title %>

+ + <% date = nil %> <% time = nil %> <% @scheduled_events.each do |event| %> @@ -26,4 +28,21 @@
<% end %> <% end %> + + + <% if @unscheduled_events.any? %> +
+ + Unscheduled events + + + + +
+ <% end %> + <% @unscheduled_events.each do |event| %> +
+ <%= render partial: 'event', locals: {event: event} %> +
+ <% end %> From 70f30fcb1fe2754c1d9934541dc0f2cb25e4ce93 Mon Sep 17 00:00:00 2001 From: Ana Date: Sun, 12 Jun 2016 21:37:16 +0200 Subject: [PATCH 03/11] Dropdown with date tags in all events Dropdown with date tags in all events of the schedule --- app/assets/stylesheets/osem-schedule.css.scss | 18 +++++++++++++ app/models/program.rb | 11 ++++++++ app/views/conference/_all_events.html.erb | 26 +++++++++++++++++++ app/views/conference/schedule.html.erb | 20 ++++++++++++-- 4 files changed, 73 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/osem-schedule.css.scss b/app/assets/stylesheets/osem-schedule.css.scss index 587cde8d..206a0c70 100644 --- a/app/assets/stylesheets/osem-schedule.css.scss +++ b/app/assets/stylesheets/osem-schedule.css.scss @@ -184,6 +184,24 @@ td.no-padding{ display: inline-block; } +.program-dropdown{ + margin-left: 20%; + margin-right: 20%; + margin-top: 40px; +} + +.program-dropdown > button{ + width: 100%; +} + +.program-dropdown > .dropdown-menu{ + width: 100%; +} + +.no-events-day{ + color: #D8D8D8 !important; +} + /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { .room, .event-title{ diff --git a/app/models/program.rb b/app/models/program.rb index be8f56a9..ffbb5ef0 100644 --- a/app/models/program.rb +++ b/app/models/program.rb @@ -91,6 +91,17 @@ class Program < ActiveRecord::Base self.languages.split(',').map {|l| ISO_639.find(l).english_name} if self.languages.present? end + ## + # Checks if there is any event in the program that starts in the given date + # + # ====Returns + # * +True+ -> If there is any event for the given date + # * +False+ -> If there is not any event for the given date + def any_event_for_this_date?(date) + parsed_date = DateTime.parse("#{date} 00:00").utc + events.where(start_time: parsed_date..(parsed_date + 1)).any? + end + private ## diff --git a/app/views/conference/_all_events.html.erb b/app/views/conference/_all_events.html.erb index 6d7ac5e1..59175100 100644 --- a/app/views/conference/_all_events.html.erb +++ b/app/views/conference/_all_events.html.erb @@ -1,4 +1,24 @@

Program for <%= @conference.title %>

+ +
@@ -46,3 +66,9 @@
<% end %> + +<%= javascript_tag do %> +$('.program-selector').on('click', function(e) { + $('.li-dropdown-program').removeClass('active'); +}); +<% end %> diff --git a/app/views/conference/schedule.html.erb b/app/views/conference/schedule.html.erb index f39b0cc2..14079862 100644 --- a/app/views/conference/schedule.html.erb +++ b/app/views/conference/schedule.html.erb @@ -3,10 +3,10 @@
@@ -25,3 +25,19 @@ <%= render 'all_events' %> <% end %>
+ +<%= javascript_tag do %> +// We set the program tab to active if the url tag starts by 'program-' +$( document ).ready(function() { + if(window.location.hash.substring(1).startsWith('program-')){ + schedule = $('.schedule'); + schedule.removeClass('active'); + schedule.find('a').attr("aria-expanded", "false"); + $('#schedule').removeClass('active'); + program = $('.program'); + program.addClass('active'); + program.find('a').attr("aria-expanded", "true"); + $('#program').addClass('active'); + } +}); +<% end %> From 818c55df5a1526b37b6d6c4e89931962abd88a5f Mon Sep 17 00:00:00 2001 From: Ana Date: Thu, 30 Jun 2016 11:03:08 +0200 Subject: [PATCH 04/11] Tracks color in all events takes background into account. It uses https://github.com/openSUSE/osem/pull/1044 to select black or white color for the track text depending on what of them contrast more with the track background. --- app/views/conference/_event.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/conference/_event.html.haml b/app/views/conference/_event.html.haml index c556a9f1..98c835d3 100644 --- a/app/views/conference/_event.html.haml +++ b/app/views/conference/_event.html.haml @@ -29,5 +29,5 @@ - if event.track %span.track %span.fa.fa-road - %span.label{ style: "background-color: #{event.track.color}" } + %span.label{ style: "background-color: #{event.track.color}; color: #{ contrast_color(event.track.color) }" } = event.track.name From cd32ddd422eb5ce781ed08d971a93b1a4e69a0fe Mon Sep 17 00:00:00 2001 From: Ana Date: Thu, 30 Jun 2016 13:57:25 +0200 Subject: [PATCH 05/11] _schedule hamlfy _schedule changed to haml --- app/views/conference/_schedule.html.erb | 82 ------------------------ app/views/conference/_schedule.html.haml | 68 ++++++++++++++++++++ 2 files changed, 68 insertions(+), 82 deletions(-) delete mode 100644 app/views/conference/_schedule.html.erb create mode 100644 app/views/conference/_schedule.html.haml diff --git a/app/views/conference/_schedule.html.erb b/app/views/conference/_schedule.html.erb deleted file mode 100644 index 991529cc..00000000 --- a/app/views/conference/_schedule.html.erb +++ /dev/null @@ -1,82 +0,0 @@ -
-

Schedule for <%= @conference.title %>

- - -
- <% @dates.each do |date| %> -
- -
- <% number_columns = 1 %> - <%= render 'carousel', date: date, number_columns: number_columns %> -
- -
- <% number_columns = 2 %> - <%= render 'carousel', date: date, number_columns: number_columns %> -
- -
- <% number_columns = 3 %> - <%= render 'carousel', date: date, number_columns: number_columns %> -
- -
- <% end %> -
-
-<%= javascript_tag do %> -// change of active tab and the button title when a date clicked -$(function() { - $('.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; - 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 %> diff --git a/app/views/conference/_schedule.html.haml b/app/views/conference/_schedule.html.haml new file mode 100644 index 00000000..d0d1e3de --- /dev/null +++ b/app/views/conference/_schedule.html.haml @@ -0,0 +1,68 @@ +#schedule-content + %h1.text-center + Schedule for + = @conference.title + .dropdown.schedule-dropdown + %button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" } + = @dates.first + %span.caret + %ul.dropdown-menu + - @dates.each do |date| + %li.li-dropdown-schedule + = link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab" + + .tab-content + - @dates.each do |date| + %div{ class: "tab-pane #{ 'active' if @dates.first == date }", id: "#{ date }" } + + .visible-xs-inline + = render partial: 'carousel', locals: { date: date, number_columns: 1 } + + .visible-sm-inline + = render partial: 'carousel', locals: { date: date, number_columns: 2 } + + .visible-md-inline.visible-lg-inline + = render partial: 'carousel', locals: { date: date, number_columns: 3 } + +:javascript + // change of active tab and the button title when a date clicked + $(function() { + $('.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; + 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'); + }); + }); From 6f20031bc1d745b7496b91dfe739ac52e708aca4 Mon Sep 17 00:00:00 2001 From: Ana Date: Thu, 30 Jun 2016 20:56:00 +0200 Subject: [PATCH 06/11] _carousel hamlfy carousel changed to haml --- app/views/conference/_carousel.html.erb | 63 ------------------- app/views/conference/_carousel.html.haml | 55 ++++++++++++++++ app/views/conference/_schedule_item.html.haml | 2 +- 3 files changed, 56 insertions(+), 64 deletions(-) delete mode 100644 app/views/conference/_carousel.html.erb create mode 100644 app/views/conference/_carousel.html.haml diff --git a/app/views/conference/_carousel.html.erb b/app/views/conference/_carousel.html.erb deleted file mode 100644 index fbdc8fa1..00000000 --- a/app/views/conference/_carousel.html.erb +++ /dev/null @@ -1,63 +0,0 @@ -<% 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/_carousel.html.haml b/app/views/conference/_carousel.html.haml new file mode 100644 index 00000000..4a43f424 --- /dev/null +++ b/app/views/conference/_carousel.html.haml @@ -0,0 +1,55 @@ +- intervals = number_columns * 60 / EventType::LENGTH_STEP + 1 +- width = 85 / intervals +- carousel_number = (@conf_period / number_columns.to_f).ceil +.carousel.slide{ id: "carousel-#{ date }-#{ number_columns }", | + "data-ride" => "carousel", | + "data-wrap" => "false", | + "data-interval" => "false" } + / Wrapper for slides + .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.table.table-bordered.schedule-table#schedule + %tr + %th + - td_start_time = start_time + - (1..intervals).each do |i| + %th.date + = (td_start_time).strftime("%H:%M") + - td_start_time += @step_minutes + + - start_room_time = start_time + - @rooms.each do |room| + - start_room_time = start_time + - span = 1 + %tr + %td.room{ style: "height: #{ td_height(@rooms) }px;" } + .room.elipsis.break-words{ style: "-webkit-line-clamp: #{ room_lines(@rooms) }; height: #{ room_height(@rooms) }px;" } + = room.name + - 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 + / if span equals 1 show an empty td + %td.no-padding{ width: "#{ width }%"} + - start_room_time += @step_minutes + - start_time = start_room_time - @step_minutes + + / Controls + %a.left.carousel-control{ href: "#carousel-#{ date }-#{ number_columns }", | + role: "button", | + "data-slide" => "prev" } + %span.glyphicon.glyphicon-chevron-left + %a.right.carousel-control{ href: "#carousel-#{ date }-#{ number_columns }", | + role: "button", | + "data-slide" => "next" } + %span.glyphicon.glyphicon-chevron-right diff --git a/app/views/conference/_schedule_item.html.haml b/app/views/conference/_schedule_item.html.haml index d4d34ac7..c611e2ad 100644 --- a/app/views/conference/_schedule_item.html.haml +++ b/app/views/conference/_schedule_item.html.haml @@ -1,6 +1,6 @@ %td.event{ width: "#{ width * span }%" , | colspan: span, | - role: "button" } | + role: "button" } %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;"} | From 24364d01366ded2fca41e733bd1a123c3746f56b Mon Sep 17 00:00:00 2001 From: Ana Date: Wed, 6 Jul 2016 19:53:02 +0200 Subject: [PATCH 07/11] _all_events hamlfy _all_events changed to haml and margins moved inside the content of bootstrat cols --- app/assets/stylesheets/osem-schedule.css.scss | 5 ++ app/views/conference/_all_events.html.erb | 74 ------------------- app/views/conference/_all_events.html.haml | 57 ++++++++++++++ 3 files changed, 62 insertions(+), 74 deletions(-) delete mode 100644 app/views/conference/_all_events.html.erb create mode 100644 app/views/conference/_all_events.html.haml diff --git a/app/assets/stylesheets/osem-schedule.css.scss b/app/assets/stylesheets/osem-schedule.css.scss index 206a0c70..dfdb6e11 100644 --- a/app/assets/stylesheets/osem-schedule.css.scss +++ b/app/assets/stylesheets/osem-schedule.css.scss @@ -171,6 +171,11 @@ td.no-padding{ margin-top: 20px; } +.date-content{ + border-bottom: 1px solid #6E6E6E; + margin-top: 30px; +} + .unscheduled-event{ margin-top: 8px; } diff --git a/app/views/conference/_all_events.html.erb b/app/views/conference/_all_events.html.erb deleted file mode 100644 index 59175100..00000000 --- a/app/views/conference/_all_events.html.erb +++ /dev/null @@ -1,74 +0,0 @@ -

Program for <%= @conference.title %>

- - -
- - - <% date = nil %> - <% time = nil %> - <% @scheduled_events.each do |event| %> - <% unless event.start_time.strftime('%Y-%m-%d').eql?(date) %> -
- '> - <%= date = event.start_time.strftime('%Y-%m-%d') %> - - - - -
- <% end %> - <% unless event.start_time.strftime('%H:%M').eql?(time) %> -
- <%= time = event.start_time.strftime('%H:%M') %> -
-
- <%= render partial: 'event', locals: {event: event} %> -
- <% else %> -
- <%= render partial: 'event', locals: {event: event} %> -
- <% end %> - <% end %> - - - <% if @unscheduled_events.any? %> -
- - Unscheduled events - - - - -
- <% end %> - <% @unscheduled_events.each do |event| %> -
- <%= render partial: 'event', locals: {event: event} %> -
- <% end %> -
- -<%= javascript_tag do %> -$('.program-selector').on('click', function(e) { - $('.li-dropdown-program').removeClass('active'); -}); -<% end %> diff --git a/app/views/conference/_all_events.html.haml b/app/views/conference/_all_events.html.haml new file mode 100644 index 00000000..7765ddc4 --- /dev/null +++ b/app/views/conference/_all_events.html.haml @@ -0,0 +1,57 @@ +%h1.text-center + Program for + = @conference.title +.dropdown.program-dropdown + %button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" } + Dates + %span.caret + %ul.dropdown-menu + - @dates.each do |date| + / we check if there is any event that day to indicate it appropiately + %li.li-dropdown-program + = link_to date, "#program-" + "#{date}", class: "program-selector#{ ' no-events-day' unless @conference.program.any_event_for_this_date?(date) }" + - if @unscheduled_events.any? + %li.li-dropdown-program + = link_to('Unscheduled', "#program-unscheduled", class: 'program-selector') + +.row + + / scheduled events + - date = nil + - time = nil + - @scheduled_events.each do |event| + - unless event.start_time.strftime('%Y-%m-%d').eql?(date) + .col-xs-12.col-md-12 + .date-content + %span{ class: 'date-title', id: "program-#{ event.start_time.strftime('%Y-%m-%d') }" } + = date = event.start_time.strftime('%Y-%m-%d') + %a{ title: "Go up", class: "pull-right", href: "#program" } + %i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true } + - unless event.start_time.strftime('%H:%M').eql?(time) + .col-xs-12.col-md-1 + .start-time + = time = event.start_time.strftime('%H:%M') + .col-xs-12.col-md-11 + .new-time-event + = render partial: 'event', locals: {event: event} + - else + .col-xs-12.col-md-11.col-md-offset-1 + = render partial: 'event', locals: {event: event} + + / confirmed events that are not scheduled + - if @unscheduled_events.any? + .col-xs-12.col-md-12 + .date-content + %span.date-title#program-unscheduled + Unscheduled events + %a{ title: "Go up", class: "pull-right", href: "#program" } + %i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true } + - @unscheduled_events.each do |event| + .col-xs-12.col-md-12 + .unscheduled-event + = render partial: 'event', locals: {event: event} + +:javascript + $('.program-selector').on('click', function(e) { + $('.li-dropdown-program').removeClass('active'); + }); From 6d9eabcc0e014a74fa7abea7432d2735d42367d6 Mon Sep 17 00:00:00 2001 From: Ana Date: Thu, 30 Jun 2016 16:53:15 +0200 Subject: [PATCH 08/11] All events moved to a different controller method All events moved to a different controller method and css changed to put together things with the same css attributes. --- app/assets/stylesheets/osem-schedule.css.scss | 20 +----- app/controllers/conference_controller.rb | 14 ++-- app/models/ability.rb | 2 +- app/views/conference/_all_events.html.haml | 57 --------------- app/views/conference/_schedule_tabs.html.haml | 7 ++ app/views/conference/events.html.haml | 60 ++++++++++++++++ app/views/conference/schedule.html.erb | 43 ------------ app/views/conference/schedule.html.haml | 69 +++++++++++++++++++ config/routes.rb | 1 + 9 files changed, 149 insertions(+), 124 deletions(-) delete mode 100644 app/views/conference/_all_events.html.haml create mode 100644 app/views/conference/_schedule_tabs.html.haml create mode 100644 app/views/conference/events.html.haml delete mode 100644 app/views/conference/schedule.html.erb create mode 100644 app/views/conference/schedule.html.haml diff --git a/app/assets/stylesheets/osem-schedule.css.scss b/app/assets/stylesheets/osem-schedule.css.scss index dfdb6e11..bdcb6544 100644 --- a/app/assets/stylesheets/osem-schedule.css.scss +++ b/app/assets/stylesheets/osem-schedule.css.scss @@ -69,28 +69,14 @@ a.unstyled-link { outline: 0; } -#schedule td.event { - background-image: linear-gradient(to top, #f7faf2 24%, #c2e8be 97%, -#c2e8be 100%); -} - -#schedule td.event:hover { - background-image: linear-gradient(to top, #f7faf2 24%, #53ab4a 97%, -#53ab4a 100%); -} - -.schedule-dropdown{ +.program-dropdown, .schedule-dropdown{ margin-left: 20%; margin-right: 20%; - margin-top: 20px; + margin-top: 40px; margin-bottom: 20px; } -.schedule-dropdown > button{ - width: 100%; -} - -.schedule-dropdown > .dropdown-menu{ +.schedule-dropdown > button, .program-dropdown > button, .program-dropdown > .dropdown-menu, .schedule-dropdown > .dropdown-menu{ width: 100%; } diff --git a/app/controllers/conference_controller.rb b/app/controllers/conference_controller.rb index f5e72483..134fc745 100644 --- a/app/controllers/conference_controller.rb +++ b/app/controllers/conference_controller.rb @@ -13,6 +13,10 @@ class ConferenceController < ApplicationController def schedule @rooms = @conference.venue.rooms if @conference.venue + unless @conference.program.events.scheduled.any? + redirect_to events_conference_path(@conference.short_title) + end + @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 @@ -20,15 +24,13 @@ class ConferenceController < ApplicationController @conf_start = 9 conf_end = 20 @conf_period = conf_end - @conf_start + end + + def events + @dates = @conference.start_date..@conference.end_date @scheduled_events = @conference.program.events.scheduled @unscheduled_events = @conference.program.events.unscheduled - - if @dates == Date.current - @today = Date.current.strftime('%Y-%m-%d') - else - @today = @conference.start_date.strftime('%Y-%m-%d') - end end private diff --git a/app/models/ability.rb b/app/models/ability.rb index fb48808a..76e1fc4c 100644 --- a/app/models/ability.rb +++ b/app/models/ability.rb @@ -34,7 +34,7 @@ class Ability conference.splashpage && conference.splashpage.public == true end # Can view the schedule - can [:schedule], Conference do |conference| + can [:schedule, :events], Conference do |conference| conference.program.cfp && conference.program.schedule_public end diff --git a/app/views/conference/_all_events.html.haml b/app/views/conference/_all_events.html.haml deleted file mode 100644 index 7765ddc4..00000000 --- a/app/views/conference/_all_events.html.haml +++ /dev/null @@ -1,57 +0,0 @@ -%h1.text-center - Program for - = @conference.title -.dropdown.program-dropdown - %button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" } - Dates - %span.caret - %ul.dropdown-menu - - @dates.each do |date| - / we check if there is any event that day to indicate it appropiately - %li.li-dropdown-program - = link_to date, "#program-" + "#{date}", class: "program-selector#{ ' no-events-day' unless @conference.program.any_event_for_this_date?(date) }" - - if @unscheduled_events.any? - %li.li-dropdown-program - = link_to('Unscheduled', "#program-unscheduled", class: 'program-selector') - -.row - - / scheduled events - - date = nil - - time = nil - - @scheduled_events.each do |event| - - unless event.start_time.strftime('%Y-%m-%d').eql?(date) - .col-xs-12.col-md-12 - .date-content - %span{ class: 'date-title', id: "program-#{ event.start_time.strftime('%Y-%m-%d') }" } - = date = event.start_time.strftime('%Y-%m-%d') - %a{ title: "Go up", class: "pull-right", href: "#program" } - %i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true } - - unless event.start_time.strftime('%H:%M').eql?(time) - .col-xs-12.col-md-1 - .start-time - = time = event.start_time.strftime('%H:%M') - .col-xs-12.col-md-11 - .new-time-event - = render partial: 'event', locals: {event: event} - - else - .col-xs-12.col-md-11.col-md-offset-1 - = render partial: 'event', locals: {event: event} - - / confirmed events that are not scheduled - - if @unscheduled_events.any? - .col-xs-12.col-md-12 - .date-content - %span.date-title#program-unscheduled - Unscheduled events - %a{ title: "Go up", class: "pull-right", href: "#program" } - %i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true } - - @unscheduled_events.each do |event| - .col-xs-12.col-md-12 - .unscheduled-event - = render partial: 'event', locals: {event: event} - -:javascript - $('.program-selector').on('click', function(e) { - $('.li-dropdown-program').removeClass('active'); - }); diff --git a/app/views/conference/_schedule_tabs.html.haml b/app/views/conference/_schedule_tabs.html.haml new file mode 100644 index 00000000..6ca529b3 --- /dev/null +++ b/app/views/conference/_schedule_tabs.html.haml @@ -0,0 +1,7 @@ +%div{ role: "tabpanel" } + / Nav tabs + %ul.nav.nav-tabs{ role: "tablist" } + %li{ class: "schedule #{ 'active' if active == 'schedule' }", role: "presentation" } + = link_to('Schedule', schedule_conference_path(@conference.short_title)) + %li{ class: "program #{ 'active' if active == 'program' }", role: "presentation" } + = link_to('All events', events_conference_path(@conference.short_title)) diff --git a/app/views/conference/events.html.haml b/app/views/conference/events.html.haml new file mode 100644 index 00000000..939e4254 --- /dev/null +++ b/app/views/conference/events.html.haml @@ -0,0 +1,60 @@ +.container#program + -if @scheduled_events.any? + = render partial: 'schedule_tabs', locals: { active: 'program' } + + %h1.text-center + Program for + = @conference.title + .dropdown.program-dropdown + %button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" } + Dates + %span.caret + %ul.dropdown-menu + - @dates.each do |date| + %li.li-dropdown-program + = link_to date, "##{date}", class: "program-selector#{ ' no-events-day' unless @conference.program.any_event_for_this_date?(date) }" + - if @unscheduled_events.any? + %li.li-dropdown-program + = link_to('Unscheduled', "#unscheduled", class: 'program-selector') + + .row + + / scheduled events + - date = nil + - time = nil + - @scheduled_events.each do |event| + - unless event.start_time.strftime('%Y-%m-%d').eql?(date) + .col-xs-12.col-md-12 + .date-content + %span{ class: 'date-title', id: "#{ event.start_time.strftime('%Y-%m-%d') }" } + = date = event.start_time.strftime('%Y-%m-%d') + %a{ title: "Go up", class: "pull-right", href: "#program" } + %i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true } + - unless event.start_time.strftime('%H:%M').eql?(time) + .col-xs-12.col-md-1 + .start-time + = time = event.start_time.strftime('%H:%M') + .col-xs-12.col-md-11 + .new-time-event + = render partial: 'event', locals: {event: event} + - else + .col-xs-12.col-md-11.col-md-offset-1 + = render partial: 'event', locals: {event: event} + + / confirmed events that are not scheduled + - if @unscheduled_events.any? + .col-xs-12.col-md-12 + .date-content + %span.date-title#unscheduled + Unscheduled events + %a{ title: "Go up", class: "pull-right", href: "#program" } + %i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true } + - @unscheduled_events.each do |event| + .col-xs-12.col-md-12 + .unscheduled-event + = render partial: 'event', locals: {event: event} + +:javascript + $('.program-selector').on('click', function(e) { + $('.li-dropdown-program').removeClass('active'); + }); diff --git a/app/views/conference/schedule.html.erb b/app/views/conference/schedule.html.erb deleted file mode 100644 index 14079862..00000000 --- a/app/views/conference/schedule.html.erb +++ /dev/null @@ -1,43 +0,0 @@ -
- <% if @rooms.length > 1 and @conference.program.events.scheduled.any? %> -
- - - - -
-
- <%= render 'schedule' %> -
-
- <%= render 'all_events' %> -
-
-
- <% else %> - <%= render 'all_events' %> - <% end %> -
- -<%= javascript_tag do %> -// We set the program tab to active if the url tag starts by 'program-' -$( document ).ready(function() { - if(window.location.hash.substring(1).startsWith('program-')){ - schedule = $('.schedule'); - schedule.removeClass('active'); - schedule.find('a').attr("aria-expanded", "false"); - $('#schedule').removeClass('active'); - program = $('.program'); - program.addClass('active'); - program.find('a').attr("aria-expanded", "true"); - $('#program').addClass('active'); - } -}); -<% end %> diff --git a/app/views/conference/schedule.html.haml b/app/views/conference/schedule.html.haml new file mode 100644 index 00000000..05476aae --- /dev/null +++ b/app/views/conference/schedule.html.haml @@ -0,0 +1,69 @@ +.container + = render partial: 'schedule_tabs', locals: { active: 'schedule' } + + #schedule-content + %h1.text-center + Schedule for + = @conference.title + .dropdown.schedule-dropdown + %button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" } + = @dates.first + %span.caret + %ul.dropdown-menu + - @dates.each do |date| + %li.li-dropdown-schedule + = link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab" + + .tab-content + - @dates.each do |date| + %div{ class: "tab-pane #{ 'active' if @dates.first == date }", id: "#{ date }" } + + .visible-xs-inline + = render partial: 'carousel', locals: { date: date, number_columns: 1 } + + .visible-sm-inline + = render partial: 'carousel', locals: { date: date, number_columns: 2 } + + .visible-md-inline.visible-lg-inline + = render partial: 'carousel', locals: { date: date, number_columns: 3 } + +:javascript + // change of active tab and the button title when a date clicked + $(function() { + $('.date-tab').on('click', function(e) { + $('.li-dropdown-schedule').removeClass('active'); + $('.schedule-dropdown').find('button').text($(this).text()); + }); + }); + + // 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'); + }); + + // use the date tag in the url to select a tab and the title of the button + var hash = window.location.hash; + if(hash && !(hash === '#schedule')){ + hash && $('ul a[href="' + hash + '"]').tab('show'); + $('button.dropdown-toggle').text(hash.substr(1)); + } + }); diff --git a/config/routes.rb b/config/routes.rb index 3e83fd1b..a2bd18a6 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -115,6 +115,7 @@ Osem::Application.routes.draw do member do get :schedule + get :events end end From 39c4261859fd246d5fbe67d88b110e95503e779b Mon Sep 17 00:00:00 2001 From: Ana Date: Fri, 1 Jul 2016 11:41:16 +0200 Subject: [PATCH 09/11] All events takes you to the current day --- app/controllers/conference_controller.rb | 3 +++ app/models/conference.rb | 6 ++++++ app/views/conference/events.html.haml | 5 +++++ 3 files changed, 14 insertions(+) diff --git a/app/controllers/conference_controller.rb b/app/controllers/conference_controller.rb index 134fc745..7068061e 100644 --- a/app/controllers/conference_controller.rb +++ b/app/controllers/conference_controller.rb @@ -31,6 +31,9 @@ class ConferenceController < ApplicationController @scheduled_events = @conference.program.events.scheduled @unscheduled_events = @conference.program.events.unscheduled + + day = @conference.current_conference_day + @tag = day.strftime('%Y-%m-%d') if day end private diff --git a/app/models/conference.rb b/app/models/conference.rb index 149504d5..d3fd5590 100644 --- a/app/models/conference.rb +++ b/app/models/conference.rb @@ -609,6 +609,12 @@ class Conference < ActiveRecord::Base next_color(start_index[collection]) end + # Returns the current day if it is a day of the schedule or nil otherwise + def current_conference_day + day = Time.find_zone(timezone).today + day if (start_date..end_date).cover? day + end + private # Returns a different html colour for every i and consecutive colors are diff --git a/app/views/conference/events.html.haml b/app/views/conference/events.html.haml index 939e4254..d011390d 100644 --- a/app/views/conference/events.html.haml +++ b/app/views/conference/events.html.haml @@ -58,3 +58,8 @@ $('.program-selector').on('click', function(e) { $('.li-dropdown-program').removeClass('active'); }); + + // Go to current date and time + $(document).ready(function(){ + document.getElementById("#{ @tag }").scrollIntoView(); + }); From bf7f5ce09f4ed2fe4fa554822de99210407be74b Mon Sep 17 00:00:00 2001 From: Ana Date: Sat, 2 Jul 2016 17:23:56 +0200 Subject: [PATCH 10/11] The schedule takes you to the current day and time The schedule takes you to the current day and time in case that the current date belongs to the conference schedule. Closes https://github.com/openSUSE/osem/issues/1057 --- app/controllers/conference_controller.rb | 7 +++++ app/helpers/application_helper.rb | 10 +++++++ app/models/conference.rb | 9 +++++++ app/views/conference/_carousel.html.haml | 2 +- app/views/conference/schedule.html.haml | 34 ++++++++++++++++-------- 5 files changed, 50 insertions(+), 12 deletions(-) diff --git a/app/controllers/conference_controller.rb b/app/controllers/conference_controller.rb index 7068061e..1dc1ded8 100644 --- a/app/controllers/conference_controller.rb +++ b/app/controllers/conference_controller.rb @@ -24,6 +24,13 @@ class ConferenceController < ApplicationController @conf_start = 9 conf_end = 20 @conf_period = conf_end - @conf_start + + # the schedule takes you to today if it is a date of the schedule + @current_day = @conference.current_conference_day + @day = @current_day.present? ? @current_day : @dates.first + return unless @current_day + # the schedule takes you to the current time if it is beetween the start and the end time. + @hour_column = @conference.hours_from_start_time(@conf_start, conf_end) end def events diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 5004347c..ddc072af 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -335,4 +335,14 @@ module ApplicationHelper # speaker picture padding: 4px 2px; and we want the picture to be a circle speaker_height(rooms) - 4 end + + def carousel_item_class(number, carousel_number, num_cols, col) + item_class = 'item' + item_class += ' first' if number == 0 + item_class += ' last' if number == (carousel_number - 1) + if (col && ((col / num_cols) == number)) || (!col && number == 0) + item_class += ' active' + end + item_class + end end diff --git a/app/models/conference.rb b/app/models/conference.rb index d3fd5590..6d35946b 100644 --- a/app/models/conference.rb +++ b/app/models/conference.rb @@ -615,6 +615,15 @@ class Conference < ActiveRecord::Base day if (start_date..end_date).cover? day end + # Returns the number of hours since the conference start hour (9) to the + # current hour, in case that the current hour is beetween the start and the + # end hour (20). Otherwise, returns 0 + def hours_from_start_time(start_hour, end_hour) + current_time = Time.find_zone(timezone).now + current_hour = current_time.strftime('%H').to_i + (start_hour..(end_hour-1)).cover?(current_hour) ? current_hour - start_hour : 0 + end + private # Returns a different html colour for every i and consecutive colors are diff --git a/app/views/conference/_carousel.html.haml b/app/views/conference/_carousel.html.haml index 4a43f424..bc8b3157 100644 --- a/app/views/conference/_carousel.html.haml +++ b/app/views/conference/_carousel.html.haml @@ -9,7 +9,7 @@ .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' : '') }" } + %div{ class: "#{ carousel_item_class(number, carousel_number, number_columns, @hour_column)}" } %table.table.table-bordered.schedule-table#schedule %tr %th diff --git a/app/views/conference/schedule.html.haml b/app/views/conference/schedule.html.haml index 05476aae..ea9971c1 100644 --- a/app/views/conference/schedule.html.haml +++ b/app/views/conference/schedule.html.haml @@ -7,16 +7,16 @@ = @conference.title .dropdown.schedule-dropdown %button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" } - = @dates.first + = @day %span.caret %ul.dropdown-menu - @dates.each do |date| - %li.li-dropdown-schedule + %li.li-dropdown-schedule{ class: "#{ 'active' if @day == date }" } = link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab" .tab-content - @dates.each do |date| - %div{ class: "tab-pane #{ 'active' if @dates.first == date }", id: "#{ date }" } + %div{ class: "tab-pane #{ 'active' if @day == date }", id: "#{ date }" } .visible-xs-inline = render partial: 'carousel', locals: { date: date, number_columns: 1 } @@ -28,7 +28,7 @@ = render partial: 'carousel', locals: { date: date, number_columns: 3 } :javascript - // change of active tab and the button title when a date clicked + // change of active tab and the button title when a date is clicked $(function() { $('.date-tab').on('click', function(e) { $('.li-dropdown-schedule').removeClass('active'); @@ -43,14 +43,22 @@ $(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')) { + } + 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').each(function() { + if($(this).find('.first').hasClass('active')) { + $(this).children('.left.carousel-control').hide(); + } + if($(this).find('.last').hasClass('active')) { + $(this).children('.right.carousel-control').hide(); + } + }); // carousel swipe $(".carousel-inner").swiperight(function() { @@ -60,10 +68,14 @@ $(this).parent().carousel('next'); }); - // use the date tag in the url to select a tab and the title of the button - var hash = window.location.hash; - if(hash && !(hash === '#schedule')){ - hash && $('ul a[href="' + hash + '"]').tab('show'); - $('button.dropdown-toggle').text(hash.substr(1)); + var day = "#{@current_day}"; + // we only go to the date tag in the url if the conference is not taking place now + if(day === ""){ + // use the date tag in the url to select a tab and the title of the button + var hash = window.location.hash; + if(hash && !(hash === '#schedule')){ + hash && $('ul a[href="' + hash + '"]').tab('show'); + $('button.dropdown-toggle').text(hash.substr(1)); + } } }); From 1559b29d2d381b45f2c5052e54cf570fd70afef5 Mon Sep 17 00:00:00 2001 From: Ana Date: Fri, 15 Jul 2016 13:55:21 +0200 Subject: [PATCH 11/11] Rubocop class length increased Rubocop class length increased in 5 lines as app/models/conference.rb had too many lines. --- .rubocop.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.rubocop.yml b/.rubocop.yml index 98897ae2..7da4d8d5 100644 --- a/.rubocop.yml +++ b/.rubocop.yml @@ -95,7 +95,7 @@ Metrics/BlockNesting: Max: 4 Metrics/ClassLength: - Max: 570 + Max: 575 # avoid redundunt curly braces when it is obvious that hash is used Style/BracesAroundHashParameters: