Improved event display layout

Signed-off-by: André Bernardes <andrebsguedes@gmail.com> Signed-off-by: Arthur Del Esposte <arthurmde@gmail.com> Signed-off-by: Fabio Teixeira <fabio1079@gmail.com> Signed-off-by: Gabriela Navarro <navarro1703@gmail.com> Signed-off-by: Tallys Martins <tallysmartins@gmail.com>

Improved event display layout
Signed-off-by: André Bernardes <andrebsguedes@gmail.com> Signed-off-by: Arthur Del Esposte <arthurmde@gmail.com> Signed-off-by: Fabio Teixeira <fabio1079@gmail.com> Signed-off-by: Gabriela Navarro <navarro1703@gmail.com> Signed-off-by: Tallys Martins <tallysmartins@gmail.com>
André Guedes · Gabriela Navarro
1 parent ad9aa7c7
Showing 9 changed files with 159 additions and 47 deletions Show diff stats
app/models/event.rb
app/views/content_viewer/event_page.html.erb
app/views/content_viewer/view_page.html.erb
features/events.feature
public/designs/themes/base/style.css
public/images/calendar_date_select/calendar-icon.png
public/images/globe-icon.png
public/images/icone_pin.png
test/unit/event_test.rb
@@ -98,47 +98,19 @@ class Event &lt; Article
     start_date..(end_date||start_date)
   end
  
-  # FIXME this shouldn't be needed
-  include ActionView::Helpers::TagHelper
-  include ActionView::Helpers::UrlHelper
-  include DatesHelper
+  def first_paragraph
+    paragraphs = Nokogiri::HTML.fragment(self.body).css('p')
+    paragraphs.empty? ? '' : paragraphs.first.to_html
+  end
  
   def to_html(options = {})
+    event = self
+    format = options[:format]
  
-    result = ''
-    html = ::Builder::XmlMarkup.new(:target => result)
-
-    html.div(:class => 'event-info' ) {
-      html.ul(:class => 'event-data' ) {
-        html.li(:class => 'event-dates' ) {
-          html.span _('When:')
-          html.text! show_period(start_date, end_date)
-        } if start_date.present? || end_date.present?
-        html.li {
-          html.span _('URL:')
-          html.a(self.link || "", 'href' => self.link || "")
-        } if self.link.present?
-        html.li {
-          html.span _('Address:')
-          html.text! self.address || ""
-        } if self.address.present?
-      }
-
-      # TODO: some good soul, please clean this ugly hack:
-      if self.body
-        html.div('_____XXXX_DESCRIPTION_GOES_HERE_XXXX_____', :class => 'event-description')
-      end
-    }
-
-    if self.body
-      if options[:format] == 'short'
-        result.sub!('_____XXXX_DESCRIPTION_GOES_HERE_XXXX_____', display_short_format(self))
-      else
-        result.sub!('_____XXXX_DESCRIPTION_GOES_HERE_XXXX_____', self.body)
-      end
+    proc do
+      render :file => 'content_viewer/event_page', :locals => { :event => event,
+        :format => format }
     end
-
-    result
   end
  
   def duration
@@ -0,0 +1,41 @@
+<div class="event-card">
+  <div class="event-image">
+    <% if event.image && event.image.thumbnails_processed %>
+      <%= image_tag(event.image.thumbnails.select{|thumb| thumb.thumbnail == "big"}.first.public_filename) %>
+    <% else %>
+      <%= image_tag("/images/icons-app/image-loading-thumb.png") %>
+    <% end %>
+  </div>
+  <div class="about-event">
+    <% if event.start_date.present? || event.end_date.present? %>
+      <span class="event-date">
+        <%= show_period(event.start_date, event.end_date) %>
+      </span>
+    <% end %>
+    <% if event.link.present? %>
+      <span class="event-link">
+        <%= link_to event.link, event.link %>
+      </span>
+    <% end %>
+    <% if event.address.present? %>
+      <span class="event-address">
+        <span>
+          <%= event.address %>
+        </span>
+      </span>
+    <% end %>
+  </div>
+</div>
+
+<div class="event-body">
+  <% if format == 'short' %>
+    <%= display_short_format event, :comments_link => false, :read_more_link => false %>
+  <% else %>
+    <div class="event-lead">
+      <%= event.article_lead %>
+    </div>
+    <div class="event-content">
+      <%= event.body %>
+    </div>
+  <% end %>
+</div>
@@ -47,7 +47,7 @@
 <% cache(@page.cache_key(params, user, language)) do %>
   <div class="<%="article-body article-body-" + @page.css_class_name %>">
     <% options = @page.image? ? {:gallery_view => true} : {} %>
