Permalink
Browse files

Further build single event detail page

  • Loading branch information...
1 parent 7520773 commit f1c691db492b51aa4d1e1226fefdf3690acd3cf7 @EinLama EinLama committed Oct 27, 2012
View
@@ -23,7 +23,9 @@ gem 'acts-as-taggable-on', '~> 2.3.1'
# Asset template engines
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-script', '~> 2.2.0'
+gem 'leaflet-rails', github: 'axyjo/leaflet-rails'
gem 'uglifier', '~> 1.2.0'
+
gem 'haml', '~> 3.1.4'
gem 'redcarpet', '~> 2.1.0'
View
@@ -1,4 +1,10 @@
GIT
+ remote: git://github.com/axyjo/leaflet-rails.git
+ revision: b2fd1f95dbad7ef5625d0415d008c2ca46a18821
+ specs:
+ leaflet-rails (0.4.4)
+
+GIT
remote: https://github.com/gregbell/active_admin.git
revision: 3d6976ccf8a4dd7089f3033590905c84500c2a4f
specs:
@@ -313,6 +319,7 @@ DEPENDENCIES
html_truncator (~> 0.3.0)
ice_cube (~> 0.8.0)
jquery-rails (~> 2.0.0)
+ leaflet-rails!
md_emoji (~> 0.0.7)
mini_magick (~> 3.4)
mocha (~> 0.12.0)
@@ -6,14 +6,14 @@
//
//= require jquery
//= require jquery_ujs
+//= require leaflet
//= require jquery.balloon
//= require jquery.tokeninput
//= require jquery.endless-scroll
//= require jquery.scrollTo
//= require showdown
//= require zero-clipboard
//= require tipsy
-//= require leaflet
//= require jquery.pjax
//= require_tree .
//= require twitter/bootstrap
@@ -4,8 +4,6 @@
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require "formtastic"
- *= require "leaflet/leaflet"
- *= require "leaflet/leaflet.ie"
*= require "tipsy"
*= require "font-awesome/font-awesome"
*/
@@ -18,20 +18,19 @@
color: #fff
overflow: auto
+ .black-bar-top-part, .black-bar-center-part
+ overflow: auto
+
&.black-bar-wide
.black-bar-content
height: 75px
- &.black-bar-highlighted
- -webkit-box-shadow: inset 10px 10px 20px 0px rgba(0, 0, 0, 0.4)
- box-shadow: inset 10px 10px 20px 0px rgba(0, 0, 0, 0.4)
-
.black-bar-title
- padding-top: 13px
+ padding: 13px 0 0 15px
+ margin: 0
font-size: 22px
font-weight: bold
width: 430px
- padding-left: 15px
float: left
overflow: hidden
white-space: nowrap
@@ -57,3 +56,14 @@
.black-bar-time
font-size: 20px
padding-top: 24px
+
+.black-bar.black-bar-wide
+ .black-bar-content.black-bar-with-date
+ .black-bar-date
+ padding: 4px 0 0 15px
+ font-size: 14px
+ font-family: Vollkorn, serif
+ .black-bar-title
+ padding-top: 3px
+ .black-bar-time
+ padding-top: 8px
@@ -27,3 +27,31 @@
.event-location
margin-top: 10px
+.event.single-event
+ .event-info
+
+ .event-description
+ .event-content-field
+ padding: 15px 5px
+ .content-field-icon
+ margin-top: 5px
+
+ .event-homepage, .event-twitter-handle
+ .content-field-text
+ font-size: 18px
+ font-weight: bold
+ text-overflow: ellipsis
+ overflow: hidden
+
+ .event-content-field
+ overflow: auto
+ padding: 5px 5px
+
+ .content-field-icon
+ float: left
+ width: 80px
+ font-size: 30px
+ margin-left: 13px
+ .content-field-text
+ float: left
+ width: 520px
@@ -1,5 +1,7 @@
@import url(http://fonts.googleapis.com/css?family=Vollkorn)
+$text_color: #333
+
body
padding-top: 60px
@@ -84,3 +86,10 @@ header
img
width: 308px
margin-top: -80px
+
+a.hidden-link
+ color: $text_color
+ text-decoration: none
+ &:hover
+ text-decoration: underline
+ color: $text_color
@@ -1,29 +1,20 @@
- unless event.latitude.blank? or event.longitude.blank?
- - content_for :javascript do
- = stylesheet_link_tag "leaflet/leaflet.css"
- <!--[if lte IE 8]>
- = stylesheet_link_tag "leaflet/leaflet.ie.css"
- <![endif]-->
+ :javascript
+ function initialize() {
+ var map = new L.Map('map_canvas');
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/785896de12ad4cf892e32b9ec16b5cde/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = '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 &copy; <a href="http://cloudmade.com">CloudMade</a>',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
+ var london = new L.LatLng(#{event.latitude}, #{event.longitude});
+ map.setView(london, 13).addLayer(cloudmade);
- = javascript_include_tag "leaflet/leaflet.js"
- :javascript
- function initialize() {
- var map = new L.Map('map_canvas');
- var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/785896de12ad4cf892e32b9ec16b5cde/997/256/{z}/{x}/{y}.png',
- cloudmadeAttribution = '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 &copy; <a href="http://cloudmade.com">CloudMade</a>',
- cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
- var london = new L.LatLng(#{event.latitude}, #{event.longitude});
- map.setView(london, 13).addLayer(cloudmade);
-
- var markerLocation = new L.LatLng(#{event.latitude}, #{event.longitude});
-
- var marker = new L.Marker(markerLocation);
- map.addLayer(marker);
- }
-
- $(function() {
- $('.map').append('<div id="map_canvas"></div>');
- initialize();
- });
+ var markerLocation = new L.LatLng(#{event.latitude}, #{event.longitude});
+ var marker = new L.Marker(markerLocation);
+ map.addLayer(marker);
+ }
+ $(function() {
+ $('.map').append('<div id="map_canvas"></div>');
+ initialize();
+ });
@@ -1,30 +1,72 @@
- color = @single_event.category.try(:color)
-.row
+.row.event.single-event
.span4
.black-bar.black-bar-wide
= render partial: 'modules/categories/indicator', locals: { size: '75px', color: color }
- .black-bar-content{ data: { hlcolor: color } }
- .black-bar-title
- = @single_event.title
- .black-bar-time= I18n.localize(@single_event.occurrence, format: "%H:%M Uhr")
+ .black-bar-content.black-bar-with-date{ data: { hlcolor: color } }
+ .black-bar-top-part
+ .black-bar-date
+ = I18n.localize @single_event.occurrence, format: "%a, %d. %b %Y"
+ .black-bar-center-part
+ %h1.black-bar-title= @single_event.event.name
+ .black-bar-time= I18n.localize(@single_event.occurrence, format: "%H:%M Uhr")
+
+ .event-info
+ - if @single_event.name?
+ %h2= @single_event.name
+
+ .event-description
+ .event-content-field
+ .content-field-icon
+ %i.icon-info-sign
+ .content-field-text
+ = @single_event.description
+
+ - if @single_event.url.present?
+ .event-homepage
+ .event-content-field
+ .content-field-icon
+ %i.icon-home
+ .content-field-text
+ %a.hidden-link{ href: @single_event.url }= @single_event.url
+
+ - if @single_event.twitter.present?
+ .event-twitter-handle
+ .event-content-field
+ .content-field-icon
+ %i.icon-twitter
+ .content-field-text
+ %a.hidden-link{ href: "http://twitter.com/#{@single_event.twitter}" }
+ = "@#{@single_event.twitter}"
+
+ = render "events/map", event: @single_event
+ .map
+
+ %address.event-venue
+ anderScore GmbH<br>
+ Frankenwerft 54<br>
+ 50123 Köln
+
+ %p.pull-right
+ Social Kram
+
+
+
.span2
%p whoa this is my side box
+
.left_side
- title @single_event.event_title
-
- if @single_event.name?
%h2
= @single_event.name
-
%h2
= @single_event.full_day ? @single_event.occurrence.strftime("%d.%m.%Y") : @single_event.occurrence.strftime("%d.%m.%Y um %H:%M")
-
-#= render "tags/tags", tag_list: @single_event.event.tag_list + @single_event.tag_list
-
- unless @single_event.description?
%p
%em
@@ -40,8 +82,8 @@
%h3 Adresse
- = render "events/map", event: @single_event
- %div.map
+ -#= render "events/map", event: @single_event
+ -#%div.map
= render "events/address",address: @single_event
Oops, something went wrong.

0 comments on commit f1c691d

Please sign in to comment.