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 245bc58e
Showing 10 changed files with 166 additions and 56 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
public/stylesheets/application.css
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 %>
+      <%= image_tag(event.image.public_filename(:big)) %>
+    <% 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 %>
+    <% unless event.abstract.blank? %>
+      <div class="event-lead">
+        <%= event.article_lead %>
+      </div>
+    <% end %>
+    <div class="event-content">
+      <%= event.body %>
+    </div>
+  <% end %>
+</div>
@@ -31,7 +31,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
@@ -1061,20 +1061,18 @@ hr.pre-posts, hr.sep-posts {
   text-decoration: none;
 }
-#content .main-block .created-at {
+#content .main-block .publishing-info {
   text-align: left;
   color: #AAA;
   font-size: 11px;
-  padding-top: 20px;
-  border-top: 1px solid #D7D7D7;
-  margin-top: 30px;
+  /*padding-top: 20px;*/
   margin-bottom:15px;
 }
-#content .main-block .created-at a {
+#content .main-block .publishing-info a {
   color: #AAA;
   text-decoration: none;
 }
-#content .main-block .created-at a:hover {
+#content .main-block .publishing-info a:hover {
   color: #555;
   text-decoration: underline;
 }
@@ -1446,4 +1444,90 @@ table#recaptcha_table tr:hover td {
   margin-bottom: 10px;
   font-size: 10px;
   min-height: 20px;
+  text-align:
+}
+/* Noosfero Events */
+
+.event-card {
+  float: left;
+  padding-top: 25px;
+  width: 494px;
+  height: 116px;
+  background-repeat: no-repeat;
+  margin-bottom: 30px;
+}
+
+.event-image {
+  position: relative;
+  float: left;
+  padding-right: 22px;
+  max-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 {
+  font-size: 15px;
+}
+
+.event-body .event-content p {
+  margin-top: 20px;
+  width: 494px;
+  padding-left: 2px;
 }
@@ -1523,13 +1523,13 @@ a.comment-picture {
   text-align: right;
   color: gray;
 }
-#content .created-at {
+#content .publishing-info {
   color: gray;
   font-size: 12px;
   display: block;
   text-align: right;
 }
-#content .blog-post .created-at {
+#content .blog-post .publishing-info {
   text-align: left;
 }
 #content #article .pagination .prev_page {
