lightbox for stories too

app/controllers/members_controller.rb

@@ -3,7 +3,7 @@ class MembersController < ApplicationController
 
   # GET /members
   def index
-    @members = Member.public_scope.order(:name).page params[:page]
+    @members = Member.visible_scope.order(:name).page params[:page]
   end
 
   # GET /members/1

app/models/member.rb

@@ -1,6 +1,6 @@
 class Member < ApplicationRecord
 
-  def self.public_scope
+  def self.visible_scope
     where.not(confirmed_at: nil).where.not(picture: nil)
   end
 

app/views/stories/_half.haml

@@ -1,5 +1,5 @@
 %section.overflow-hidden.grid.grid-cols-1.m-5.md:m-12.lg:m-20.md:grid-cols-2
-  %div
+  =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

app/views/stories/_pic.haml

@@ -1,6 +1,7 @@
 %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"}
-    = picture_for(story ,"object-cover")
+    =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

app/views/stories/_text.haml

@@ -8,5 +8,6 @@
         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  }
-    = picture_for( story , "h-56 w-full object-cover sm:h-full")
+    =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/index.html.haml

@@ -14,3 +14,8 @@
   = 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({  });
+    });