-    <% if @page.image.present? && @page.class != "Event" %>
+    <% if @page.image.present? && !@page.event? %>
       <div class="article-body-img">
         <%= image_tag(@page.image.public_filename) %>
         <p><%= @page.image.label%></p>
@@ -160,6 +160,7 @@ Feature: events
     When I am on /search/events
     Then I should see "Colivre.net's Events"
  
+
   @selenium
   Scenario: published events should be listed in the agenda too
     Given the following community
@@ -1434,3 +1434,91 @@ table#recaptcha_table tr:hover td {
   font-size: 10px;
   min-height: 20px;
 }
+/* Noosfero Events */
+
+.event-card {
+  float: left;
+  padding-top: 33px;
+  width: 494px;
+  height: 116px;
+  background-repeat: no-repeat;
+  margin-bottom: 10px;
+}
+
+.event-image {
+  position: relative;
+  float: left;
+  padding-right: 22px;
+  width: 130px;
+  height: 130px;
+}
+
+#content #article .article-body img{
+  max-height: 100%;
+}
+
+.about-event {
+  position: relative;
+  float: left;
+  height: 160px;
+  width: 300px;
+  max-width: 300px;
+}
+
+.about-event > span {
+  display: block;
+  max-width: inherit;
+  margin-left: 20px;
+  padding-left: 21px;
+  line-height: 13px;
+  margin-right: 11px;
+}
+
+.about-event .event-date {
+  margin-top: 3px;
+}
+
+.about-event .event-address {
+  margin-top: 19px;
+}
+
+.about-event .event-address span {
+  display: block;
+  margin-left: 0px;
+  margin-top: 4.4px;
+  line-height: 14px;
+}
+
+.event-date {
+  background: url('/images/calendar_date_select/calendar-icon.png') no-repeat left center;
+  padding: 5px;
+}
+
+.event-link {
+  background: url('/images/globe-icon.png') no-repeat left center;
+  margin-top: 18px;
+}
+
+.event-link a {
+}
+
+.event-address {
+  background: url('/images/icone_pin.png') no-repeat left top;
+}
+
+.event-body {
+  float: left;
+}
+
+.event-body .event-lead {
+  margin-left: 2px;
+  width: 494px;
+  font-weight: bold;
+  margin-bottom: -3px;
+}
+
+.event-body .event-content p {
+  margin-top: 20px;
+  width: 494px;
+  padding-left: 2px;
+}
@@ -109,17 +109,18 @@ class EventTest &lt; ActiveSupport::TestCase
   end
  
   should 'provide nice display format' do
-    e = build(Event, :start_date => Date.new(2008,1,1), :end_date => Date.new(2008,1,1), :link => 'http://www.myevent.org', :body => 'my somewhat short description')
+    event = build(Event, :start_date => Date.new(2008,1,1), :end_date => Date.new(2008,1,1), :link => 'http://www.myevent.org', :body => '<p>my somewhat short description</p>')
+    display = instance_eval(&event.to_html)
  
-    assert_tag_in_string e.to_html, :content => Regexp.new("January 1, 2008")
-    assert_tag_in_string e.to_html, :content => 'my somewhat short description'
-    assert_tag_in_string e.to_html, :tag => 'a', :attributes => { :href  => 'http://www.myevent.org' }, :content => 'http://www.myevent.org'
+    assert_tag_in_string display, :content => Regexp.new("January 1, 2008")
+    assert_tag_in_string display, :content => Regexp.new('my somewhat short description')
+    assert_tag_in_string display, :content => Regexp.new('http://www.myevent.org')
   end
  
   should 'not crash when body is blank' do
     e = Event.new
     assert_nil e.body
