adding teacher profiles

app/views/devise/registrations/new.html.haml

@@ -9,7 +9,7 @@
         = f.label :name, class: "block font-bold mb-2 text-gray-700 text-sm"
         = f.text_field :name,
           autocomplete: "name",
-          placeholder: "Pekka Juustonen",
+          placeholder: "Joona Virtanen",
           class: "appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none shadow focus:shadow-outline"
       .mb-4
         = f.label :email, class: "block font-bold mb-2 text-gray-700 text-sm"

app/views/members/index.html.haml

@@ -1,25 +1,16 @@
+= paginate @members
 .flex.justify-center
 
-  %h1 Listing members
-
-  %table
-    %thead
-      %tr
-        %th Name
-        %th Public
-        %th
-        %th
-        %th
-
-    %tbody
-      - @members.each do |member|
-        %tr
-          %td= member.name
-          %td= member.public
-          %td= link_to 'Show', member
-          %td= link_to 'Edit', edit_member_path(member)
-          %td= link_to 'Destroy', member, method: :delete, data: { confirm: 'Are you sure?' }
-
-  %br
-
-  = link_to 'New Member', new_member_path
+  .grid.grid-cols-4
+    - @members.each do |member|
+      .fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
+        =link_to member do
+          = image_for( member ,  class: "h-60 w-full 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
+            = stayed member
+        %div.h-full
+          .p-5.text-center
+            .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
+              = shorten markdown(member.bio)

app/views/members/show.html.haml

@@ -23,6 +23,15 @@
     = 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
+    - if @member.teacher
+      = link_to edit_teacher_path(@member.teacher) do
+        %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+          Edit teacher profile
+    -else
+      = link_to new_teacher_path do
+        %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+          Create teacher profile
+
     .grid.grid-cols-3.gap-4
       -@member.entities.each do |entity|
         %div= entity.type

app/views/teachers/_form.html.haml

@@ -0,0 +1,13 @@
+= simple_form_for @teacher do |f|
+  = f.error_notification
+
+  = f.input :name
+  = f.input :bio
+  = f.input :picture , as: :file , label: (@teacher.picture.blank? ? "Add picture" : "Change picture (optional)")
+
+  .flex.justify-between.mt-4
+    %button.bg-cyan-200{class: button_classes}
+      = f.submit 'Save'
+
+    %button.bg-cyan-200{class: button_classes}
+      = link_to 'Cancel', teachers_path

app/views/teachers/edit.html.haml

@@ -0,0 +1,4 @@
+.flex.justify-center
+  .column
+    .text-xl.m-4 Edit your teacher profile
+    = render 'form'

app/views/teachers/index.html.haml

@@ -0,0 +1,16 @@
+= paginate @teachers
+.flex.justify-center
+
+  .grid.grid-cols-4
+    - @teachers.each do |teacher|
+      .fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
+        =link_to teacher do
+          = image_for( teacher ,  class: "h-60 w-full object-cover")
+          %h3.pt-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
+            = teacher.name
+          .p-2.text-xs.bg-gray-50.text-black.font-bold.text-center
+            = stayed teacher
+        %div.h-full
+          .p-5.text-center
+            .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
+              = shorten markdown(teacher.bio)

app/views/teachers/new.html.haml

@@ -0,0 +1,4 @@
+.flex.justify-center
+  .column
+    .text-xl.m-4 Create your teacher profile
+    = render 'form'

app/views/teachers/show.html.haml

@@ -0,0 +1,10 @@
+.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 @teacher.picture_url
+        = image_tag @teacher.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"}
+      %h5.mb-3.text-3xl.font-extrabold.leading-none.sm:text-4xl
+        = @teacher.name
+      .mb-8.text-gray-800
+        .prose= markdown(@teacher.bio)