Merge pull request #279 from gopesht/gallery

Implements Gallery

app/assets/stylesheets/splash.css.scss

@@ -144,3 +144,24 @@ a:after {
     font-weight: 400;
   }
 }
+#gallery{
+  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%;
+    }
+  }
+  #carousel-example-generic{
+    visibility: hidden;
+  }
+}

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 gallery_photos
+    @photos = Conference.find_by_short_title(params[:id]).photos
+    render "photos", formats: [:js]
+  end
 end

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: "600x300>" }
 
   validates_attachment_content_type :picture,
                                     content_type: [/jpg/, /jpeg/, /png/, /gif/],

app/views/conference/_gallery.html.haml

@@ -0,0 +1,35 @@
+<!-- Modal -->
+%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" }
+          <!-- Wrapper for slides -->
+          %div{ class: "carousel-inner" }
+
+          <!-- Controls -->
+          %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
+  $(document).ready(function(){
+    var count = 0;
+    $('#gallery-btn').click(function(){
+      if(count == 0){
+        $('#gallery').modal('show');
+        $('#gallery .modal-body').append('<i class="fa fa-spinner fa-spin fa-4x"></i>');
+        count +=1;
+      }
+      else{
+        $('#gallery').modal('show');
+        return false;
+      }
+    });
+  });
+
+
+
+

app/views/conference/_gallery_photo.html.haml

@@ -0,0 +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

app/views/conference/photos.js.haml

@@ -0,0 +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');
+

app/views/conference/show.html.haml

@@ -17,7 +17,9 @@
             .row-fluid
               .col-md-12.lead
                 %p= @conference.description
-
+          -unless @conference.photos.blank?
+            = 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' }
       .pad

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 "gallery_photos"
     end
   end