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

Feature:-About Page Redesign #270 #403

Draft
wants to merge 14 commits into
base: main
Choose a base branch
from
Draft

Feature:-About Page Redesign #270 #403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
69abece
Redign About Page
vernfongchao Jan 14, 2023
0559200
remove all but montserrat regular
vernfongchao Jan 16, 2023
f8eae6b
change fontSize span
vernfongchao Jan 16, 2023
233720a
remove WET css code on page container component
vernfongchao Jan 16, 2023
6a500cc
add marginTop about 64px
vernfongchao Jan 16, 2023
986b8df
merge with main
vernfongchao Jan 18, 2023
3878376
refractored from style components to css
vernfongchao Jan 19, 2023
d9c9de7
-m
vernfongchao Jan 19, 2023
7eee5fe
remove about us header
vernfongchao Jan 19, 2023
3bf16ce
fix margins on number section
vernfongchao Jan 20, 2023
fbb22a5
fix image size
vernfongchao Jan 22, 2023
0e35357
fixed footer position
vernfongchao Jan 22, 2023
7c8118a
removed unused files
vernfongchao Jan 22, 2023
c582ca2
removed width typo from about.scss file
vernfongchao Jan 25, 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
Binary file added client/src/assets/fonts/Montserrat-Regular.otf
View file
Open in desktop
Binary file not shown.
Binary file added client/src/assets/images/abouttree.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions client/src/components/App/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -498,3 +498,9 @@ a.btn.disabled, fieldset:disabled a.btn {
.text-center {
text-align: center !important;
}

@font-face {
font-family: 'Montserrat';
src: local('Montserrat'),
url('../../assets/fonts/Montserrat-Regular.otf') format('truetype');
}
13 changes: 13 additions & 0 deletions client/src/components/Button/Green.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import styled from '@emotion/styled';

export const GreenButton = styled.button((props) => ({
background: '#3fab45',
color: 'white',
fontSize: '1.75rem',
border: 'none',
borderRadius: '.5rem',
...props.styles,
}));

export default GreenButton;
42 changes: 42 additions & 0 deletions client/src/components/Contact/Affiliate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';

export const Affiliates = (props) => {
const affiliates = [
{
city: 'Alameda',
link: 'https://www.alamedaca.gov/Departments/Public-Works-Department/Street-Trees',
logo: 'https://www.acpwa.org/acpwa-assets/img/pwa-logo-2color-2.png',
},
{
city: 'Oakland',
link: 'https://www.oaklandca.gov/services/oak311',
logo: 'https://cao-94612.s3.us-west-2.amazonaws.com/resources/wj_city_pw_logo_black_OL.jpg',
},
{
city: 'San Francisco',
link: 'https://friendsoftheurbanforest.formtitan.com/f0a646a51519754097160#/',
logo: 'https://static.wixstatic.com/media/e4f6ab_cc7774e849d1432f88e48f2cbfa3f2af~mv2.png/v1/fill/w_240,h_216,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/FUF%20logo_rgb.png',
},
{
city: 'San Francisco',
link: 'https://sf311.org/services/tree-maintenance',
logo: 'https://www.sfpublicworks.org/sites/default/files/pwlogo_0.png',
},
];

return (
<>
{affiliates?.map((affiliate) => (
<a
key={affiliate.link}
href={affiliate.link}
target="_blank"
rel="noopener noreferrer"
>
<img src={affiliate.logo} alt="affiliates" />
</a>
))}
{props.children}
</>
);
};
1 change: 1 addition & 0 deletions client/src/components/Contact/Index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Affiliate';
202 changes: 155 additions & 47 deletions client/src/pages/About/About.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,170 @@
import React from 'react';
import './About.scss';
import { Affiliates } from '@/components/Contact/Index';
import { Footer } from '@/components/Footer/Footer';
import Contacts from '@/pages/Contact/Contacts';
import Affiliates from '@/pages/Contact/Affiliates';
import tree from '../../assets/images/abouttree.jpg';
import { GreenButton } from '@/components/Button/Green';

const About = () => {
const affiliates = [
{
city: 'Alameda',
links: {
'Alameda Public Works':
'https://www.alamedaca.gov/Departments/Public-Works-Department/Street-Trees',
},
},
{
city: 'Oakland',
links: {
'Oakland Public Works': 'https://www.oaklandca.gov/services/oak311',
},
},
{
city: 'San Francisco',
links: {
'Friends of the Urban Forest':
'https://friendsoftheurbanforest.formtitan.com/f0a646a51519754097160#/',
'San Francisco Public Works':
'https://sf311.org/services/tree-maintenance',
},
},
];
import './About.scss';

const About = () => {
return (
<div className="about">
<div>
<div className="about__text">
Water The Trees is a platform that crowd sources tree planting and
maintenance.
<div className="about__main">
<div className="about__main__section">
<div className="about__main__section__sub">
<h1>
We are connecting our forest{' '}
<span className="about__main__section__green">
to our digital world
</span>
</h1>
</div>
<div
style={{ display: 'flex', justifyContent: 'flex-end' }}
className="about__main__section__sub"
>
<p>
Welcome to Water the Trees, a platform that crowd sources tree
planting and maintenance. We are an open source project run by
tree planting volunteers.
</p>
</div>
</div>
<div className="about__main__section__image">
<img src={tree} alt="tree" />
</div>
<div className="about__main__section">
<div className="about__main__section__sub">
<h1>
Together we can{' '}
<span className="about__main__section__green">
map out the world
</span>
</h1>
</div>
<div className="about__main__section__sub">
<h2>Vision</h2>
<p>
Crowdsource the planting and maintenance of our world's tree to
quickly mitigate climate change.
</p>
<h2>Mission</h2>
<p>
Trees provide the very necessities of life itself. They provide
oxygen for us to breath, clean our air, protect our drinking
water, create healthy communities, mitigate global warming, and
can help stablilize the occuring drastic climate change,
WaterTheTrees is dedicated to crowdsourcing the planting and
maintenance of our world's trees.
</p>
<h2>Strategies & Goals</h2>
<p>Keep a record of tree health and maintenance.</p>
<p>
Enable people to adopt and follow neightborhood and favorite
trees.
</p>
<p>Notify people when trees need watering.</p>
<p>Allow cities and tree organizations to make and track trees.</p>
</div>
</div>
<div className="about__text">
We are an open source project run by tree planting volunteers.
<div className="about__main__section">
<div className="about__main__section__numsection">
<div className="about__main__section__numsection__relative">
<div className="about__main__section__numsection__absolute">
<span>1</span>
</div>
</div>
<h2>Plant More Trees</h2>
<p>
Our goal, we want everyone to plant more trees to provide
ourselves a better future to control climate change.
</p>
</div>
<div className="about__main__section__numsection">
<div className="about__main__section__numsection__relative">
Copy link
Contributor

Choose a reason for hiding this comment

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

This feels like it can be simplified. Why is there a nesting of a position: absolute inside of a position: relative div? Is there a way to collapse the number of divs and the number of classname selectors?

Copy link
Contributor Author

@vernfongchao vernfongchao Jan 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

The reason why im having an absolute nesting inside of a relative is mainly for structure. The relative div is used to give structure but also control to its children divs. Its actually a well known technique used by alot of people. It allows me to manipulate the position and have it be relatives to its current flow instead of the html page

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm, so the relative element gives structuring for the absolute element child. But there is just one child that doesn't have any positioning fields like top, left, etc, so I'm not sure why you need this extra div element. Couldn't you put these fields into the parent &__relative element? I could be wrong!

 &__absolute {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        color: #3fab4530;

        span {
          font-size: 15.5rem;
        }
      }

<div className="about__main__section__numsection__absolute">
<span>2</span>
</div>
</div>
<h2>Keep More Trees Alive</h2>
<p>
As the climate continues to heat up trees suffer. We want to
maintain as many trees as possible worldwide.
</p>
</div>
<div className="about__main__section__numsection">
<div className="about__main__section__numsection__relative">
<div className="about__main__section__numsection__absolute">
<span>3</span>
</div>
</div>
<h2>Involve the general public</h2>
<p style={{ marginBottom: '0px' }}>
To grow our tree population, we want everyone to contribute to
local tree planting and be aware of tree health.
</p>
</div>
</div>
<div className="about__text">
We believe in the power of trees to restore natural habitat for
animals, insects, and fauna.
<div className="about__main__section">
<div className="about__main__section__sub">
<h1>
<span className="about__main__section__green">
Join Our Team!
</span>
</h1>
</div>
<div className="about__main__section__sub">
<h2>Everyone is Welcomed!</h2>
<p>
We are always looking for team members to contribute to the
project. Currently we are looking for Backend Developers, Frontend
Developers, UX/UI Designers, Researchers, Admin, Marketing.
</p>
<h2>Get started by:</h2>
<p>
1. Read our{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://docs.google.com/document/d/1L5Hc8_K_NhVhAejdE05C_Y__CgqeBWFrFYFoNqBSBbQ/edit"
>
Onboarding Steps
</a>
.<br></br>
2. Join us on{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://sfbrigade.slack.com/archives/C010EGACUTU"
>
Slack
</a>
, and say Hi!
</p>
<p></p>
<a
target="_blank"
rel="noopener noreferrer"
href="https://sfbrigade.slack.com/archives/C010EGACUTU"
>
<GreenButton styles={{ padding: '4px 12px' }}>
<strong>Join our Slack</strong>
</GreenButton>
</a>
</div>
</div>
<div className="about__text">
We are interested in continuous massive tree planting events to help
sequester carbon and stabilize climate change extremes.
<div className="about__main__section">
<div className="about__main__section__affiliate">
<p>A few organizations we'd like to thank for their support.</p>
<div className="about__main__section__affiliate__container">
<Affiliates />
</div>
</div>
</div>
<div className="about__text">
To join our dev team, reach out below:
<div className="about__main__footer">
<Footer />
</div>
</div>
<Contacts />
To contribute to trees in your local community, reach out through the
forms below:
<Affiliates affiliates={affiliates} />
<Footer />
</div>
);
};
Expand Down
Loading