From 220e8161559697fcef2e2fabe72119200f3cd203 Mon Sep 17 00:00:00 2001 From: Gopesh Tulsyan Date: Mon, 30 Jun 2014 19:24:26 +0530 Subject: [PATCH 1/5] Gallery initiated --- app/assets/stylesheets/splash.css.scss | 11 ++++++++++ app/controllers/conference_controller.rb | 5 +++++ app/views/conference/_gallery.html.haml | 22 +++++++++++++++++++ app/views/conference/_gallery_photo.html.haml | 3 +++ app/views/conference/photos.js.haml | 3 +++ app/views/conference/show.html.haml | 3 ++- config/routes.rb | 1 + 7 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 app/views/conference/_gallery.html.haml create mode 100644 app/views/conference/_gallery_photo.html.haml create mode 100644 app/views/conference/photos.js.haml diff --git a/app/assets/stylesheets/splash.css.scss b/app/assets/stylesheets/splash.css.scss index 5388e8a8..d7074a3a 100644 --- a/app/assets/stylesheets/splash.css.scss +++ b/app/assets/stylesheets/splash.css.scss @@ -144,3 +144,14 @@ a:after { font-weight: 400; } } +#gallery{ + .modal-body{ + min-height: 500px; + i{ + margin-top: 35%; + } + } + #carousel-example-generic{ + visibility: hidden; + } +} diff --git a/app/controllers/conference_controller.rb b/app/controllers/conference_controller.rb index 2bfeee3c..0ad2f58c 100644 --- a/app/controllers/conference_controller.rb +++ b/app/controllers/conference_controller.rb @@ -3,4 +3,9 @@ class ConferenceController < ApplicationController @conference = Conference.find_by_short_title(params[:id]) not_found unless @conference.make_conference_public? end + + def fetch_gallery_photos + @photos = Conference.find(params[:id].to_i).photos + render 'photos', formats: [:js] + end end diff --git a/app/views/conference/_gallery.html.haml b/app/views/conference/_gallery.html.haml new file mode 100644 index 00000000..a604b3d2 --- /dev/null +++ b/app/views/conference/_gallery.html.haml @@ -0,0 +1,22 @@ + +%div{ class: "modal fade", id: "gallery", tabindex: "-1", role: "dialog", "aria-labelledby" => "myModalLabel", "aria-hidden"=> "true" } + %div{ class: "modal-dialog" } + %div{ class: "modal-content" } + %div{ class: "modal-body" } + %div{ id: "carousel-example-generic", class: "carousel slide", "data-ride" => "carousel" } + + %div{ class: "carousel-inner" } + + + %a{ class: "left carousel-control", href: "#carousel-example-generic", role: "button", "data-slide" => "prev" } + %span{ class: "glyphicon glyphicon-chevron-left" } + %a{ class: "right carousel-control", href: "#carousel-example-generic", role: "button", "data-slide" => "next" } + %span{ class: "glyphicon glyphicon-chevron-right" } + + +:javascript + $('#gallery-btn').click(function(){ + $('#gallery .modal-body').append(''); + }); + + diff --git a/app/views/conference/_gallery_photo.html.haml b/app/views/conference/_gallery_photo.html.haml new file mode 100644 index 00000000..37df3584 --- /dev/null +++ b/app/views/conference/_gallery_photo.html.haml @@ -0,0 +1,3 @@ +- photos.each_with_index do |photo,index| + %div.item{ class: (index==0? 'active' : '') } + = image_tag(photo.picture) diff --git a/app/views/conference/photos.js.haml b/app/views/conference/photos.js.haml new file mode 100644 index 00000000..1f113760 --- /dev/null +++ b/app/views/conference/photos.js.haml @@ -0,0 +1,3 @@ +$('#gallery .carousel-inner').append("#{escape_javascript(render('gallery_photo', photos: @photos)) }"); +$('#gallery .modal-body').children('.fa').remove(); +$('#gallery #carousel-example-generic').css('visibility','visible'); diff --git a/app/views/conference/show.html.haml b/app/views/conference/show.html.haml index ce120949..6497bee1 100644 --- a/app/views/conference/show.html.haml +++ b/app/views/conference/show.html.haml @@ -17,7 +17,8 @@ .row-fluid .col-md-12.lead %p= @conference.description - + = link_to 'Gallery', fetch_gallery_photos_conference_path(@conference.id), class: 'btn btn-primary btn-lg', id: 'gallery-btn', data: {toggle: 'modal', target: '#gallery' }, remote: true + = render 'gallery' - if @conference.include_program_in_splash? %section{ id: 'program' } .pad diff --git a/config/routes.rb b/config/routes.rb index a907ff77..11908eae 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -92,6 +92,7 @@ Osem::Application.routes.draw do get "/register" => "conference_registration#register" patch "/register" => "conference_registration#update" delete "/register" => "conference_registration#unregister" + get 'fetch_gallery_photos' end end From 1244f937e6a62448e360c248774a03dcd0529619 Mon Sep 17 00:00:00 2001 From: Gopesh Tulsyan Date: Mon, 30 Jun 2014 20:32:34 +0530 Subject: [PATCH 2/5] Multiple ajax calls fixed --- app/assets/stylesheets/splash.css.scss | 2 +- app/controllers/conference_controller.rb | 2 +- app/models/photo.rb | 2 +- app/views/conference/_gallery.html.haml | 12 +++++++++++- app/views/conference/_gallery_photo.html.haml | 2 +- app/views/conference/photos.js.haml | 1 + app/views/conference/show.html.haml | 2 +- config/routes.rb | 2 +- 8 files changed, 18 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/splash.css.scss b/app/assets/stylesheets/splash.css.scss index d7074a3a..765b0ede 100644 --- a/app/assets/stylesheets/splash.css.scss +++ b/app/assets/stylesheets/splash.css.scss @@ -145,8 +145,8 @@ a:after { } } #gallery{ + min-height: 500px; .modal-body{ - min-height: 500px; i{ margin-top: 35%; } diff --git a/app/controllers/conference_controller.rb b/app/controllers/conference_controller.rb index 0ad2f58c..d9c8935d 100644 --- a/app/controllers/conference_controller.rb +++ b/app/controllers/conference_controller.rb @@ -6,6 +6,6 @@ class ConferenceController < ApplicationController def fetch_gallery_photos @photos = Conference.find(params[:id].to_i).photos - render 'photos', formats: [:js] + render "photos", formats: [:js] end end diff --git a/app/models/photo.rb b/app/models/photo.rb index 22a8d9c2..af9f2eac 100644 --- a/app/models/photo.rb +++ b/app/models/photo.rb @@ -3,7 +3,7 @@ class Photo < ActiveRecord::Base belongs_to :conference validates_presence_of :picture has_attached_file :picture, - styles: { thumb: '100x100>', large: '300x300>' } + styles: { thumb: "100x100>", large: "300x300>", banner: "500x300>" } validates_attachment_content_type :picture, content_type: [/jpg/, /jpeg/, /png/, /gif/], diff --git a/app/views/conference/_gallery.html.haml b/app/views/conference/_gallery.html.haml index a604b3d2..4f04b20b 100644 --- a/app/views/conference/_gallery.html.haml +++ b/app/views/conference/_gallery.html.haml @@ -15,8 +15,18 @@ :javascript + var count = 0; $('#gallery-btn').click(function(){ - $('#gallery .modal-body').append(''); + if(count == 0){ + $('#gallery').modal('show'); + $('#gallery .modal-body').append(''); + count +=1; + } + else{ + $('#gallery').modal('show'); + return false; + } }); + diff --git a/app/views/conference/_gallery_photo.html.haml b/app/views/conference/_gallery_photo.html.haml index 37df3584..6ecbe6bb 100644 --- a/app/views/conference/_gallery_photo.html.haml +++ b/app/views/conference/_gallery_photo.html.haml @@ -1,3 +1,3 @@ - photos.each_with_index do |photo,index| %div.item{ class: (index==0? 'active' : '') } - = image_tag(photo.picture) + = image_tag(photo.picture(:banner)) diff --git a/app/views/conference/photos.js.haml b/app/views/conference/photos.js.haml index 1f113760..5e24851d 100644 --- a/app/views/conference/photos.js.haml +++ b/app/views/conference/photos.js.haml @@ -1,3 +1,4 @@ $('#gallery .carousel-inner').append("#{escape_javascript(render('gallery_photo', photos: @photos)) }"); $('#gallery .modal-body').children('.fa').remove(); $('#gallery #carousel-example-generic').css('visibility','visible'); + diff --git a/app/views/conference/show.html.haml b/app/views/conference/show.html.haml index 6497bee1..e4dbf6c9 100644 --- a/app/views/conference/show.html.haml +++ b/app/views/conference/show.html.haml @@ -17,7 +17,7 @@ .row-fluid .col-md-12.lead %p= @conference.description - = link_to 'Gallery', fetch_gallery_photos_conference_path(@conference.id), class: 'btn btn-primary btn-lg', id: 'gallery-btn', data: {toggle: 'modal', target: '#gallery' }, remote: true + = link_to 'Gallery', fetch_gallery_photos_conference_path(@conference.id), class: 'btn btn-primary btn-lg', id: 'gallery-btn', remote: true = render 'gallery' - if @conference.include_program_in_splash? %section{ id: 'program' } diff --git a/config/routes.rb b/config/routes.rb index 11908eae..01212ac4 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -92,7 +92,7 @@ Osem::Application.routes.draw do get "/register" => "conference_registration#register" patch "/register" => "conference_registration#update" delete "/register" => "conference_registration#unregister" - get 'fetch_gallery_photos' + get "fetch_gallery_photos" end end From 81c538d82ddf64387b189caf9800416916dd4692 Mon Sep 17 00:00:00 2001 From: Gopesh Tulsyan Date: Tue, 1 Jul 2014 22:10:29 +0530 Subject: [PATCH 3/5] Putting the js inside ready function --- app/views/conference/_gallery.html.haml | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/app/views/conference/_gallery.html.haml b/app/views/conference/_gallery.html.haml index 4f04b20b..34959e63 100644 --- a/app/views/conference/_gallery.html.haml +++ b/app/views/conference/_gallery.html.haml @@ -15,18 +15,21 @@ :javascript - var count = 0; - $('#gallery-btn').click(function(){ - if(count == 0){ - $('#gallery').modal('show'); - $('#gallery .modal-body').append(''); - count +=1; - } - else{ - $('#gallery').modal('show'); - return false; - } + $(document).ready(function(){ + var count = 0; + $('#gallery-btn').click(function(){ + if(count == 0){ + $('#gallery').modal('show'); + $('#gallery .modal-body').append(''); + count +=1; + } + else{ + $('#gallery').modal('show'); + return false; + } + }); }); + From bea55454b21d0ecffe8cab676a4e1708d2e953a4 Mon Sep 17 00:00:00 2001 From: Gopesh Tulsyan Date: Tue, 1 Jul 2014 23:54:39 +0530 Subject: [PATCH 4/5] Conditional rendering for gallery button in the splash --- app/views/conference/show.html.haml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/views/conference/show.html.haml b/app/views/conference/show.html.haml index e4dbf6c9..1a0b1d63 100644 --- a/app/views/conference/show.html.haml +++ b/app/views/conference/show.html.haml @@ -17,8 +17,9 @@ .row-fluid .col-md-12.lead %p= @conference.description - = link_to 'Gallery', fetch_gallery_photos_conference_path(@conference.id), class: 'btn btn-primary btn-lg', id: 'gallery-btn', remote: true - = render 'gallery' + -unless @conference.photos.blank? + = link_to 'Gallery', fetch_gallery_photos_conference_path(@conference.id), class: 'btn btn-primary btn-lg', id: 'gallery-btn', remote: true + = render 'gallery' - if @conference.include_program_in_splash? %section{ id: 'program' } .pad From 3bf54f991a8e524139b8a05e34d8b26b2b35a371 Mon Sep 17 00:00:00 2001 From: Gopesh Tulsyan Date: Wed, 2 Jul 2014 00:25:09 +0530 Subject: [PATCH 5/5] Increased size of modal, added description as caption to photos --- app/assets/stylesheets/splash.css.scss | 12 +++++++++++- app/controllers/conference_controller.rb | 4 ++-- app/models/photo.rb | 2 +- app/views/conference/_gallery.html.haml | 4 ++-- app/views/conference/_gallery_photo.html.haml | 4 ++++ app/views/conference/show.html.haml | 2 +- config/routes.rb | 2 +- 7 files changed, 22 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/splash.css.scss b/app/assets/stylesheets/splash.css.scss index 765b0ede..46bd2f8b 100644 --- a/app/assets/stylesheets/splash.css.scss +++ b/app/assets/stylesheets/splash.css.scss @@ -145,7 +145,17 @@ a:after { } } #gallery{ - min-height: 500px; + min-height: 600px; + .item{ + img { + height: 600px; + background-repeat: no-repeat; + background-position: center center; + width: 100%; + background-size: cover; + -webkit-background-size:cover; + } + } .modal-body{ i{ margin-top: 35%; diff --git a/app/controllers/conference_controller.rb b/app/controllers/conference_controller.rb index d9c8935d..b3f6dae2 100644 --- a/app/controllers/conference_controller.rb +++ b/app/controllers/conference_controller.rb @@ -4,8 +4,8 @@ class ConferenceController < ApplicationController not_found unless @conference.make_conference_public? end - def fetch_gallery_photos - @photos = Conference.find(params[:id].to_i).photos + def gallery_photos + @photos = Conference.find_by_short_title(params[:id]).photos render "photos", formats: [:js] end end diff --git a/app/models/photo.rb b/app/models/photo.rb index af9f2eac..c7871db5 100644 --- a/app/models/photo.rb +++ b/app/models/photo.rb @@ -3,7 +3,7 @@ class Photo < ActiveRecord::Base belongs_to :conference validates_presence_of :picture has_attached_file :picture, - styles: { thumb: "100x100>", large: "300x300>", banner: "500x300>" } + styles: { thumb: "100x100>", large: "300x300>", banner: "600x300>" } validates_attachment_content_type :picture, content_type: [/jpg/, /jpeg/, /png/, /gif/], diff --git a/app/views/conference/_gallery.html.haml b/app/views/conference/_gallery.html.haml index 34959e63..0398cf45 100644 --- a/app/views/conference/_gallery.html.haml +++ b/app/views/conference/_gallery.html.haml @@ -1,6 +1,6 @@ -%div{ class: "modal fade", id: "gallery", tabindex: "-1", role: "dialog", "aria-labelledby" => "myModalLabel", "aria-hidden"=> "true" } - %div{ class: "modal-dialog" } +%div{ class: "modal fade", id: "gallery", tabindex: "-1", role: "dialog", "aria-labelledby" => "myLargeModalLabel", "aria-hidden"=> "true" } + %div{ class: "modal-dialog modal-lg" } %div{ class: "modal-content" } %div{ class: "modal-body" } %div{ id: "carousel-example-generic", class: "carousel slide", "data-ride" => "carousel" } diff --git a/app/views/conference/_gallery_photo.html.haml b/app/views/conference/_gallery_photo.html.haml index 6ecbe6bb..647cfb2d 100644 --- a/app/views/conference/_gallery_photo.html.haml +++ b/app/views/conference/_gallery_photo.html.haml @@ -1,3 +1,7 @@ - photos.each_with_index do |photo,index| %div.item{ class: (index==0? 'active' : '') } = image_tag(photo.picture(:banner)) + - unless photo.description.blank? + %div.carousel-caption + %p.lead + = photo.description diff --git a/app/views/conference/show.html.haml b/app/views/conference/show.html.haml index 1a0b1d63..be839e6b 100644 --- a/app/views/conference/show.html.haml +++ b/app/views/conference/show.html.haml @@ -18,7 +18,7 @@ .col-md-12.lead %p= @conference.description -unless @conference.photos.blank? - = link_to 'Gallery', fetch_gallery_photos_conference_path(@conference.id), class: 'btn btn-primary btn-lg', id: 'gallery-btn', remote: true + = link_to 'Gallery', gallery_photos_conference_path(@conference.short_title), class: 'btn btn-primary btn-lg', id: 'gallery-btn', remote: true = render 'gallery' - if @conference.include_program_in_splash? %section{ id: 'program' } diff --git a/config/routes.rb b/config/routes.rb index 01212ac4..41cd31e8 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -92,7 +92,7 @@ Osem::Application.routes.draw do get "/register" => "conference_registration#register" patch "/register" => "conference_registration#update" delete "/register" => "conference_registration#unregister" - get "fetch_gallery_photos" + get "gallery_photos" end end