Improve headlines (#277)

* Convert headline markdown to html on cup show page
* Improve Headline layout

app/controllers/headlines_controller.rb

@@ -7,7 +7,7 @@ class HeadlinesController < ApplicationController
   respond_to :html
 
   def index
-    respond_with @headlines.order(created_at: :desc)
+    @headlines = @headlines.order(created_at: :desc)
   end
 
   def show

app/views/cups/_headline.html.erb

@@ -2,7 +2,7 @@
   <div class="px-4 py-5 sm:p-6 prose prose-red-900 prose-lg">
     <h3 class="text-lg leading-6 font-medium text-gray-900"><%= headline.title %></h3>
     <div class="mt-2 max-w-xl text-sm text-gray-500">
-      <%== headline.content %>
+      <%= md_to_html(headline.content) %>
     </div>
     <div class="mt-3 text-sm">
       <%= link_to cup_headlines_path(@cup), class: "font-medium text-red-600 hover:text-red-500" do %>

app/views/headlines/_headline.html.erb

@@ -1,21 +1,14 @@
-<li>
-  <div class="py-4 px-3 sm:px-6 lg:px-8">
-    <div class="flex items-center justify-between">
-      <div>
-        <p class="text-lg font-medium text-gray-600 prose">
-          <%= link_to(cup_headline_path(@current_cup, headline)) do %>
-            <%= headline.title %>
-          <% end %>
-        </p>
-        <p class="text-sm font-medium text-gray-400 truncate">
-          <em><%= headline.created_at.to_fs :day_month_year %></em>
-        </p>
-      </div>
-    </div>
-    <div class="mt-6 sm:flex sm:justify-between">
-      <div class="sm:flex">
-        <%= md_to_html(headline.content) %>
-      </div>
+<div class="w-full bg-white shadow">
+  <div class="px-4 py-5 sm:p-6 prose prose-red-900 prose-lg">
+    <p class="mt-1 text-xs text-gray-500 mb-0 italic">
+      <%= Headline.human_attribute_name(:created_at) %>
+      <%= l(headline.created_at.to_date, format: :day_month_year) %>
+    </p>
+    <h3 class="text-lg mt-1 font-medium text-gray-900">
+      <%= headline.title %>
+    </h3>
+    <div class="mt-2 max-w-xl text-sm text-gray-500">
+      <%= md_to_html(headline.content) %>
     </div>
   </div>
-</li>
+</div>

app/views/headlines/index.html.erb

@@ -11,12 +11,12 @@
         </div>
       </div>
     </div>
-    <ul role="list" class="divide-y divide-gray-200">
+    <div role="list" class="divide-y divide-gray-200">
       <% if @headlines.length.positive? %>
         <%= render @headlines %>
       <% else %>
         <%= t(".no_news") %>
       <% end %>
-    </ul>
+    </div>
   </div>
 </div>

app/views/headlines/show.html.erb

@@ -1,6 +1,6 @@
 <% @title ||= @headline.title; title @title %>
 <div class="row headlines">
-  <div class="col-xs-12 col-md-12">
+  <div class="col-xs-12">
     <h2>
       <%= @title %>
       <small>

app/views/layouts/_navigation.html.erb

@@ -74,7 +74,7 @@
           render(NavigationDropdownComponent.new(
             name: "locale",
             text: I18n.locale.to_s.upcase,
-            css_class: "hidden lg:block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium",
+            css_class: "hidden sm:block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium",
             links: I18n.available_locales.map { |locale| {text: locale.to_s.upcase, url: {locale: locale}} }
           ))
         %>

config/locales/models/headlines.en.yml

@@ -1,5 +1,9 @@
 ---
 en:
+  activerecord:
+    attributes:
+      headline:
+        created_at: Published
   headlines:
     index:
       no_news: No headlines yet…

config/locales/models/headlines.fr.yml

@@ -1,5 +1,9 @@
 ---
 fr:
+  activerecord:
+    attributes:
+      headline:
+        created_at: Publié
   headlines:
     index:
       no_news: Pas de nouvelles pour l'instant…