Implementation of new About Us page with team data and navigation(footer bar)#89
Implementation of new About Us page with team data and navigation(footer bar)#89
Conversation
nathanmsmith
left a comment
nathanmsmith
left a comment
There was a problem hiding this comment.
Great start! I've added a few comments on how we can better load images and style the page. Let me know if I can help with anything.
app/views/layouts/_footer.html.erb
Outdated
| </div> | ||
| <div class="px-5 py-2"> | ||
| <%= link_to "About Us", page_path("about"), class: "footer-link" %> | ||
| </div> |
There was a problem hiding this comment.
Mind just indenting lines 20 and 21 to match the formatting of the other <div>s here?
| text-align: center; | ||
| } | ||
|
|
||
| /* CSS for the team icons */ |
There was a problem hiding this comment.
We should be using TailwindCSS instead of defining custom styles here! Tailwind helps us by allowing us to more easily maintain our CSS and keep us on a standardized design framework without custom margin sizes, font weights, etc.
All of these CSS classes should be inlined using TailwindCSS classes. If you find yourself repeating yourself more than once, it might make sense to extract out the component into a Rails/ERB partial. Let me know if you need help here and I'm happy to go over it with you!
Here's an example for section-title. Note that I think you can remove the wrapping <div>.
<h2 class="text-center mb-10 font-bold text-2xl">Founders</h2>There was a problem hiding this comment.
I have added inline TailwindCSS for all components except for the team icon component as I am currently trying to figure out the img_tag first
| ); | ||
|
|
||
|
|
||
| -- |
There was a problem hiding this comment.
These changes are unrelated. I think they should go away if you run rails db:migrate. You can also git rm this file to make sure it doesn't show up in your PR!
| </div> | ||
| </div> | ||
| <div class="team-component"> | ||
| <div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1nCmo49fj2mZDd_MXFDBPi9o4-UK8ryiv')"></div> |
There was a problem hiding this comment.
I don't really like this way of doing images for a couple of reasons.
- It requires JavaScript. We shouldn't need to use JavaScript just to show some images!
- All of the images are host on Google Drive. What happens if there are Google Drive issues in the future and these images are deleted?
Instead what I'd do is download each image, crop them to a standard size (maybe like 500x500?), compress them with ImageOptim to get them down to a manageable file size, create a new public/images/team/ directory, put all of the optimized photos in there, and load them via Rails' image_tag helper. Let me know if you need help here!
There was a problem hiding this comment.
I believe I have figured out the image_tag but the only thing now is that the images are too big, no matter how much of the tailwind css I change. I have not cropped them yet so maybe that is the issue. Will continue working on it soon
| <div class="team-component"> | ||
| <div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1nhOAeFLPEP1-gccQykSnJJgdU7KNuuxu')"></div> | ||
| <div class="team-details"> | ||
| Katherine Chan <br> |
There was a problem hiding this comment.
Generally we only want to use <br>s in text, not for styling like this. Mind putting each line in a <div> and then using Tailwind to style?
2 participants
Description
Implemented new About Us page with brief description of Hotseat along with founders/rest of team. Each person on team is shown with an icon picture of themselves, along with their name and position on Hotseat.
Added navigation to footer as well
Deployment
Added screenshots as visuals