-    assert_no_match(/_____XXXX_DESCRIPTION_GOES_HERE_XXXX_____/, e.to_html)
+    assert_no_match(/_____XXXX_DESCRIPTION_GOES_HERE_XXXX_____/, instance_eval(&e.to_html))
   end
  
   should 'add http:// to the link if not already present' do
@@ -141,10 +142,19 @@ class EventTest &lt; ActiveSupport::TestCase
     assert_equal '', a.link
   end
  
+  should 'get the first paragraph' do
+    profile = create_user('testuser').person
+    event = create(Event, :profile => profile, :name => 'test',
+    :body => '<p>first paragraph </p><p>second paragraph </p>',
+    :link => 'www.colivre.coop.br', :start_date => Date.today)
+
+    assert_match '<p>first paragraph </p>', event.first_paragraph
+  end
+
   should 'not escape HTML in body' do
     a = build(Event, :body => '<p>a paragraph of text</p>', :link => 'www.gnu.org')
  
-    assert_match '<p>a paragraph of text</p>', a.to_html
+    assert_match '<p>a paragraph of text</p>', instance_eval(&a.to_html)
   end
  
   should 'filter HTML in body' do
@@ -324,7 +334,7 @@ class EventTest &lt; ActiveSupport::TestCase
     environment = fast_create(Environment)
     environment.languages = nil
     profile = fast_create(Person, :environment_id => environment.id)
- 
+
     event = Event.new(:profile => profile)
  
     assert !event.translatable?
@@ -337,11 +347,11 @@ class EventTest &lt; ActiveSupport::TestCase
     event = fast_create(Event, :profile_id => profile.id)
  
     assert !event.translatable?
- 
+
  
     environment.languages = ['en','pt','fr']
     environment.save
-    event.reload 
+    event.reload
     assert event.translatable?
   end
...	...	@@ -98,47 +98,19 @@ class Event < Article
98	98	start_date..(end_date\|\|start_date)
99	99	end
100	100
101		- # FIXME this shouldn't be needed
102		- include ActionView::Helpers::TagHelper
103		- include ActionView::Helpers::UrlHelper
104		- include DatesHelper
	101	+ def first_paragraph
	102	+ paragraphs = Nokogiri::HTML.fragment(self.body).css('p')
	103	+ paragraphs.empty? ? '' : paragraphs.first.to_html
	104	+ end
105	105
106	106	def to_html(options = {})
	107	+ event = self
	108	+ format = options[:format]
107	109
108		- result = ''
109		- html = ::Builder::XmlMarkup.new(:target => result)
110		-
111		- html.div(:class => 'event-info' ) {
112		- html.ul(:class => 'event-data' ) {
113		- html.li(:class => 'event-dates' ) {
114		- html.span _('When:')
115		- html.text! show_period(start_date, end_date)
116		- } if start_date.present? \|\| end_date.present?
117		- html.li {
118		- html.span _('URL:')
119		- html.a(self.link \|\| "", 'href' => self.link \|\| "")
120		- } if self.link.present?
121		- html.li {
122		- html.span _('Address:')
123		- html.text! self.address \|\| ""
124		- } if self.address.present?
125		- }
126		-
127		- # TODO: some good soul, please clean this ugly hack:
128		- if self.body
129		- html.div('_____XXXX_DESCRIPTION_GOES_HERE_XXXX_____', :class => 'event-description')
130		- end
131		- }
132		-
133		- if self.body
134		- if options[:format] == 'short'
135		- result.sub!('_____XXXX_DESCRIPTION_GOES_HERE_XXXX_____', display_short_format(self))
136		- else
137		- result.sub!('_____XXXX_DESCRIPTION_GOES_HERE_XXXX_____', self.body)
138		- end
	110	+ proc do
	111	+ render :file => 'content_viewer/event_page', :locals => { :event => event,
	112	+ :format => format }
