event detail page. fixes #240 (#275)

* Changed design of the event detail page for non-mobile screens

* minor code changes regarding image on event detail page

* moved event date into partial

* Moved date range rendering into partial

* Fix spacing

* Fix wrong test having un-localized date

* Add test to verify that date_range.to_s is working for single days

* Make test more independent of factory

* Optimize layout for sm devices

* Display custom fields on large event page

app/assets/stylesheets/events.css

@@ -52,6 +52,8 @@
 .event-date {
     text-align: center;
     line-height: 3em;
+}
+.event-list .event-date {
     margin-right: 15px;
     float: left;
 }
@@ -70,7 +72,7 @@
     margin: -1.2em 0;
 }
 @media (max-width: 768px) {
-    .event-date {
+    .event-list .event-date {
         float: none;
         margin-bottom: 15px;
     }

app/models/date_range.rb

@@ -35,7 +35,7 @@ def validate_end_not_before_start
 
   def to_s
     if start_date == end_date
-      start_date
+      I18n.l(start_date)
     else
       I18n.l(start_date) + ' ' + I18n.t('date_range.pronouns.to') + ' ' + I18n.l(end_date)
     end

app/views/date_ranges/_date_range.html.erb

@@ -0,0 +1,10 @@
+<p>
+  <% if date_range.start_date == date_range.end_date %>
+      <strong><%= l date_range.start_date %></strong>
+  <% else %>
+      <strong><%= l date_range.start_date %></strong>
+      <%= t 'date_range.pronouns.to' %>
+      <strong><%= l date_range.end_date %></strong>
+  <% end %>
+</p>
+

app/views/events/_event.html.erb

@@ -1,12 +1,6 @@
 <div class="event-preview <%= 'event-past' if event.is_past %> clearfix">
   <%= image_tag "example.png", class: "img-rounded img-responsive img-float-corner-tr center-block" %>
-  <div class="event-date">
-    <span class="event-day"><%= l event.start_date, format: "%d" %></span>
-    <span class="event-month"><%= l event.start_date, format: "%b" %></span>
-    <% if event.start_date.year != Time.now.year %>
-      <span class="event-year"><%= event.start_date.year %></span>
-    <% end %>
-  </div>
+  <%= render "events/event_date_large", event: event %>
 
   <h3>
     <%= event.name %>

app/views/events/_event_date_large.html.erb

@@ -0,0 +1,7 @@
+<div class="event-date text-center">
+  <span class="event-day"><%= l event.start_date, format: "%d" %></span>
+  <span class="event-month"><%= l event.start_date, format: "%b" %></span>
+  <% if event.start_date.year != Time.now.year %>
+      <span class="event-year"><%= event.start_date.year %></span>
+  <% end %>
+</div>

app/views/events/_show_event_large.html.erb

@@ -0,0 +1,43 @@
+<%- model_class = Event -%>
+<div>
+  <div class="pull-right">
+    <%= link_to t("helpers.links.apply"), new_application_letter_path(:event_id => @event.id), class: "btn btn-success btn-sm" %>
+    <%= link_to t('.edit', :default => t('helpers.links.edit')), edit_event_path(@event),
+                :class => 'btn btn-default btn-sm' if can? :edit, @event %>
+  </div>
+  <h1><%= @event.name %></h1>
+</div>
+<%= image_tag "event-detail.png", class: "img-rounded img-responsive center-block m-t-1 m-b-1" %>
+<div class="row">
+  <div class="col-md-1 col-md-offset-1 text-center col-sm-2">
+    <%= render "event_date_large", event: @event %>
+    <div class="m-t-1">
+      <%= render @event.date_ranges %>
+    </div>
+  </div>
+  <div class="col-md-7 col-sm-10">
+    <%= markdown @event.description %>
+  </div>
+  <div class="col-md-2 col-sm-offset-2">
+    <dl>
+      <dt><strong><%= model_class.human_attribute_name(:knowledge_level) %>:</strong></dt>
+      <dd><%= @event.knowledge_level %></dd>
+      <dt><strong><%= model_class.human_attribute_name(:max_participants) %>:</strong></dt>
+      <dd><%= @event.max_participants %></dd>
+      <dt><strong><%= model_class.human_attribute_name(:organizer) %>:</strong></dt>
+      <dd><%= @event.organizer %></dd>
+      <dt><strong><%= model_class.human_attribute_name(:application_deadline) %>:</strong></dt>
+      <dd> <%= I18n.l(@event.application_deadline) + ' ' + I18n.t('midnight') %></dd>
+      <% if can? :manage, Event %>
+      <dt><strong><%= model_class.human_attribute_name(:custom_application_fields) %>:</strong></dt>
+      <dd>
+        <ul>
+          <% @event.custom_application_fields.each do |field| %>
+            <li><%= field %></li>
+          <% end %>
+        </ul>
+      </dd>
+      <% end %>
+    </dl>
+  </div>
+</div>

app/views/events/show.html.erb

@@ -11,7 +11,7 @@
   </div>
 <% end %>
 
-<%= render :partial => 'show_event' %>
+<%= render :partial => 'show_event_large' %>
 
 <% if can? :view_applicants, Event %>
   <%= render :partial => 'applicants_overview' %>

spec/factories/date_ranges.rb

@@ -23,5 +23,10 @@
             start_date Date.current.prev_day(3)
             end_date Date.yesterday
         end
+
+        trait :on_single_day do
+            start_date Date.tomorrow
+            end_date Date.tomorrow
+        end
     end 
 end

spec/features/event_spec.rb

@@ -228,7 +228,7 @@
     it "should display a single day date range as a single date" do
       event = FactoryGirl.create(:event, :single_day)
       visit event_path(event)
-      expect(page).to have_text(event.date_ranges.first.start_date)
+      expect(page).to have_text(I18n.l(event.date_ranges.first.start_date))
       expect(page).to_not have_text(" bis " + I18n.l(event.date_ranges.first.end_date))
     end
 

spec/models/date_range_spec.rb

@@ -17,4 +17,9 @@
     negativeDates = FactoryGirl.build(:date_range, :with_negative_range)
     expect(negativeDates).to_not be_valid
   end
+
+  it "should print only one date if it is on a single day" do
+    date_range = FactoryGirl.build :date_range, :on_single_day
+    expect(date_range.to_s).to eq(I18n.l(date_range.start_date))
+  end
 end