Commit cbcff5a4e79aa144d60b4b9d6d0af7d3f9a3f52e

Authored by André Guedes
Committed by Gabriela Navarro
1 parent 245bc58e

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>
app/models/event.rb
... ... @@ -98,47 +98,19 @@ class Event &lt; 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
... ...
app/views/content_viewer/event_page.html.erb 0 → 100644
... ... @@ -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>
... ...
app/views/content_viewer/view_page.html.erb
... ... @@ -31,7 +31,7 @@
31 31 <% cache(@page.cache_key(params, user, language)) do %>
32 32 <div class="<%="article-body article-body-" + @page.css_class_name %>">
33 33 <% options = @page.image? ? {:gallery_view => true} : {} %>
34   - <% if @page.image.present? && @page.class != "Event" %>
  34 + <% if @page.image.present? && !@page.event? %>
35 35 <div class="article-body-img">
36 36 <%= image_tag(@page.image.public_filename) %>
37 37 <p><%= @page.image.label%></p>
... ...
features/events.feature
... ... @@ -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
... ...
public/designs/themes/base/style.css
... ... @@ -1061,20 +1061,18 @@ hr.pre-posts, hr.sep-posts {
1061 1061 text-decoration: none;
1062 1062 }
1063 1063  
1064   -#content .main-block .created-at {
  1064 +#content .main-block .publishing-info {
1065 1065 text-align: left;
1066 1066 color: #AAA;
1067 1067 font-size: 11px;
1068   - padding-top: 20px;
1069   - border-top: 1px solid #D7D7D7;
1070   - margin-top: 30px;
  1068 + /*padding-top: 20px;*/
1071 1069 margin-bottom:15px;
1072 1070 }
1073   -#content .main-block .created-at a {
  1071 +#content .main-block .publishing-info a {
1074 1072 color: #AAA;
1075 1073 text-decoration: none;
1076 1074 }
1077   -#content .main-block .created-at a:hover {
  1075 +#content .main-block .publishing-info a:hover {
1078 1076 color: #555;
1079 1077 text-decoration: underline;
1080 1078 }
... ... @@ -1446,4 +1444,90 @@ table#recaptcha_table tr:hover td {
1446 1444 margin-bottom: 10px;
1447 1445 font-size: 10px;
1448 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 }
... ...
public/images/calendar_date_select/calendar-icon.png 0 → 100644

283 Bytes

public/images/globe-icon.png 0 → 100644

464 Bytes

public/images/icone_pin.png 0 → 100644

51.9 KB

public/stylesheets/application.css
... ... @@ -1523,13 +1523,13 @@ a.comment-picture {
1523 1523 text-align: right;
1524 1524 color: gray;
1525 1525 }
1526   -#content .created-at {
  1526 +#content .publishing-info {
1527 1527 color: gray;
1528 1528 font-size: 12px;
1529 1529 display: block;
1530 1530 text-align: right;
1531 1531 }
1532   -#content .blog-post .created-at {
  1532 +#content .blog-post .publishing-info {
1533 1533 text-align: left;
1534 1534 }
1535 1535 #content #article .pagination .prev_page {
... ... @@ -1601,7 +1601,7 @@ div.article-body p img {
1601 1601 .blog-post.not-published a {
1602 1602 text-decoration: none;
1603 1603 }
1604   -#content .blog-post.not-published .created-at {
  1604 +#content .blog-post.not-published .publishing-info {
1605 1605 text-align: left;
1606 1606 }
1607 1607 .blog-post.not-published .metadata {
... ...
test/unit/event_test.rb
... ... @@ -109,17 +109,20 @@ class EventTest &lt; 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_nothing_raised do
  124 + instance_eval(&e.to_html)
  125 + end
123 126 end
124 127  
125 128 should 'add http:// to the link if not already present' do
... ... @@ -141,10 +144,19 @@ class EventTest &lt; ActiveSupport::TestCase
141 144 assert_equal '', a.link
142 145 end
143 146  
  147 + should 'get the first paragraph' do
  148 + profile = create_user('testuser').person
  149 + event = create(Event, :profile => profile, :name => 'test',
  150 + :body => '<p>first paragraph </p><p>second paragraph </p>',
  151 + :link => 'www.colivre.coop.br', :start_date => Date.today)
  152 +
  153 + assert_match '<p>first paragraph </p>', event.first_paragraph
  154 + end
  155 +
144 156 should 'not escape HTML in body' do
145 157 a = build(Event, :body => '<p>a paragraph of text</p>', :link => 'www.gnu.org')
146 158  
147   - assert_match '<p>a paragraph of text</p>', a.to_html
  159 + assert_match '<p>a paragraph of text</p>', instance_eval(&a.to_html)
148 160 end
149 161  
150 162 should 'filter HTML in body' do
... ... @@ -324,7 +336,7 @@ class EventTest &lt; ActiveSupport::TestCase
324 336 environment = fast_create(Environment)
325 337 environment.languages = nil
326 338 profile = fast_create(Person, :environment_id => environment.id)
327   -
  339 +
328 340 event = Event.new(:profile => profile)
329 341  
330 342 assert !event.translatable?
... ... @@ -337,11 +349,11 @@ class EventTest &lt; ActiveSupport::TestCase
337 349 event = fast_create(Event, :profile_id => profile.id)
338 350  
339 351 assert !event.translatable?
340   -
  352 +
341 353  
342 354 environment.languages = ['en','pt','fr']
343 355 environment.save
344   - event.reload
  356 + event.reload
345 357 assert event.translatable?
346 358 end
347 359  
... ...