@@ -1601,7 +1601,7 @@ div.article-body p img {
 .blog-post.not-published a {
   text-decoration: none;
 }
-#content .blog-post.not-published .created-at {
+#content .blog-post.not-published .publishing-info {
   text-align: left;
 }
 .blog-post.not-published .metadata {
@@ -109,17 +109,20 @@ 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_nothing_raised  do
+      instance_eval(&e.to_html)
+    end
   end
   should 'add http:// to the link if not already present' do
@@ -141,10 +144,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 +336,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 +349,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,47 +98,19 @@ class Event < Article
98	start_date..(end_date\|\|start_date)	98	start_date..(end_date\|\|start_date)
99	end	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	def to_html(options = {})	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	end	113	end
140	-
141	- result
142	end	114	end
143		115
144	def duration	116	def duration
@@ -0,0 +1,41 @@		@@ -0,0 +1,41 @@
	1	+<div class="event-card">
	2	+ <div class="event-image">
	3	+ <% if event.image %>
	4	+ <%= image_tag(event.image.public_filename(:big)) %>
	5	+ <% end %>
	6	+ </div>
	7	+ <div class="about-event">
	8	+ <% if event.start_date.present? \|\| event.end_date.present? %>
	9	+ <span class="event-date">
	10	+ <%= show_period(event.start_date, event.end_date) %>
	11	+ </span>
	12	+ <% end %>
	13	+ <% if event.link.present? %>
	14	+ <span class="event-link">
	15	+ <%= link_to event.link, event.link %>
	16	+ </span>
	17	+ <% end %>
	18	+ <% if event.address.present? %>
	19	+ <span class="event-address">
	20	+ <span>
	21	+ <%= event.address %>
	22	+ </span>
	23	+ </span>
	24	+ <% end %>
	25	+ </div>
	26	+</div>
	27	+
	28	+<div class="event-body">
	29	+ <% if format == 'short' %>
	30	+ <%= display_short_format event, :comments_link => false, :read_more_link => false %>
	31	+ <% else %>
	32	+ <% unless event.abstract.blank? %>
	33	+ <div class="event-lead">
	34	+ <%= event.article_lead %>
	35	+ </div>
	36	+ <% end %>
	37	+ <div class="event-content">
	38	+ <%= event.body %>
	39	+ </div>
	40	+ <% end %>
	41	+</div>
	@@ -31,7 +31,7 @@		@@ -31,7 +31,7 @@
31	<% cache(@page.cache_key(params, user, language)) do %>	31	<% cache(@page.cache_key(params, user, language)) do %>
32	<div class="<%="article-body article-body-" + @page.css_class_name %>">	32	<div class="<%="article-body article-body-" + @page.css_class_name %>">
33	<% options = @page.image? ? {:gallery_view => true} : {} %>	33	<% options = @page.image? ? {:gallery_view => true} : {} %>
34	- <% if @page.image.present? && @page.class != "Event" %>	34	+ <% if @page.image.present? && !@page.event? %>
35	<div class="article-body-img">	35	<div class="article-body-img">
36	<%= image_tag(@page.image.public_filename) %>	36	<%= image_tag(@page.image.public_filename) %>
37	<p><%= @page.image.label%></p>	37	<p><%= @page.image.label%></p>
	@@ -160,6 +160,7 @@ Feature: events		@@ -160,6 +160,7 @@ Feature: events
160	When I am on /search/events	160	When I am on /search/events
161	Then I should see "Colivre.net's Events"	161	Then I should see "Colivre.net's Events"
162		162
		163	+
163	@selenium	164	@selenium
164	Scenario: published events should be listed in the agenda too	165	Scenario: published events should be listed in the agenda too
165	Given the following community	166	Given the following community
	@@ -1061,20 +1061,18 @@ hr.pre-posts, hr.sep-posts {		@@ -1061,20 +1061,18 @@ hr.pre-posts, hr.sep-posts {
1061	text-decoration: none;	1061	text-decoration: none;
1062	}	1062	}
1063		1063
1064	-#content .main-block .created-at {	1064	+#content .main-block .publishing-info {
1065	text-align: left;	1065	text-align: left;
1066	color: #AAA;	1066	color: #AAA;
1067	font-size: 11px;	1067	font-size: 11px;
1068	- padding-top: 20px;
1069	- border-top: 1px solid #D7D7D7;
1070	- margin-top: 30px;	1068	+ /padding-top: 20px;/
1071	margin-bottom:15px;	1069	margin-bottom:15px;
1072	}	1070	}
1073	-#content .main-block .created-at a {	1071	+#content .main-block .publishing-info a {
1074	color: #AAA;	1072	color: #AAA;
1075	text-decoration: none;	1073	text-decoration: none;
1076	}	1074	}
1077	-#content .main-block .created-at a:hover {	1075	+#content .main-block .publishing-info a:hover {
1078	color: #555;	1076	color: #555;
1079	text-decoration: underline;	1077	text-decoration: underline;
1080	}	1078	}
	@@ -1446,4 +1444,90 @@ table#recaptcha_table tr:hover td {		@@ -1446,4 +1444,90 @@ table#recaptcha_table tr:hover td {
