Issue 1293: Add a card for mobile (#1295)

* initial commit;

* repurposing existing partial files

* removing name

* adding new line

app/views/organizations/staff/pets/tabs/_fosters.html.erb

@@ -1,25 +1,9 @@
-<div id="fosters_tab_table" class="card">
-  <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")%>
-      </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 id="fosters_tab_table">
+  <%# Table layout %>
+  <div class="d-flex flex-wrap justify-content-center">
+    <%= render "organizations/staff/pets/tabs/partials/foster_table", fosters: fosters %>
+  </div>
+  <div class="d-xl-none d-flex flex-wrap">
+    <%= render 'organizations/staff/pets/tabs/partials/foster_cards', fosters: fosters %>
   </div>
 </div>

app/views/organizations/staff/pets/tabs/partials/_foster_cards.html.erb

@@ -0,0 +1,54 @@
+<% fosters.each do |foster| %>
+  <%# Grid cell %>
+  <div class="col-lg-4 col-md-6 p-0">
+    <%# Card %>
+    <div class="card card-hover m-4" style='overflow: hidden'>
+      <%# Card body %>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">
+          <ul class="list-group list-group-flush d-flex flex-column justify-content-between">
+            <li class="list-group-item">
+              <span>Fosterer:</span>
+              <div>
+                <%= link_to foster.person.full_name, staff_person_form_submissions_path(foster.person)%>
+              </div>
+            </li>
+            <li class="list-group-item">
+              <div class="badge <%= status_classes(foster.status) %>">
+                <%= foster.status.to_s.titleize %>
+              </div>
+            </li>
+            <li class="list-group-item">
+              <span>Start date:</span>
+              <%= turbo_frame_tag dom_id(foster, :start_date) do %>
+                <%= link_to foster.start_date.strftime("%m/%d/%Y"),
+                  edit_staff_manage_foster_path(foster, page: params[:page]),
+                  class: "btn btn-outline-primary mb-2"
+                %>
+              <% end %>
+            </li>
+            <li class="list-group-item">
+              <span>End date:</span>
+              <%= turbo_frame_tag dom_id(foster, :end_date) do %>
+                <%= link_to foster.end_date.strftime("%m/%d/%Y"),
+                  edit_staff_manage_foster_path(foster, page: params[:page]),
+                  class: "btn btn-outline-primary mb-2"
+                %>
+              <% end %>
+            </li>
+            <li class="list-group-item d-flex justify-content-end">
+              <%= button_to t('general.delete'),
+                staff_manage_foster_path(foster, page: params[:page]),
+                method: :delete,
+                class: "btn btn-outline-danger",
+                data: {
+                  turbo_confirm: "Click OK to delete this foster."
+                }
+              %>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+<% end %>

app/views/organizations/staff/pets/tabs/partials/_foster_table.html.erb

@@ -0,0 +1,20 @@
+<div class="card d-none d-xl-block mb-4 flex-grow-1 w-100">
+  <div class="card-body px-5">
+    <table class="table mb-0 text-nowrap table-hover table-centered">
+      <thead>
+        <tr>
+          <th scope="col">Fosterer</th>
+          <th scope="col">Status</th>
+          <th scope="col">Start Date</th>
+          <th scope="col">End Date</th>
+          <th scope="col"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% fosters.each do |foster|%>
+          <%= render "organizations/staff/pets/tabs/partials/foster_table_row", foster: foster %>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>

app/views/organizations/staff/pets/tabs/partials/_foster_table_row.html.erb

@@ -0,0 +1,44 @@
+<tr>
+  <!-- fosterer -->
+  <td class="w-20 align-middle">
+    <%= link_to foster.person.full_name, staff_person_form_submissions_path(foster.person)%>
+  </td>
+
+  <!-- status -->
+  <td class="w-20 align-middle">
+    <div class="badge <%= status_classes(foster.status) %>">
+      <%= foster.status.to_s.titleize %>
+    </div>
+  </td>
+  <!-- start date -->
+  <td class="w-20 align-middle">
+    <%= turbo_frame_tag dom_id(foster, :start_date) do %>
+      <%= link_to foster.start_date.strftime("%m/%d/%Y"),
+        edit_staff_manage_foster_path(foster, page: params[:page]),
+        class: "btn btn-outline-primary"
+      %>
+    <% end %>
+  </td>
+  <!-- end date -->
+  <td class="w-20 align-middle">
+    <%= turbo_frame_tag dom_id(foster, :end_date) do %>
+      <%= link_to foster.end_date.strftime("%m/%d/%Y"),
+        edit_staff_manage_foster_path(foster, page: params[:page]),
+        class: "btn btn-outline-primary"
+      %>
+    <% end %>
+  </td>
+  <!-- buttons -->
+  <td class="w-20 align-middle">
+    <div class="d-flex justify-content-end">
+      <%= button_to t('general.delete'),
+        staff_manage_foster_path(foster, page: params[:page]),
+        method: :delete,
+        class: "btn btn-outline-danger",
+        data: {
+          turbo_confirm: "Click OK to delete this foster."
+        }
+      %>
+    </div>
+  </td>
+</tr>