improving event

app/views/events/_event.haml

@@ -0,0 +1,11 @@
+%section.overflow-hidden.grid.grid-cols-1.m-5.md:m-12.lg:m-20.md:grid-cols-2
+  %div
+    = image_for( event , "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
+      %h2.text-2xl.font-bold.md:text-4xl
+        = event.name
+      %h4.text-xl.mt-10.md:text-2xl
+        = event.start_date
+      .mt-8{ prose_classes }
+        = markdown(event.text)

app/views/events/_form.html.haml

@@ -8,7 +8,9 @@
     = f.input :end_date
   = f.input :profile_id , as: :hidden
   = f.input :picture , as: :file
-  %button.mt-6.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
-    = f.submit 'Save'
-  %button.ml-20.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
-    = link_to 'Back', @story
+  .flex.justify-between
+    %button.mt-6.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+      = f.submit 'Save'
+    = link_to member_path(current_member) do
+      .mt-6.ml-20.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+        Back

app/views/events/index.html.haml

@@ -1,31 +1,12 @@
-%h1 Listing events
-
-%table
-  %thead
-    %tr
-      %th Name
-      %th Text
-      %th Start date
-      %th End date
-      %th Profile
-      %th Picture
-      %th
-      %th
-      %th
-
-  %tbody
+.flex.justify-center
+  .grid.grid-cols-4
     - @events.each do |event|
-      %tr
-        %td= event.name
-        %td= event.text
-        %td= event.start_date
-        %td= event.end_date
-        %td= event.profile
-        %td= event.picture
-        %td= link_to 'Show', event
-        %td= link_to 'Edit', edit_event_path(event)
-        %td= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' }
-
-%br
-
-= link_to 'New Event', new_event_path
+      .fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
+        =link_to event do
+          = image_for( event ,  class: "h-60 w-full object-cover")
+          %h3.py-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
+            = event.name
+        %div.h-full
+          .p-5.text-center
+            .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
+              = shorten markdown(event.text)

app/views/events/show.html.haml

@@ -1,24 +1,3 @@
-%p#notice= notice
+= render "event" , event: @event
 
-%p
-  %b Name:
-  = @event.name
-%p
-  %b Text:
-  = @event.text
-%p
-  %b Start date:
-  = @event.start_date
-%p
-  %b End date:
-  = @event.end_date
-%p
-  %b Profile:
-  = @event.profile
-%p
-  %b Picture:
-  = @event.picture
-
-= link_to 'Edit', edit_event_path(@event)
-\|
-= link_to 'Back', events_path
+= render "profiles/profile" , profile: @event.profile , header: "About the teacher"