story cleanup, form, policy

app/views/stories/_form.haml

@@ -0,0 +1,17 @@
+%div
+  Story layout changes with the amount of text.
+  For short lext a wide picture is best. Otherwise square, and for
+  longer text a high picture also works.
+= simple_form_for @story do |f|
+  = f.error_notification
+
+  = f.input :picture , as: :file , label: (@story.picture.blank? ? "Add picture" : "Change picture")
+  = f.input :header
+  = f.input :text , input_html: {rows: rows(@story.text)}
+  = f.input :happened , wrapper_class: "flex mt-4 align-center"
+  .flex.justify-between.mt-6
+    %button.bg-cyan-200.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+      = f.submit 'Save'
+    = link_to  @story do
+      %button.ml-20.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+        Back

app/views/stories/edit.html.haml

@@ -1,16 +1,5 @@
-.grid.grid-cols-3
-  %div
-  %div
-    %h1 Editing story
-    = simple_form_for @story do |f|
-      = f.error_notification
-
-      = f.input :picture , as: :file , label: (@story.picture.blank? ? "Add picture" : "Change picture")
-      = f.input :header
-      = f.input :text , input_html: {rows: rows(@story.text)}
-      = f.input :happened , wrapper_class: "flex mt-4 align-center"
-      %button.mt-6.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
-        = f.submit 'Save'
-      %button.ml-20.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
-        = link_to 'Back', @story
-  %div
+.flex.justify-center
+  .column{class: "w-10/12 md:w-8/12 lg:w-5/12 xl:w-4/12"}
+    .text-2xl.font-bold.my-4
+      Edit Story
+    = render 'form'

app/views/stories/new.html.haml

@@ -1,20 +1,5 @@
-
-.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
-
-      = 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
+.flex.justify-center
+  .column{class: "w-10/12 md:w-8/12 lg:w-5/12 xl:w-4/12"}
+    .text-2xl.font-bold.my-4
+      New Story
+    = render 'form'