From 4f63f92e988e2912393ef7991bcd1b6bee1f9dca Mon Sep 17 00:00:00 2001
From: Jason Wang <jason.wang7517@gmail.com>
Date: Fri, 20 Dec 2024 19:09:47 -0800
Subject: [PATCH] initial commit;

---
 .../staff/pets/tabs/_fosters.html.erb         | 38 +++++++++----------
 .../staff/pets/tabs/partials/_foster.html.erb | 17 +++++----
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/app/views/organizations/staff/pets/tabs/_fosters.html.erb b/app/views/organizations/staff/pets/tabs/_fosters.html.erb
index c6c87c619..18bf0c4f9 100644
--- a/app/views/organizations/staff/pets/tabs/_fosters.html.erb
+++ b/app/views/organizations/staff/pets/tabs/_fosters.html.erb
@@ -1,24 +1,24 @@
-<div id="fosters_tab_table" class="card">
+<div id="fosters_tab_table" class="card col-6 col-xl-12">
   <div class="card-body px-5">
-    <% #headers %>
-    <div class="row border-bottom pb-3 pt-1">
-      <div class="col-4 fw-semibold">
-        <%= t("organizations.staff.pets.show.fosterer")%>
+    <% fosters.each do |foster|%> 
+      <% #headers %>
+      <div class="row border-bottom pb-3 pt-1 d-none d-xl-flex">
+        <div class="col-4 fw-semibold">
+          <%= t("organizations.staff.pets.show.fosterer")%>
+        </div>
+        <div class="col-2 fw-semibold">
+          <%= t("organizations.staff.pets.show.status")%>
+        </div>
+        <div class="col-2 fw-semibold">
+          <%= t("organizations.staff.pets.show.start_date")%>
+        </div>
+        <div class="col-2 fw-semibold">
+          <%= t("organizations.staff.pets.show.end_date")%>
+        </div>
+        <div class="col-2 fw-semibold">
+        </div>
       </div>
-      <div class="col-2 fw-semibold">
-        <%= t("organizations.staff.pets.show.status")%>
-      </div>
-      <div class="col-2 fw-semibold">
-        <%= t("organizations.staff.pets.show.start_date")%>
-      </div>
-      <div class="col-2 fw-semibold">
-        <%= t("organizations.staff.pets.show.end_date")%>
-      </div>
-      <div class="col-2 fw-semibold">
-      </div>
-    </div>
-
-    <% fosters.each do |foster|%>
+    
       <%= render 'organizations/staff/pets/tabs/partials/foster', foster: foster %>
     <% end %>
   </div>
diff --git a/app/views/organizations/staff/pets/tabs/partials/_foster.html.erb b/app/views/organizations/staff/pets/tabs/partials/_foster.html.erb
index ab06fc1af..df012f2a1 100644
--- a/app/views/organizations/staff/pets/tabs/partials/_foster.html.erb
+++ b/app/views/organizations/staff/pets/tabs/partials/_foster.html.erb
@@ -1,17 +1,19 @@
-<div class="row pt-3" id="<%= dom_id(foster) %>">
+<div class="row flex-column flex-xl-row py-2 align-items-start" id="<%= dom_id(foster) %>">
   <!-- fosterer -->
-  <div class="align-middle col-4">
+  <div class="col-4 d-flex mb-4">
     <%= link_to link_to "PLACEHOLDER FOR FORM ANSWERS", nil,
                 class: "link-underline link-underline-opacity-0" %>
   </div>
+
   <!-- status -->
-  <div class="align-middle col-2">
+  <div class="col-2 d-flex mb-4">
     <div class="badge <%= status_classes(foster.status) %>">
       <%= foster.status.to_s.titleize %>
     </div>
   </div>
+
   <!-- start date -->
-  <div class="align-middle col-2">
+  <div class="col-2 d-flex mb-2">
     <%= turbo_frame_tag dom_id(foster, :start_date) do %>
       <%= link_to foster.start_date.strftime("%m/%d/%Y"),
                   edit_staff_manage_foster_path(foster),
@@ -19,15 +21,16 @@
     <% end %>
   </div>
   <!-- end date -->
-  <div class="align-middle col-2">
+  <div class="col-2 d-flex mb-2">
     <%= turbo_frame_tag dom_id(foster, :end_date) do %>
       <%= link_to foster.end_date.strftime("%m/%d/%Y"),
                   edit_staff_manage_foster_path(foster),
                   class: "btn btn-outline-primary mb-2 px-2 py-1" %>
     <% end %>
   </div>
-  <!-- delete -->
-  <div class="align-middle col-2">
+
+    <!-- delete -->
+  <div class="col-2 d-flex align-items-start">
     <%= button_to t('general.delete'), staff_manage_foster_path(foster),
                   method: :delete,
                   class: "btn btn-outline-danger px-2 py-1",