first commit, largely copied volunteers

app/views/stories/_form.haml

@@ -0,0 +1,20 @@
+%div
+  Story layout changes with the amount of text.
+  For short text 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
+  .flex.h-16.mt-2
+    = image_tag(@story.picture_url , class: "align-middle mr-2") if @story.picture?
+    .w-full= f.input :picture , as: :file , 
+    label: (@story.picture.blank? ? "Add picture" : "Change picture")
+    = f.hidden_field :picture_cache
+  = f.input :header
+  = render "merged/form/editor" , object: @story , field: :text, form: f
+  = 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 member_path(current_member) do
+      %button.ml-20.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+        Back

app/views/stories/_half.haml

@@ -0,0 +1,13 @@
+%section.overflow-hidden.grid.grid-cols-1.m-5.md:m-12.lg:m-20.md:grid-cols-2
+  =link_to someones_path( story ) , {class: :glightbox } do
+    = picture_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, by
+        = link_to story.member.name , main_app.member_path(story.member) , class: :underline
+      .mt-8{ prose_classes }
+        = markdown(story.text)

app/views/stories/_pic.haml

@@ -0,0 +1,15 @@
+%section.flex.justify-center.p-8.flex-col.md:flex-row.m-20
+  .flex.items-center.h-40.md:h-60.lg:h-96.w-full.overflow-hidden{class: "lg:w-2/3"}
+    =link_to someones_path( story ) , {class: :glightbox } do
+      = picture_for(story ,"object-cover")
+  .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-1/3"}
+    .flex-1
+      .text-center
+        %h2.text-4xl.font-bold.text-center.mb-4.lg:mb-8
+          = story.header
+        %h4.text-xl.mt-4.lg:mt-8.md:text-2xl
+          = distance_of_time_in_words_to_now story.happened
+          ago, by
+          = link_to story.member.name , main_app.member_path(story.member) , class: :underline
+        .mt-3{ prose_classes }
+          = markdown(story.text)

app/views/stories/_text.haml

@@ -0,0 +1,13 @@
+%section.p-20.my-20
+  .flex.justify-center
+    .max-w-prose.text-center
+      %h1.mb-10.text-2xl.font-bold.tracking-tight.sm:text-4xl
+        = story.header
+      .text-xl.pb-6{ prose_classes }
+        = distance_of_time_in_words_to_now story.happened
+        ago, by
+        = link_to story.member.name , main_app.member_path(story.member) , class: :underline
+  .max-w-full.mt-4.gap-16.columns-1.md:columns-2.lg:columns-3.xl:columns-4{ prose_classes  }
+    =link_to someones_path( story ) , {class: :glightbox } do
+      = picture_for( story , "h-56 w-full object-cover sm:h-full")
+    = markdown(story.text)

app/views/stories/edit.html.haml

@@ -0,0 +1,7 @@
+%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
+%script{:src => "https://cdn.jsdelivr.net/npm/marked/marked.min.js"}
+.flex.justify-center
+  .column{class: "w-10/12 md:w-8/12 lg:w-7/12 xl:w-6/12"}
+    .text-2xl.font-bold.my-4
+      Edit Story
+    = render 'form'

app/views/stories/index.html.haml

@@ -0,0 +1,21 @@
+= paginate @stories
+
+.flex.justify-end.mr-10
+  = sort_link(@q, :happened ,class: 'flex flex-nowrap text-md')
+  .border-r-4.mx-4
+  = sort_link(@q, :created_at , class: 'flex flex-nowrap text-md')
+
+- @stories.each do |story|
+  = render_story(story)
+
+%br
+
+.flex.ml-20
+  = link_to new_story_path do
+    %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+      New Story
+
+:javascript
+    document.addEventListener("DOMContentLoaded", function(event) {
+      const lightbox = GLightbox({  });
+    });

app/views/stories/new.html.haml

@@ -0,0 +1,7 @@
+%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
+%script{:src => "https://cdn.jsdelivr.net/npm/marked/marked.min.js"}
+.flex.justify-center
+  .column{class: "w-10/12 md:w-8/12 lg:w-7/12 xl:w-6/12"}
+    .text-2xl.font-bold.my-4
+      New Story
+    = render 'form'

app/views/stories/show.html.haml

@@ -0,0 +1,9 @@
+= render_story @story
+
+.mx-20.flex.justify-between
+  = link_to edit_story_path(@story) do
+    %button.mt-6.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+      Edit
+  = link_to stories_path do
+    %button.mt-6.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+      Back