first commit, largely copied volunteers

app/views/pictures/_form.haml

@@ -0,0 +1,18 @@
+%div
+  Pictures may have a small text, that will be diplayed on top of the
+  picure. The Picture box is landscape with ratio 3/4.
+  = simple_form_for @picture do |f|
+    = f.error_notification
+    .flex.h-16.mt-2
+      = image_tag(@picture.picture_url , class: "align-middle mr-2") if @picture.picture?
+      .w-full= f.input :picture , as: :file ,
+      label: (@picture.picture.blank? ? "Add picture" : "Change picture")
+      = f.hidden_field :picture_cache
+    = f.input :text , as: :text , input_html: { rows: 2 }
+    = 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/pictures/_picture.haml

@@ -0,0 +1,13 @@
+.group.relative.overflow-hidden
+  .flex.justify-between
+    .ml-2= link_to picture.member.name , main_app.member_path(picture.member) , class: :underline
+    .mr-2
+      = distance_of_time_in_words_to_now picture.happened
+      ago
+  .h-0.overflow-hidden.relative{class: "pt-[75%]"}
+    =link_to someones_path( picture ) , {class: :glightbox ,
+        "data-glightbox" => "title: #{picture.text}" } do
+      = picture_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
+  -unless picture.text.blank?
+    .absolute.bottom-0.leaving-0.right-0.px-4.pb-1.bg-gray-800.opacity-70.transition-colors.group-hover:bg-black.group-hover:opacity-100
+      .text-center.mt-2.text-white= picture.text

app/views/pictures/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 Picture
+    = render 'form'

app/views/pictures/index.html.haml

@@ -0,0 +1,21 @@
+
+= paginate @pictures
+
+.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')
+
+.mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.2xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
+  - @pictures.each do |picture|
+    = render picture , picture: picture
+
+.flex.ml-20
+  = link_to new_picture_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 Picture
+
+:javascript
+    document.addEventListener("DOMContentLoaded", function(event) {
+      const lightbox = GLightbox({  });
+    });

app/views/pictures/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 Picture
+    = render 'form'

app/views/pictures/show.html.haml

@@ -0,0 +1,11 @@
+.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-8.md:gap-12.lg:gap-16
+  %div
+  = render @picture , picture: @picture
+
+.mx-20.flex.justify-between
+  = link_to edit_picture_path(@picture) 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 pictures_path do
+    %button.mt-6.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+      Back