polishing stories views

app/views/stories/_form.html.haml

@@ -1,22 +0,0 @@
-= form_for @story do |f|
-  - if @story.errors.any?
-    #error_explanation
-      %h2= "#{pluralize(@story.errors.count, "error")} prohibited this story from being saved:"
-      %ul
-        - @story.errors.full_messages.each do |message|
-          %li= message
-
-  .field
-    = f.label :picture
-    = f.text_field :picture
-  .field
-    = f.label :header
-    = f.text_field :header
-  .field
-    = f.label :text
-    = f.text_area :text
-  .field
-    = f.label :happened
-    = f.date_field :happened
-  .actions
-    = f.submit 'Save'

app/views/stories/_inline.haml

@@ -0,0 +1,12 @@
+%section.overflow-hidden.grid.grid-cols-1.m-5.md:m-12.lg:m-20.md:grid-cols-2
+  %div
+    = image_for( story , "h-56 w-full object-cover sm:h-full")
+  .p-8.md:p-12.lg:px-16.lg:py-24
+    .mx-auto.max-w-xl.text-center
+      %h2.text-2xl.font-bold.md:text-4xl
+        = story.header
+      %h4.text-xl.mt-10.md:text-2xl
+        = distance_of_time_in_words_to_now story.happened
+        ago
+      .mt-8{ prose_classes }
+        = markdown(story.text)

app/views/stories/edit.html.haml

@@ -1,7 +1,20 @@
-%h1 Editing story
+.grid.grid-cols-3
+  %div
+  %div
+    %h1 Editing story
+    = form_for @story do |f|
+      - if @story.errors.any?
+        #error_explanation
+          %h2= "#{pluralize(@story.errors.count, "error")} prohibited this story from being saved:"
+          %ul
+            - @story.errors.full_messages.each do |message|
+              %li= message
 
-= render 'form'
-
-= link_to 'Show', @story
-\|
-= link_to 'Back', stories_path
+      = f.input :picture , as: :file
+      = f.input :header
+      = f.input :text
+      = f.input :happened , class: "flex"
+      = f.submit 'Save'
+    = link_to 'Show', @story
+    = link_to 'Back', stories_path
+  %div

app/views/stories/index.html.haml

@@ -1,26 +1,6 @@
-%h1 Listing stories
-
-%table
-  %thead
-    %tr
-      %th Picture
-      %th Header
-      %th Text
-      %th Happened
-      %th
-      %th
-      %th
-
-  %tbody
-    - @stories.each do |story|
-      %tr
-        %td= story.picture
-        %td= story.header
-        %td= story.text
-        %td= story.happened
-        %td= link_to 'Show', story
-        %td= link_to 'Edit', edit_story_path(story)
-        %td= link_to 'Destroy', story, method: :delete, data: { confirm: 'Are you sure?' }
+= paginate @stories
+- @stories.each do |story|
+  = render "inline" , story: story
 
 %br
 

app/views/stories/new.html.haml

@@ -1,5 +1,20 @@
-%h1 New story
 
-= render 'form'
+.grid.grid-cols-3
+  %div
+  %div
+    %h1 New story
+    = form_for @story do |f|
+      - if @story.errors.any?
+        #error_explanation
+          %h2= "#{pluralize(@story.errors.count, "error")} prohibited this story from being saved:"
+          %ul
+            - @story.errors.full_messages.each do |message|
+              %li= message
 
-= link_to 'Back', stories_path
+      = f.input :picture , as: :file
+      = f.input :header
+      = f.input :text
+      = f.input :happened , class: "flex"
+      = f.submit 'Save'
+    = link_to 'Back', stories_path
+  %div

app/views/stories/show.html.haml

@@ -1,17 +1,4 @@
-%p#notice= notice
-
-%p
-  %b Picture:
-  = @story.picture
-%p
-  %b Header:
-  = @story.header
-%p
-  %b Text:
-  = @story.text
-%p
-  %b Happened:
-  = @story.happened
+= render "inline" , story: @story
 
 = link_to 'Edit', edit_story_path(@story)
 \|