Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: 1091 present fostered start and end date on fostered pets index page #1217

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Feat: 1091 present fostered start and end date on fostered pets index page #1217

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
caf9df6
feat: present fostered start and end date on fostered pets index page
odellmac4 Dec 8, 2024
78d5def
Refactor: present the phrase term instead of start date and end date …
odellmac4 Dec 8, 2024
a5192c4
Fix: ensure dates are in chronological order
odellmac4 Dec 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions app/views/organizations/adopter_fosterer/fostered_pets/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div data-controller="card">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5">
<% @fostered_pets.each_with_index do |fostered_pet, index| %>
<div class="col">
<div class="col-lg-5 col-md-6">
<%= link_to adopter_fosterer_fostered_pet_files_path(fostered_pet.pet, pet_id: fostered_pet.pet.id), data: { turbo_frame: "pet_files", action: "click->card#selectCard" } do %>
<div class="card h-100 bg-white border-0 shadow-sm" data-card-target="card">
<div class="card-body d-flex align-items-center">
Expand All @@ -13,7 +13,13 @@
class: 'rounded-circle',
style: "width: 100%; height: 100%; object-fit: cover;") %>
</div>
<h5 class="card-title mb-0"><%= fostered_pet.pet.name %></h5>
<h5 class="card-title mb-0 flex-grow-1" style="margin-right: 15px;"><%= fostered_pet.pet.name %></h5>
Copy link
Collaborator

@kasugaijin kasugaijin Dec 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you just use flex on this you should be able to use flex classes like justify-content-around to space these main elements evenly in the parent div https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

You should not need to use inline style here like style="margin-right: 15px;" as Bootstrap has classes for this.

It's a smell if you need to use margin right on the left hand element, AND ms-auto on the right hand element. If we're using flex, there are classes built for this.

<div class="fostered-dates ms-auto">
<div class="d-flex flex-column">
<h5 class="card-title mb-1">Term:</h5>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually prefer what you showed where you had Start date: and End date: as I think it looked better and was more descriptive!

<h5 class="mb-0"><%= fostered_pet.start_date.strftime("%m/%d/%y") %> - <%=fostered_pet.end_date.strftime("%m/%d/%y")%> </h5>
</div>
</div>
</div>
</div>
<% end %>
Expand Down
Loading