Merge pull request #770 from hennevogel/feature_venue_show

Beautify venue#show

app/assets/javascripts/application.js

@@ -29,6 +29,7 @@
 //= require markdown
 //= require momentjs
 //= require leaflet
+//= require holderjs
 //= require bootstrap-datetimepicker
 //= require osem-datepickers
 //= require osem-datatables

app/models/venue.rb

@@ -23,6 +23,10 @@ class Venue < ActiveRecord::Base
     name.name if name
   end
 
+  def location?
+    !(latitude.blank? || longitude.blank?)
+  end
+
   private
 
   def send_mail_notification

app/views/admin/venues/show.html.haml

@@ -7,7 +7,12 @@
 -if @venue
   .row
     .col-md-6
-      =image_tag(@conference.venue.photo, class: 'img-responsive img-rounded') unless @conference.venue.photo.blank?
+      - if @conference.venue.location?
+        = render 'conference/venue_map'
+      - elsif @conference.venue.photo.blank?
+        %img{ "data-src" => "holder.js/300x200?text=No Image Set", class: 'img-responsive img-rounded' }
+      - elsif !@conference.venue.photo.blank?
+        =image_tag(@conference.venue.photo, class: 'img-responsive img-rounded')
     .col-md-6
       %address
         %strong
@@ -20,10 +25,11 @@
         = @venue.country_name
   .row
     .col-md-12
-      = link_to(edit_admin_conference_venue_path(@conference.short_title), class: 'btn btn-primary', disabled: !(can? :update, @venue) ) do
-        Edit Venue
-      = link_to(admin_conference_venue_path(@conference.short_title), method: 'delete', class: 'btn btn-danger', disabled: !(can? :destroy, @venue)) do
-        Delete Venue
+      %p.text-right
+        = link_to(edit_admin_conference_venue_path(@conference.short_title), class: 'btn btn-primary', disabled: !(can? :update, @venue) ) do
+          Edit Venue
+        = link_to(admin_conference_venue_path(@conference.short_title), method: 'delete', class: 'btn btn-danger', disabled: !(can? :destroy, @venue)) do
+          Delete Venue
 -else
   .row
     .col-md-12.text-right

app/views/conference/_venue.html.haml

@@ -1,42 +1,8 @@
 = content_for :splash_nav do
   %li
     %a.smoothscroll{ href: '#venue' } Venue
--if !@conference.venue.latitude.blank? and !@conference.venue.longitude.blank?
-  #map{style: "height: 500px;" }
-  - popup = "<h3>#{@conference.venue.name}</h3><br>#{@conference.venue.street}<br>#{@conference.venue.city}<br>#{@conference.venue.country_name}"
-  - content_for(:script_body) do
-    :javascript
-      L.Icon.Default.imagePath = '/assets/leaflet/';
-      // create a map in the "map" div, set the view to a given place and zoom
-      var map = L.map('map', { scrollWheelZoom: false }).setView([#{@conference.venue.latitude}, #{@conference.venue.longitude}], 11);
-      // add an OpenStreetMap tile layer
-      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
-        maxZoom: 18
-      }).addTo(map);
-      // add a marker in the given location, attach some popup content to it and open the popup
-      L.marker([#{@conference.venue.latitude}, #{@conference.venue.longitude}]).addTo(map)
-        .bindPopup("#{popup}")
-        .openPopup();
-      // Turn scrollwheel on when user clicks
-      map.on('focus', function(e) {
-        map.scrollWheelZoom.enable();
-      });
-      // Turn scrollwheel off once the map isn't in the viewport anymore
-      $('#map').waypoint({
-        handler: function(direction) {
-          map.scrollWheelZoom.disable();
-          //alert('map');
-        },
-        offset: '90%'
-      });
-      $('#map').waypoint({
-        handler: function(direction) {
-          map.scrollWheelZoom.disable();
-          //alert('map');
-        },
-        offset: '10%'
-      });
+-if @conference.venue.location?
+  = render 'conference/venue_map'
 -else
   .container
     .row

app/views/conference/_venue_map.html.haml

@@ -0,0 +1,35 @@
+#map{style: "height: 500px;" }
+- popup = "<h3>#{@conference.venue.name}</h3><br>#{@conference.venue.street}<br>#{@conference.venue.city}<br>#{@conference.venue.country_name}"
+- content_for(:script_body) do
+  :javascript
+    L.Icon.Default.imagePath = '/assets/leaflet/';
+    // create a map in the "map" div, set the view to a given place and zoom
+    var map = L.map('map', { scrollWheelZoom: false }).setView([#{@conference.venue.latitude}, #{@conference.venue.longitude}], 11);
+    // add an OpenStreetMap tile layer
+    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+      maxZoom: 18
+    }).addTo(map);
+    // add a marker in the given location, attach some popup content to it and open the popup
+    L.marker([#{@conference.venue.latitude}, #{@conference.venue.longitude}]).addTo(map)
+      .bindPopup("#{popup}")
+      .openPopup();
+    // Turn scrollwheel on when user clicks
+    map.on('focus', function(e) {
+      map.scrollWheelZoom.enable();
+    });
+    // Turn scrollwheel off once the map isn't in the viewport anymore
+    $('#map').waypoint({
+      handler: function(direction) {
+        map.scrollWheelZoom.disable();
+        //alert('map');
+      },
+      offset: '90%'
+    });
+    $('#map').waypoint({
+      handler: function(direction) {
+        map.scrollWheelZoom.disable();
+        //alert('map');
+      },
+      offset: '10%'
+    });