Skip to content

Implementation of new About Us page with team data and navigation(footer bar) #89

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

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

Implementation of new About Us page with team data and navigation(footer bar) #89

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ad6a65e
Fixed trailing whitespace issue in about.html.md
jsi19 May 30, 2023
5f5b681
Rebasing with main
jsi19 May 30, 2023
3c87038
Implemented team data into About Us page. Fixed formating as well
jsi19 Jun 1, 2023
192bb34
Fixed footer indentation issue. Added Tailwind CSS to section titles
jsi19 Jun 1, 2023
82d9a37
Implemented Tailwind CSS for all components except for team icon
jsi19 Jun 1, 2023
d98e972
Started implementing img_tag helper to load icon image
jsi19 Jun 1, 2023
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
3 changes: 3 additions & 0 deletions app/views/layouts/_footer.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
<div class="px-5 py-2">
<%= link_to "Privacy", page_path("privacy"), class: "footer-link" %>
</div>
<div class="px-5 py-2">
<%= link_to "About Us", page_path("about"), class: "footer-link" %>
</div>
Copy link
Member

@nathanmsmith nathanmsmith Jun 1, 2023

Choose a reason for hiding this comment

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

Mind just indenting lines 20 and 21 to match the formatting of the other <div>s here?

Copy link
Author

@jsi19 jsi19 Jun 1, 2023

Choose a reason for hiding this comment

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

Fixed!

</nav>
<div class="mt-2 flex justify-center space-x-6">
<a href="https://www.facebook.com/hotseatio" class="footer-link">
Expand Down
223 changes: 221 additions & 2 deletions app/views/pages/about.html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,222 @@
# About
<!-- About Us Section -->
<div class="section-title">
<h2>About Us</h2>
</div>
<div class="centered-content">
Our goal is to help UCLA students make informed enrollment decisions by providing UCLA enrollment trends, alerts, reviews, grades, textbooks, and more. All on one website, completely free. Made for UCLA students BY UCLA students.
</div>

This should say something important.
<!-- Founders Section -->
<div class="section-title">
<h2>Founders</h2>
</div>
<div class="centered-content">
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1zEhcr1a8Xb9VVhniOuVo51sqk8I3Tjsm')"></div>
<div class="team-details">
Nathan Smith <br>
Software Engineer @ Stripe
</div>
</div>

<div class="team-component">
<div class="team-icon"></div>
<div class="team-details">
Timothy Gu <br>
MS Computer Science @ Stanford
</div>
</div>
</div>

<!-- Our Team Section -->
<div class="section-title">
<h2>Our Team</h2>
</div>
<div class="centered-content">
<!-- LEADS -->
<div class="team-row">
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1-nLDxfv5mkBHWYJ8Yj1-UFJSL9sjfAvZ')"></div>
<div class="team-details">
Brandon Pan <br>
PM Lead <br>
</div>
</div>
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1TL4xygzAmXZzZdAd8-3yg-UoiV8no-lZ')"></div>
<div class="team-details">
Justin Quan <br>
EM Lead <br>
</div>
</div>
<!-- PMs -->
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1FiIgRPq3N2zMnW_qeWuQL4ueck12Yn_l')"></div>
<div class="team-details">
Alwena Lin <br>
PM <br>
</div>
</div>
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1iqwt1-l9jOQNt5Ym1ONeOlp3K6hF405S')"></div>
<div class="team-details">
Andrew Han <br>
PM <br>
</div>
</div>
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=187nJz7rjo05EHUVlyrWI3iz4tpwaZBIB')"></div>
<div class="team-details">
Brian Ton <br>
PM <br>
</div>
</div>

<!-- Devs -->
<div class="team-row">
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1Qzqz6Jjxvigtyvw1CKyo6nAgxjGYOdxQ')"></div>
<div class="team-details">
Jiacheng Wang <br>
Developer <br>
</div>
</div>
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1kqmK-6fEj-8JjgZ0WYdEUxOzR7kIfFSt')"></div>
<div class="team-details">
Jonathan Si <br>
Developer <br>
</div>
</div>
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1X8VgRlJPpE_JUmanf2H3CHB36DMDmvg_')"></div>
<div class="team-details">
Joycelyn Ng <br>
Developer <br>
</div>
</div>
<!-- Desginers -->
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=19-nRs0eg7F71cSw3abjd4D3UJWgX4NPC')"></div>
<div class="team-details">
Cecily Hu <br>
Designer <br>
</div>
</div>
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1OZZYNh4VokfD6PZxVm5DC7FGseuqL9Om')"></div>
<div class="team-details">
Yifei Sun <br>
Designer <br>
</div>
</div>
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1s7pysLB3C84SqXduJUkxD2rCz0865pvc')"></div>
<div class="team-details">
Elisa Fang <br>
Designer <br>
</div>
</div>

