From cbcff5a4e79aa144d60b4b9d6d0af7d3f9a3f52e Mon Sep 17 00:00:00 2001
From: André Bernardes <andrebsguedes@gmail.com>
Date: Wed, 27 May 2015 16:31:49 -0300
Subject: [PATCH] Improved event display layout

---
 app/models/event.rb                                  | 46 +++++++++-------------------------------------
 app/views/content_viewer/event_page.html.erb         | 41 +++++++++++++++++++++++++++++++++++++++++
 app/views/content_viewer/view_page.html.erb          |  2 +-
 features/events.feature                              |  1 +
 public/designs/themes/base/style.css                 | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
 public/images/calendar_date_select/calendar-icon.png | Bin 0 -> 283 bytes
 public/images/globe-icon.png                         | Bin 0 -> 464 bytes
 public/images/icone_pin.png                          | Bin 0 -> 53194 bytes
 public/stylesheets/application.css                   |  6 +++---
 test/unit/event_test.rb                              | 30 +++++++++++++++++++++---------
 10 files changed, 166 insertions(+), 56 deletions(-)
 create mode 100644 app/views/content_viewer/event_page.html.erb
 create mode 100644 public/images/calendar_date_select/calendar-icon.png
 create mode 100644 public/images/globe-icon.png
 create mode 100644 public/images/icone_pin.png

diff --git a/app/models/event.rb b/app/models/event.rb
index 12e2993..743a1a7 100644
--- a/app/models/event.rb
+++ b/app/models/event.rb
@@ -98,47 +98,19 @@ class Event < 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
diff --git a/app/views/content_viewer/event_page.html.erb b/app/views/content_viewer/event_page.html.erb
new file mode 100644
index 0000000..b73685e
--- /dev/null
+++ b/app/views/content_viewer/event_page.html.erb
@@ -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>
diff --git a/app/views/content_viewer/view_page.html.erb b/app/views/content_viewer/view_page.html.erb
index 4dca979..94d02e6 100644
--- a/app/views/content_viewer/view_page.html.erb
+++ b/app/views/content_viewer/view_page.html.erb
@@ -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>
diff --git a/features/events.feature b/features/events.feature
index e7ddbbc..6156458 100644
--- a/features/events.feature
+++ b/features/events.feature
@@ -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
diff --git a/public/designs/themes/base/style.css b/public/designs/themes/base/style.css
index ca4c896..fca605b 100644
--- a/public/designs/themes/base/style.css
+++ b/public/designs/themes/base/style.css
@@ -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;
 }
diff --git a/public/images/calendar_date_select/calendar-icon.png b/public/images/calendar_date_select/calendar-icon.png
new file mode 100644
index 0000000..6ea0a2b
Binary files /dev/null and b/public/images/calendar_date_select/calendar-icon.png differ
diff --git a/public/images/globe-icon.png b/public/images/globe-icon.png
new file mode 100644
index 0000000..a15bbab
Binary files /dev/null and b/public/images/globe-icon.png differ
diff --git a/public/images/icone_pin.png b/public/images/icone_pin.png
new file mode 100644
index 0000000..3dcfed8
Binary files /dev/null and b/public/images/icone_pin.png differ
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index b5e6fd8..5c668ee 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -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 {
diff --git a/test/unit/event_test.rb b/test/unit/event_test.rb
index 7947abf..d4559a5 100644
--- a/test/unit/event_test.rb
+++ b/test/unit/event_test.rb
@@ -109,17 +109,20 @@ class EventTest < 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 < 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 < 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 < 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
 
--
libgit2 0.21.2