first gallery version

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.
+  = 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?
+      = f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
+      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,11 @@
+.group.h-96.items-end.relative.overflow-hidden
+  = image_for( picture , "inset-0 h-full w-full object-fit hover:scale-110 ease-in duration-700")
+  -unless picture.text.blank?
+    .absolute.mb-10.p-2.tracking-widest.text-left.text-black{class: "max-w-2/3"}
+      %div.transition-colors.group-hover:bg-black.group-hover:text-white.text-left.bg-gray-100
+        .m-1.p-1.text-xs
+          = picture.text
+          = picture.text
+  %div.bg-cyan-200
+    %div Torsten
+    %div some date

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,17 @@
+= paginate @pictures
+
+.flex.justify-end
+  = 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')
+
+.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-8.md:gap-12.lg:gap-16
+  - @pictures.each do |picture|
+    = render picture , picture: picture
+
+%br
+
+.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

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