first commit, largely copied volunteers

app/views/members/edit.html.haml

@@ -0,0 +1,26 @@
+%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.m-5.m-5.md:m-12.lg:m-20
+  .flex.flex-col.text-center
+    %h1.text-4xl Edit your profile
+
+.flex.justify-center.m-5.m-5.md:m-12.lg:m-20
+  .flex.flex-col.text-center{class: "w-full md:w-10/12"}
+    The Picture box is landscape with ratio 3/4.
+    = simple_form_for @member  do |f|
+      .grid.grid-cols-1.md:grid-cols-2.gap-10
+        = render "merged/form/editor" , object: @member , field: :bio, form: f
+        .info.mr-8
+          .text-red-700= f.error_notification
+          = f.input :name
+          .flex.h-16.mt-2.col-span-2
+            = image_tag(@member.picture_url , class: "align-middle mr-4") if @member.picture?
+            .w-full= f.input :picture , as: :file ,
+            label: (@member.picture.blank? ? "Add picture" : "Change picture")
+            = f.hidden_field :picture_cache
+          .flex.justify-center.actions.m-10
+            = f.button :button, "Update", class: button_classes + " bg-cyan-200"
+            = link_to  member_path(@member) do
+              %button.ml-10{type: :submit, class: button_classes}
+                Back

app/views/members/index.html.haml

@@ -0,0 +1,20 @@
+= paginate @members
+
+.flex.justify-center.m-8.mx-5.md:mx-12.lg:mx-20
+  .flex.flex-col.text-center
+    %h1.text-4xl Current Makerspace at Hub Feenix
+
+.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
+  - @members.each do |member|
+    .overflow-hidden.border.border-gray-100.shadow-sm
+      .h-0.overflow-hidden.relative{class: "pt-[125%]"}
+        =link_to member , class: "absolute h-60 top-0 left-0 w-full h-full" do
+          = picture_for( member ,  class: "object-cover")
+      %h3.pt-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
+        = member.name
+      .p-2.text-xs.bg-gray-50.text-black.font-bold.text-center
+        = member.name
+      %div.h-full
+        .p-5.text-center
+          .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
+            = markdown shorten(member.bio)

app/views/members/show.html.haml

@@ -0,0 +1,57 @@
+.px-4.py-16.mx-auto.sm:max-w-xl.md:max-w-full.lg:max-w-screen-xl.md:px-24.lg:px-8.lg:py-20
+  .flex.flex-col.max-w-screen-lg.overflow-hidden.bg-white.border.rounded.shadow-sm.lg:flex-row.sm:mx-auto
+    .relative{:class => "lg:w-1/2"}
+      -if @member.picture_url
+        = image_tag @member.picture_url, class: "object-cover w-full lg:absolute h-80 lg:h-full"
+    .flex.flex-col.justify-center.p-8.lg:p-16.lg:pl-10{:class => "lg:w-1/2"}
+      %div
+        %p.inline-block.px-3.py-px.mb-4.text-xs.font-semibold.tracking-wider.text-teal-900.uppercase.rounded-full.bg-teal-accent-400
+          = @member.name
+      %h5.mb-3.text-3xl.font-extrabold.leading-none.sm:text-4xl
+        = @member.name
+      .mb-8.text-gray-800
+        .prose= markdown(@member.bio)
+
+- if current_member == @member
+  .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 Profile
+
+    = link_to edit_member_registration_path do
+      %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+        Change Password
+
+    = 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
+
+- @member.stories.each do |story|
+  =render_story( story )
+  - if current_member == @member
+    .flex.justify-around
+      = 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.xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
+  - @member.pictures.each do |picture|
+    %div
+      = render picture , picture: picture
+      - if current_member == @member
+        .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
+:javascript
+  document.addEventListener("DOMContentLoaded", function(event) {
+    const lightbox = GLightbox({  });
+  });