From ff9ca4a817d274e978cdd7be36723c7f5bffbb8d Mon Sep 17 00:00:00 2001 From: Eugene Dubinin Date: Tue, 17 Jan 2017 14:46:12 +0200 Subject: [PATCH 1/3] implements configurable schedule granularity and improves the schedule grid for denser schedule grids on smaller screens --- INSTALL.md | 1 + app.json | 4 ++++ app/assets/stylesheets/osem-schedule.css.scss | 10 ++++++++-- app/models/event_type.rb | 3 ++- app/views/admin/schedules/_day_tab.html.haml | 13 ++++++++---- app/views/admin/schedules/_event.html.haml | 8 ++++++-- app/views/schedules/_carousel.html.haml | 20 ++++++++++--------- app/views/schedules/_schedule.html.haml | 6 +++--- app/views/schedules/show.html.haml | 6 +++--- config/initializers/schedule_parameters.rb | 6 ++++++ dotenv.example | 3 +++ 11 files changed, 56 insertions(+), 24 deletions(-) create mode 100644 config/initializers/schedule_parameters.rb diff --git a/INSTALL.md b/INSTALL.md index cc363338..7bc85350 100644 --- a/INSTALL.md +++ b/INSTALL.md @@ -43,6 +43,7 @@ There are a couple of environment variables you can set to configure OSEM. | OSEM_FACEBOOK_SECRET | *string* | OMNIAUTH Developer Secret for Facebook | OSEM_GITHUB_KEY | *string* | OMNIAUTH Developer Key for GitHub | OSEM_GITHUB_SECRET | *string* | OMNIAUTH Developer Secret for GitHub +| OSEM_SCHEDULE_CELL_SIZE | *integer* | Schedule timeslot size to use (in minutes), should be greater than zero, should be divisor of 60 | OSEM_SMTP_ADDRESS | smtp.opensuse.org | The smtp server to use | OSEM_SMTP_PORT | *int* | The port on the smtp server | OSEM_SMTP_USERNAME | *string* | The user for the smtp server diff --git a/app.json b/app.json index f77f6c9c..6b28f6b9 100644 --- a/app.json +++ b/app.json @@ -54,6 +54,10 @@ "description": "The user for the smtp server", "required": false }, + "OSEM_SCHEDULE_CELL_SIZE": { + "description": "Schedule timeslot size in minutes", + "required": false + }, "RACK_ENV": { "required": false }, diff --git a/app/assets/stylesheets/osem-schedule.css.scss b/app/assets/stylesheets/osem-schedule.css.scss index d4b3409c..f2a97b83 100644 --- a/app/assets/stylesheets/osem-schedule.css.scss +++ b/app/assets/stylesheets/osem-schedule.css.scss @@ -16,7 +16,7 @@ } .schedule-room-slot{ - padding: 2px 5px; + padding: 2px 3px; border: 1px solid #848484; height: 58px; line-height: 20px; @@ -31,6 +31,12 @@ cursor:move; } +.schedule-room-slot .schedule-event.compact { + margin-top: -23px; + margin-left: 20%; + width: 80%; +} + .schedule-event-text{ display: -webkit-box; text-overflow: ellipsis; @@ -167,7 +173,7 @@ td.room{ th.date{ font-size: 12px; - padding: 8px 0px 8px 1% !important; + padding: 4px 0px 4px 2px !important; } .speaker-pic{ diff --git a/app/models/event_type.rb b/app/models/event_type.rb index b00b36cd..50d8d551 100644 --- a/app/models/event_type.rb +++ b/app/models/event_type.rb @@ -16,7 +16,8 @@ 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 + + LENGTH_STEP = defined?(SCHEDULE_CELL_SIZE) ? SCHEDULE_CELL_SIZE : 15 private diff --git a/app/views/admin/schedules/_day_tab.html.haml b/app/views/admin/schedules/_day_tab.html.haml index b7cc27e8..57be4999 100644 --- a/app/views/admin/schedules/_day_tab.html.haml +++ b/app/views/admin/schedules/_day_tab.html.haml @@ -1,3 +1,7 @@ +- compact_grid = EventType::LENGTH_STEP < 15 +- cells_per_hour = 60 / EventType::LENGTH_STEP +/ use smaller cell heights for more compact grids +- cell_height = compact_grid ? 32 : 58 - date_event_schedules = @event_schedules.select{ |e| e.start_time.to_date.eql? date } .row - @rooms.each do |room| @@ -5,14 +9,15 @@ .room-name - room_date_event_schedules = date_event_schedules.select{ |e| e.room == room } = room.name - - (9*4..18*4).each do |slot| - - hour = slot / 4 - - minutes = (15 * (slot % 4) == 0) ? '00' : 15 * (slot % 4) + - (9*cells_per_hour..18*cells_per_hour).each do |slot| + - hour = slot / cells_per_hour + - minutes = (EventType::LENGTH_STEP * (slot % cells_per_hour)).to_s.rjust(2, '0') - time = "#{hour}:#{minutes}" .schedule-room-slot{ id: "schedule-room-#{room.guid}-#{hour}-#{minutes}", | room_id: room.id, | hour: time, | - date: date} + date: date, | + style: "height: #{cell_height}px"} .div = time - event_schedules = room_date_event_schedules.select{ |e| (e.start_time.hour.to_s + e.start_time.strftime(':%M')).eql? time } diff --git a/app/views/admin/schedules/_event.html.haml b/app/views/admin/schedules/_event.html.haml index d65ab619..3c9c0c75 100644 --- a/app/views/admin/schedules/_event.html.haml +++ b/app/views/admin/schedules/_event.html.haml @@ -1,6 +1,9 @@ - cells_length = event.event_type.length / EventType::LENGTH_STEP / this height fits the room cells -- height = (cells_length * 58) - 23 +- compact_grid = EventType::LENGTH_STEP < 15 +- single_cell_height = compact_grid ? 32 : 58 +- height = (cells_length * single_cell_height) +- height -= 23 unless compact_grid / subtracting the padding before calculate the number of lines - lines = (height - 7) / 23 - color = event.track.try(:color).present? ? event.track.try(:color) : 'FFFFFF' @@ -8,7 +11,8 @@ id: "event-#{event.id}", | event_id: event.id, | length: cells_length, | - event_schedule_id: event_schedule_id } + event_schedule_id: event_schedule_id, | + class: ('compact' if compact_grid) } .schedule-event-text{ style: "-webkit-line-clamp: #{lines}; height: #{lines * 23}px;"} %span.schedule-event-delete-button{ onclick: "Schedule.remove(\'event-#{event.id}\');" } X = event.title diff --git a/app/views/schedules/_carousel.html.haml b/app/views/schedules/_carousel.html.haml index 5a27f0e8..2a8e4c74 100644 --- a/app/views/schedules/_carousel.html.haml +++ b/app/views/schedules/_carousel.html.haml @@ -1,7 +1,7 @@ -- intervals = number_columns * 60 / EventType::LENGTH_STEP + 1 +- intervals = hrs_per_slide * 60 / EventType::LENGTH_STEP + 1 - width = 85 / intervals -- carousel_number = (@conf_period / number_columns.to_f).ceil -.carousel.slide{ id: "carousel-#{ date }-#{ number_columns }", | +- carousel_number = (@conf_period / hrs_per_slide.to_f).ceil +.carousel.slide{ id: "carousel-#{ date }-#{ hrs_per_slide }", | "data-ride" => "carousel", | "data-wrap" => "false", | "data-interval" => "false" } @@ -9,16 +9,18 @@ .carousel-inner - start_time = DateTime.parse("#{date} #{@conf_start}:00") - (0..carousel_number-1).each do |number| - %div{ class: "#{ carousel_item_class(number, carousel_number, number_columns, @hour_column)}" } + %div{ class: "#{ carousel_item_class(number, carousel_number, hrs_per_slide, @hour_column)}" } %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") + %span + = (td_start_time).strftime("%H:") + %span + = (td_start_time).strftime("%M") - td_start_time += @step_minutes - - start_room_time = start_time - @rooms.each do |room| - start_room_time = start_time @@ -27,7 +29,7 @@ %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 - - event_schedules = room.event_schedules.select{ |e| (e.schedule_id == @conference.program.selected_schedule.id) && (e.end_time > start_time) && (e.start_time <= (start_time + number_columns.hour)) } + - event_schedules = room.event_schedules.select{ |e| (e.schedule_id == @conference.program.selected_schedule.id) && (e.end_time > start_time) && (e.start_time <= (start_time + hrs_per_slide.hour)) } - (1..intervals).each do |i| - if span > 1 - span -= 1 @@ -49,11 +51,11 @@ - start_time = start_room_time - @step_minutes / Controls - %a.left.carousel-control{ href: "#carousel-#{ date }-#{ number_columns }", | + %a.left.carousel-control{ href: "#carousel-#{ date }-#{ hrs_per_slide }", | role: "button", | "data-slide" => "prev" } %span.glyphicon.glyphicon-chevron-left - %a.right.carousel-control{ href: "#carousel-#{ date }-#{ number_columns }", | + %a.right.carousel-control{ href: "#carousel-#{ date }-#{ hrs_per_slide }", | role: "button", | "data-slide" => "next" } %span.glyphicon.glyphicon-chevron-right diff --git a/app/views/schedules/_schedule.html.haml b/app/views/schedules/_schedule.html.haml index d0d1e3de..68dc9407 100644 --- a/app/views/schedules/_schedule.html.haml +++ b/app/views/schedules/_schedule.html.haml @@ -16,13 +16,13 @@ %div{ class: "tab-pane #{ 'active' if @dates.first == date }", id: "#{ date }" } .visible-xs-inline - = render partial: 'carousel', locals: { date: date, number_columns: 1 } + = render partial: 'carousel', locals: { date: date, hrs_per_slide: 1 } .visible-sm-inline - = render partial: 'carousel', locals: { date: date, number_columns: 2 } + = render partial: 'carousel', locals: { date: date, hrs_per_slide: 2 } .visible-md-inline.visible-lg-inline - = render partial: 'carousel', locals: { date: date, number_columns: 3 } + = render partial: 'carousel', locals: { date: date, hrs_per_slide: 3 } :javascript // change of active tab and the button title when a date clicked diff --git a/app/views/schedules/show.html.haml b/app/views/schedules/show.html.haml index ea9971c1..bd0f9976 100644 --- a/app/views/schedules/show.html.haml +++ b/app/views/schedules/show.html.haml @@ -19,13 +19,13 @@ %div{ class: "tab-pane #{ 'active' if @day == date }", id: "#{ date }" } .visible-xs-inline - = render partial: 'carousel', locals: { date: date, number_columns: 1 } + = render partial: 'carousel', locals: { date: date, hrs_per_slide: 1 } .visible-sm-inline - = render partial: 'carousel', locals: { date: date, number_columns: 2 } + = render partial: 'carousel', locals: { date: date, hrs_per_slide: 2 } .visible-md-inline.visible-lg-inline - = render partial: 'carousel', locals: { date: date, number_columns: 3 } + = render partial: 'carousel', locals: { date: date, hrs_per_slide: 3 } :javascript // change of active tab and the button title when a date is clicked diff --git a/config/initializers/schedule_parameters.rb b/config/initializers/schedule_parameters.rb new file mode 100644 index 00000000..7d1ca08d --- /dev/null +++ b/config/initializers/schedule_parameters.rb @@ -0,0 +1,6 @@ +#sanitize the OSEM_SCHEUDLE_CELL_SIZE to be used for EventType::LENGTH_STEP +sched_cell_size = ENV['OSEM_SCHEDULE_CELL_SIZE'].to_i + +if (sched_cell_size > 0 and 60 % sched_cell_size == 0) + SCHEDULE_CELL_SIZE = sched_cell_size +end diff --git a/dotenv.example b/dotenv.example index ec2715ea..b9c2a668 100644 --- a/dotenv.example +++ b/dotenv.example @@ -57,3 +57,6 @@ OSEM_SMTP_DOMAIN="" # Enable the usage of the devise ichain plugin OSEM_ICHAIN_ENABLED=false + +# Schedule grid parameters, cell size in minutes +OSEM_SCHEDULE_CELL_SIZE=15 From 33d975514f4bcf3bf3b908912a2b1d0082013c96 Mon Sep 17 00:00:00 2001 From: BelieveC Date: Tue, 7 Feb 2017 01:40:28 +0530 Subject: [PATCH 2/3] Fix Update page page: Requirement field fixed to collapse for empty description --- Vagrantfile | 5 ++++- app/views/proposals/_proposal_form.html.haml | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/Vagrantfile b/Vagrantfile index 827cb8ed..b10220dd 100644 --- a/Vagrantfile +++ b/Vagrantfile @@ -22,7 +22,7 @@ Vagrant.configure(2) do |config| # Create a forwarded port mapping which allows access to a specific port # within the machine from a port on the host machine. In the example below, # accessing "localhost:8080" will access port 80 on the guest machine. - config.vm.network "forwarded_port", guest: 3000, host: 3000 + config.vm.network "forwarded_port", guest: 3000, host: 1234 # Create a private network, which allows host-only access to the machine # using a specific IP. @@ -69,4 +69,7 @@ Vagrant.configure(2) do |config| # sudo apt-get update # sudo apt-get install -y apache2 # SHELL + config.proxy.http = "http://iit2015120:Cway9421584659@172.31.1.4:8080" + config.proxy.https = "https://iit2015120:Cway9421584659@172.31.1.4:8080" + config.proxy.no_proxy = "localhost,127.0.0.1" end diff --git a/app/views/proposals/_proposal_form.html.haml b/app/views/proposals/_proposal_form.html.haml index ed8d3c02..f7f11e9c 100644 --- a/app/views/proposals/_proposal_form.html.haml +++ b/app/views/proposals/_proposal_form.html.haml @@ -55,7 +55,11 @@ %p.text-right = link_to '#description', 'data-toggle' => 'collapse' do Do you require something special? - .collapse#description + -if @event.description.blank? + .collapse#description + = f.input :description, input_html: { rows: 5 }, label: 'Requirements', placeholder: 'Eg. Whiteboard, printer, or something like that.' + -else + .collapse.in#description = f.input :description, input_html: { rows: 5 }, label: 'Requirements', placeholder: 'Eg. Whiteboard, printer, or something like that.' From 8da04ab4b15d9b8b88c6284616d0d44d4f7cf9f1 Mon Sep 17 00:00:00 2001 From: BelieveC Date: Tue, 7 Feb 2017 01:43:30 +0530 Subject: [PATCH 3/3] Fix Vagrant File --- Vagrantfile | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/Vagrantfile b/Vagrantfile index b10220dd..827cb8ed 100644 --- a/Vagrantfile +++ b/Vagrantfile @@ -22,7 +22,7 @@ Vagrant.configure(2) do |config| # Create a forwarded port mapping which allows access to a specific port # within the machine from a port on the host machine. In the example below, # accessing "localhost:8080" will access port 80 on the guest machine. - config.vm.network "forwarded_port", guest: 3000, host: 1234 + config.vm.network "forwarded_port", guest: 3000, host: 3000 # Create a private network, which allows host-only access to the machine # using a specific IP. @@ -69,7 +69,4 @@ Vagrant.configure(2) do |config| # sudo apt-get update # sudo apt-get install -y apache2 # SHELL - config.proxy.http = "http://iit2015120:Cway9421584659@172.31.1.4:8080" - config.proxy.https = "https://iit2015120:Cway9421584659@172.31.1.4:8080" - config.proxy.no_proxy = "localhost,127.0.0.1" end