Commit cbcff5a4e79aa144d60b4b9d6d0af7d3f9a3f52e
Committed by
Gabriela Navarro
1 parent
245bc58e
Exists in
article_layout_refactoring
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>
Showing
10 changed files
with
166 additions
and
56 deletions
Show diff stats
app/models/event.rb
... | ... | @@ -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 %> | |
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
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 | } | ... | ... |
283 Bytes
464 Bytes
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 < 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 < 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 < 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 < 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 | ... | ... |