<!-- Marketers -->
<div class="team-row">
<div class="team-component">
<div class="team-icon" style="background-image: url('https://drive.google.com/uc?export=view&id=1XjDvIah8tFJET3ZZTvS5vv1UDnZPRNZK')"></div>
<div class="team-details">
Jonathan King <br>
Marketer <br>
</div>
</div>
<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>
Copy link
Member

@nathanmsmith nathanmsmith Jun 1, 2023

Choose a reason for hiding this comment

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

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?

Marketer <br>
</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>
Copy link
Member

@nathanmsmith nathanmsmith Jun 1, 2023

Choose a reason for hiding this comment

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

I don't really like this way of doing images for a couple of reasons.

  1. It requires JavaScript. We shouldn't need to use JavaScript just to show some images!
  2. 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!

Copy link
Author

@jsi19 jsi19 Jun 1, 2023

Choose a reason for hiding this comment

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

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-details">
Kylie Bach <br>
Marketer <br>
</div>
</div>
</div>
</div>

<!-- Alumni Section -->
<div class="section-title">
<h2>Alumni</h2>
</div>
<div class="centered-content">
<div class="team-row">
<h2>Coming soon</h2>
<!-- <div class="team-component">
<div class="team-icon"></div>
<div class="team-details">
First & Last Name <br>
Major & Year
</div>
</div> -->
</div>
</div>

<script>
// Hide the team icons initially
var teamIcons = document.querySelectorAll('.team-icon');
teamIcons.forEach(function(icon) {
icon.style.backgroundColor = '#ccc';
});

// Load the team icons and display them once loaded
window.addEventListener('load', function() {
teamIcons.forEach(function(icon) {
var imageUrl = icon.style.backgroundImage.replace(/^url\(["']?([^"']*)["']?\)$/i, '$1');
var image = new Image();
image.src = imageUrl;
image.addEventListener('load', function() {
icon.style.backgroundImage = 'url(' + imageUrl + ')';
});
});
});
</script>

<style>
/* CSS for the founder and team components */
.team-component {
display: inline-block;
margin: 20px;
text-align: center;
}

/* CSS for the team icons */
Copy link
Member

@nathanmsmith nathanmsmith Jun 1, 2023

Choose a reason for hiding this comment

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

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>

Copy link
Author

@jsi19 jsi19 Jun 1, 2023

Choose a reason for hiding this comment

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

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

.team-icon {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

/* Additional CSS for positioning and alignment of the content */
.centered-content {
text-align: center;
margin-bottom: 30px;
}

/* CSS for the section titles */
.section-title {
text-align: center;
margin-bottom: 10px;
font-weight: bold;
}

.section-title h2 {
font-size: 30px;
}
</style>
33 changes: 12 additions & 21 deletions db/structure.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,19 +130,6 @@ CREATE TYPE public.weekly_time_type AS ENUM (
);


--
Copy link
Member

@nathanmsmith nathanmsmith Jun 1, 2023

Choose a reason for hiding this comment

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

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!

-- Name: is_graduate(character varying); Type: FUNCTION; Schema: public; Owner: -
--

CREATE FUNCTION public.is_graduate(num character varying) RETURNS boolean
LANGUAGE plpgsql IMMUTABLE STRICT
AS $$
BEGIN
RETURN (num SIMILAR TO '%[2-9][0-9][0-9]%');
END
$$;


--
-- Name: strposrev(text, text); Type: FUNCTION; Schema: public; Owner: -
--
Expand Down Expand Up @@ -927,6 +914,18 @@ CREATE SEQUENCE public.pay_webhooks_id_seq
ALTER SEQUENCE public.pay_webhooks_id_seq OWNED BY public.pay_webhooks.id;


--
-- Name: pg_search_documents_id_seq; Type: SEQUENCE; Schema: public; Owner: -
--

CREATE SEQUENCE public.pg_search_documents_id_seq
START WITH 1
INCREMENT BY 1
NO MINVALUE
NO MAXVALUE
CACHE 1;


--
-- Name: relationships; Type: TABLE; Schema: public; Owner: -
--
Expand Down Expand Up @@ -2319,14 +2318,6 @@ ALTER TABLE ONLY public.enrollment_data
ADD CONSTRAINT fk_rails_9744b3d66e FOREIGN KEY (section_id) REFERENCES public.sections(id);


--
-- Name: relationships fk_rails_a3d77c3b00; Type: FK CONSTRAINT; Schema: public; Owner: -
--

ALTER TABLE ONLY public.relationships
ADD CONSTRAINT fk_rails_a3d77c3b00 FOREIGN KEY (user_id) REFERENCES public.users(id);


--
-- Name: sections fk_rails_ae061b0a82; Type: FK CONSTRAINT; Schema: public; Owner: -
--
Expand Down