1446	margin-bottom: 10px;	1444	margin-bottom: 10px;
1447	font-size: 10px;	1445	font-size: 10px;
1448	min-height: 20px;	1446	min-height: 20px;
		1447	+ text-align:
		1448	+}
		1449	+/* Noosfero Events */
		1450	+
		1451	+.event-card {
		1452	+ float: left;
		1453	+ padding-top: 25px;
		1454	+ width: 494px;
		1455	+ height: 116px;
		1456	+ background-repeat: no-repeat;
		1457	+ margin-bottom: 30px;
		1458	+}
		1459	+
		1460	+.event-image {
		1461	+ position: relative;
		1462	+ float: left;
		1463	+ padding-right: 22px;
		1464	+ max-width: 130px;
		1465	+ height: 130px;
		1466	+}
		1467	+
		1468	+#content #article .article-body img{
		1469	+ max-height: 100%;
		1470	+}
		1471	+
		1472	+.about-event {
		1473	+ position: relative;
		1474	+ float: left;
		1475	+ height: 160px;
		1476	+ width: 300px;
		1477	+ max-width: 300px;
		1478	+}
		1479	+
		1480	+.about-event > span {
		1481	+ display: block;
		1482	+ max-width: inherit;
		1483	+ margin-left: 20px;
		1484	+ padding-left: 21px;
		1485	+ line-height: 13px;
		1486	+ margin-right: 11px;
		1487	+}
		1488	+
		1489	+.about-event .event-date {
		1490	+ margin-top: 3px;
		1491	+}
		1492	+
		1493	+.about-event .event-address {
		1494	+ margin-top: 19px;
		1495	+}
		1496	+
		1497	+.about-event .event-address span {
		1498	+ display: block;
		1499	+ margin-left: 0px;
		1500	+ margin-top: 4.4px;
		1501	+ line-height: 14px;
		1502	+}
		1503	+
		1504	+.event-date {
		1505	+ background: url('/images/calendar_date_select/calendar-icon.png') no-repeat left center;
		1506	+ padding: 5px;
		1507	+}
		1508	+
		1509	+.event-link {
		1510	+ background: url('/images/globe-icon.png') no-repeat left center;
		1511	+ margin-top: 18px;
		1512	+}
		1513	+
		1514	+.event-link a {
		1515	+}
		1516	+
		1517	+.event-address {
		1518	+ background: url('/images/icone_pin.png') no-repeat left top;
		1519	+}
		1520	+
		1521	+.event-body {
		1522	+ float: left;
		1523	+}
		1524	+
		1525	+.event-body .event-lead {
		1526	+ font-size: 15px;
		1527	+}
		1528	+
		1529	+.event-body .event-content p {
		1530	+ margin-top: 20px;
		1531	+ width: 494px;
		1532	+ padding-left: 2px;
1449	}	1533	}
	@@ -1523,13 +1523,13 @@ a.comment-picture {		@@ -1523,13 +1523,13 @@ a.comment-picture {
1523	text-align: right;	1523	text-align: right;
1524	color: gray;	1524	color: gray;
1525	}	1525	}
1526	-#content .created-at {	1526	+#content .publishing-info {
1527	color: gray;	1527	color: gray;
1528	font-size: 12px;	1528	font-size: 12px;
1529	display: block;	1529	display: block;
1530	text-align: right;	1530	text-align: right;
1531	}	1531	}
1532	-#content .blog-post .created-at {	1532	+#content .blog-post .publishing-info {
1533	text-align: left;	1533	text-align: left;
1534	}	1534	}
1535	#content #article .pagination .prev_page {	1535	#content #article .pagination .prev_page {
	@@ -1601,7 +1601,7 @@ div.article-body p img {		@@ -1601,7 +1601,7 @@ div.article-body p img {
1601	.blog-post.not-published a {	1601	.blog-post.not-published a {
1602	text-decoration: none;	1602	text-decoration: none;
1603	}	1603	}
1604	-#content .blog-post.not-published .created-at {	1604	+#content .blog-post.not-published .publishing-info {
1605	text-align: left;	1605	text-align: left;
1606	}	1606	}
1607	.blog-post.not-published .metadata {	1607	.blog-post.not-published .metadata {