139	113	end
140		-
141		- result
142	114	end
143	115
144	116	def duration
...	...
...	...	@@ -0,0 +1,41 @@
	1	+<div class="event-card">
	2	+ <div class="event-image">
	3	+ <% if event.image && event.image.thumbnails_processed %>
	4	+ <%= image_tag(event.image.thumbnails.select{\|thumb\| thumb.thumbnail == "big"}.first.public_filename) %>
	5	+ <% else %>
	6	+ <%= image_tag("/images/icons-app/image-loading-thumb.png") %>
	7	+ <% end %>
	8	+ </div>
	9	+ <div class="about-event">
	10	+ <% if event.start_date.present? \|\| event.end_date.present? %>
	11	+ <span class="event-date">
	12	+ <%= show_period(event.start_date, event.end_date) %>
	13	+ </span>
	14	+ <% end %>
	15	+ <% if event.link.present? %>
	16	+ <span class="event-link">
	17	+ <%= link_to event.link, event.link %>
	18	+ </span>
	19	+ <% end %>
	20	+ <% if event.address.present? %>
	21	+ <span class="event-address">
	22	+ <span>
	23	+ <%= event.address %>
	24	+ </span>
	25	+ </span>
	26	+ <% end %>
	27	+ </div>
	28	+</div>
	29	+
	30	+<div class="event-body">
	31	+ <% if format == 'short' %>
	32	+ <%= display_short_format event, :comments_link => false, :read_more_link => false %>
	33	+ <% else %>
	34	+ <div class="event-lead">
	35	+ <%= event.article_lead %>
	36	+ </div>
	37	+ <div class="event-content">
	38	+ <%= event.body %>
	39	+ </div>
	40	+ <% end %>
	41	+</div>
...	...
...	...	@@ -47,7 +47,7 @@
47	47	<% cache(@page.cache_key(params, user, language)) do %>
48	48	<div class="<%="article-body article-body-" + @page.css_class_name %>">
49	49	<% options = @page.image? ? {:gallery_view => true} : {} %>
50		- <% if @page.image.present? && @page.class != "Event" %>
	50	+ <% if @page.image.present? && !@page.event? %>
51	51	<div class="article-body-img">
52	52	<%= image_tag(@page.image.public_filename) %>
53	53	<p><%= @page.image.label%></p>
...	...
...	...	@@ -160,6 +160,7 @@ Feature: events
160	160	When I am on /search/events
161	161	Then I should see "Colivre.net's Events"
162	162
	163	+
163	164	@selenium
164	165	Scenario: published events should be listed in the agenda too
165	166	Given the following community
...	...
...	...	@@ -1434,3 +1434,91 @@ table#recaptcha_table tr:hover td {
1434	1434	font-size: 10px;
1435	1435	min-height: 20px;
1436	1436	}
	1437	+/* Noosfero Events */
	1438	+
	1439	+.event-card {
	1440	+ float: left;
	1441	+ padding-top: 33px;
	1442	+ width: 494px;
	1443	+ height: 116px;
	1444	+ background-repeat: no-repeat;
	1445	+ margin-bottom: 10px;
	1446	+}
	1447	+
	1448	+.event-image {
	1449	+ position: relative;
	1450	+ float: left;
	1451	+ padding-right: 22px;
	1452	+ width: 130px;
	1453	+ height: 130px;
	1454	+}
	1455	+
	1456	+#content #article .article-body img{
	1457	+ max-height: 100%;
	1458	+}
	1459	+
	1460	+.about-event {
	1461	+ position: relative;
	1462	+ float: left;
	1463	+ height: 160px;
	1464	+ width: 300px;
	1465	+ max-width: 300px;
	1466	+}
	1467	+
	1468	+.about-event > span {
	1469	+ display: block;
	1470	+ max-width: inherit;
	1471	+ margin-left: 20px;
	1472	+ padding-left: 21px;
	1473	+ line-height: 13px;
	1474	+ margin-right: 11px;
	1475	+}
	1476	+
	1477	+.about-event .event-date {
	1478	+ margin-top: 3px;
	1479	+}
	1480	+
	1481	+.about-event .event-address {
	1482	+ margin-top: 19px;
	1483	+}
	1484	+
	1485	+.about-event .event-address span {
	1486	+ display: block;
	1487	+ margin-left: 0px;
	1488	+ margin-top: 4.4px;
	1489	+ line-height: 14px;
	1490	+}
	1491	+
	1492	+.event-date {
	1493	+ background: url('/images/calendar_date_select/calendar-icon.png') no-repeat left center;
	1494	+ padding: 5px;
	1495	+}
	1496	+
	1497	+.event-link {
	1498	+ background: url('/images/globe-icon.png') no-repeat left center;
	1499	+ margin-top: 18px;
	1500	+}
	1501	+
	1502	+.event-link a {
	1503	+}
	1504	+
	1505	+.event-address {
	1506	+ background: url('/images/icone_pin.png') no-repeat left top;
	1507	+}
	1508	+
	1509	+.event-body {
	1510	+ float: left;
	1511	+}
	1512	+
	1513	+.event-body .event-lead {
	1514	+ margin-left: 2px;
	1515	+ width: 494px;
	1516	+ font-weight: bold;
	1517	+ margin-bottom: -3px;
	1518	+}
	1519	+
	1520	+.event-body .event-content p {
	1521	+ margin-top: 20px;
	1522	+ width: 494px;
	1523	+ padding-left: 2px;
	1524	+}
