some picture polishing

app/controllers/pictures_controller.rb

@@ -50,6 +50,7 @@ class PicturesController < ApplicationController
     end
 
     def picture_params
-      params.require(:picture).permit(:picture,:picture_cache ,:text, :member_id)
+      params.require(:picture).permit(:picture,:picture_cache ,:text,
+                            :happened , :member_id)
     end
 end

app/models/picture.rb

@@ -4,6 +4,6 @@ class Picture < ApplicationRecord
   mount_uploader :picture, PictureUploader
 
   validates :text, length: { maximum: 80 }
-
+  validates :happened, presence: true
 
 end

app/views/members/show.html.haml

@@ -16,12 +16,16 @@
   .flex.justify-around.ml-20
     = link_to edit_member_path(@member) do
       %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
-        Edit
+        Edit Profile
 
     = 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
 
+    = 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
+
     = form_tag( destroy_member_session_path , {method: :delete  } ) do
       %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400{type: :submit}
         Sign out
@@ -32,3 +36,12 @@
     = link_to edit_story_path(story) do
       %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
         Edit Story
+
+.mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-8.md:gap-12.lg:gap-16
+  - @member.pictures.each do |picture|
+    %div
+      = render picture , picture: picture
+      .flex.justify-around
+        = link_to edit_picture_path(picture) do
+          %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+            Edit Picture

app/views/pictures/_picture.haml

@@ -1,11 +1,10 @@
-.group.h-96.items-end.relative.overflow-hidden
+.group.relative.overflow-hidden
-  = image_for( picture , "inset-0 h-full w-full object-fit hover:scale-110 ease-in duration-700")
+  .flex.justify-between
+    .ml-2=picture.member.name
+    .mr-2
+      = distance_of_time_in_words_to_now picture.happened
+      ago
+  = image_for( picture , "inset-0 h-full w-full object-fit hover:scale-105 ease-in duration-500")
   -unless picture.text.blank?
-    .absolute.mb-10.p-2.tracking-widest.text-left.text-black{class: "max-w-2/3"}
+    .absolute.bottom-0.left-0.right-0.px-4.pb-1.bg-gray-800.opacity-70.transition-colors.group-hover:bg-black.group-hover:opacity-100
-      %div.transition-colors.group-hover:bg-black.group-hover:text-white.text-left.bg-gray-100
+      .text-center.mt-2.text-white= picture.text
-        .m-1.p-1.text-xs
-          = picture.text
-          = picture.text
-  %div.bg-cyan-200
-    %div Torsten
-    %div some date

app/views/pictures/index.html.haml

@@ -1,11 +1,11 @@
 = paginate @pictures
 
-.flex.justify-end
+.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')
 
-.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-8.md:gap-12.lg:gap-16
+.mx-20.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
 

app/views/stories/index.html.haml

@@ -1,6 +1,6 @@
 = paginate @stories
 
-.flex.justify-end
+.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')