...	...
...	...	@@ -109,17 +109,18 @@ class EventTest < ActiveSupport::TestCase
109	109	end
110	110
111	111	should 'provide nice display format' do
112		- e = build(Event, :start_date => Date.new(2008,1,1), :end_date => Date.new(2008,1,1), :link => 'http://www.myevent.org', :body => 'my somewhat short description')
	112	+ event = build(Event, :start_date => Date.new(2008,1,1), :end_date => Date.new(2008,1,1), :link => 'http://www.myevent.org', :body => '<p>my somewhat short description</p>')
	113	+ display = instance_eval(&event.to_html)
113	114
114		- assert_tag_in_string e.to_html, :content => Regexp.new("January 1, 2008")
115		- assert_tag_in_string e.to_html, :content => 'my somewhat short description'
116		- assert_tag_in_string e.to_html, :tag => 'a', :attributes => { :href => 'http://www.myevent.org' }, :content => 'http://www.myevent.org'
	115	+ assert_tag_in_string display, :content => Regexp.new("January 1, 2008")
	116	+ assert_tag_in_string display, :content => Regexp.new('my somewhat short description')
	117	+ assert_tag_in_string display, :content => Regexp.new('http://www.myevent.org')
117	118	end
118	119
119	120	should 'not crash when body is blank' do
120	121	e = Event.new
121	122	assert_nil e.body
122		- assert_no_match(/_____XXXX_DESCRIPTION_GOES_HERE_XXXX_____/, e.to_html)
	123	+ assert_no_match(/_____XXXX_DESCRIPTION_GOES_HERE_XXXX_____/, instance_eval(&e.to_html))
123	124	end
124	125
125	126	should 'add http:// to the link if not already present' do
...	...	@@ -141,10 +142,19 @@ class EventTest < ActiveSupport::TestCase
141	142	assert_equal '', a.link
142	143	end
143	144
	145	+ should 'get the first paragraph' do
	146	+ profile = create_user('testuser').person
	147	+ event = create(Event, :profile => profile, :name => 'test',
	148	+ :body => '<p>first paragraph </p><p>second paragraph </p>',
	149	+ :link => 'www.colivre.coop.br', :start_date => Date.today)
	150	+
	151	+ assert_match '<p>first paragraph </p>', event.first_paragraph
	152	+ end
	153	+
144	154	should 'not escape HTML in body' do
145	155	a = build(Event, :body => '<p>a paragraph of text</p>', :link => 'www.gnu.org')
146	156
147		- assert_match '<p>a paragraph of text</p>', a.to_html
	157	+ assert_match '<p>a paragraph of text</p>', instance_eval(&a.to_html)
148	158	end
149	159
150	160	should 'filter HTML in body' do
...	...	@@ -324,7 +334,7 @@ class EventTest < ActiveSupport::TestCase
324	334	environment = fast_create(Environment)
325	335	environment.languages = nil
326	336	profile = fast_create(Person, :environment_id => environment.id)
327		-
	337	+
328	338	event = Event.new(:profile => profile)
329	339
330	340	assert !event.translatable?
...	...	@@ -337,11 +347,11 @@ class EventTest < ActiveSupport::TestCase
337	347	event = fast_create(Event, :profile_id => profile.id)
338	348
339	349	assert !event.translatable?
340		-
	350	+
341	351
342	352	environment.languages = ['en','pt','fr']
343	353	environment.save
344		- event.reload
	354	+ event.reload
345	355	assert event.translatable?
346	356	end
347	357
...	...