Skip to content
This repository was archived by the owner on Dec 12, 2021. It is now read-only.

updates sections for board members, adds scss file + a little trick or treat fun #132

Open
rhtaylor wants to merge 13 commits into
base: master
Choose a base branch
from
Open

updates sections for board members, adds scss file + a little trick or treat fun #132

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
701488d
updates sections for board members, adds scss file
rhtaylor Oct 31, 2020
18cf139
adds padding-left: 5em to .volunteer-content in volunteer.scss
rhtaylor Nov 1, 2020
81746d2
removed commets, spell check Keith
rhtaylor Nov 2, 2020
d968561
updates scss to fix Ipad pro layout/replaces roger.jpg to real pic
rhtaylor Nov 4, 2020
928c802
fixes extra padding on left of .volunteer-content for mobile, centers…
rhtaylor Nov 8, 2020
8368dca
update to narrow rage of media query in footer.scss
rhtaylor Nov 8, 2020
e1d1825
moves over board members and leadership team h1s to appear centered
rhtaylor Nov 8, 2020
b85ce4e
moves over volunteer section of page 20vh for large screen
rhtaylor Nov 8, 2020
b6fbf42
removes react fragment and replaces with span in footer
rhtaylor Nov 12, 2020
fc2f95f
adds box shadow to individuals on board member component, adds indivi…
rhtaylor Nov 13, 2020
302fe1d
updates mobile ipad board-member sections
rhtaylor Nov 18, 2020
f09e4ad
updates p in className individual to size 16px for media screens
rhtaylor Nov 18, 2020
65e5b3d
updates board members to have same text-div scss on @media query
rhtaylor Nov 20, 2020
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
63 changes: 63 additions & 0 deletions src/components/home/sections/BoardMembers.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from 'react'
import './volunteer.scss'
import './boardmembers.scss'
import johnson from '../../../images/johnson.jpg'
import kim from '../../../images/kim.jpg'
import timKim from '../../../images/tim-kim.jpg'
import green from '../../../images/green.jpg'
import roger from '../../../images/roger.jpg'
export const BoardMembers = () => {
return (
<div className='main'>
<div className='volunteer-content'>

<h1 className='volunteer-title'>Board Members</h1>
Copy link
Member

@ambergkim ambergkim Nov 8, 2020

Choose a reason for hiding this comment

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

Is this class name being used in css anywhere?

Copy link
Contributor Author

@rhtaylor rhtaylor Nov 12, 2020

Choose a reason for hiding this comment

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

If you are referring to className 'main' then yes. The others were created before I joined the team.

Copy link
Member

@ambergkim ambergkim Nov 15, 2020

Choose a reason for hiding this comment

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

This one is about the "volunteer-title". Same as above.

<div className='board'>
<div>
<img src={kim} alt='board-img' />
<div className='text-div'>
<p>Amber Kim</p>
<p>Chair</p>
</div>
</div>

<div>
<img src={green} alt='board-img' />
<div className='text-div'>
<p>Cody Green</p>
<p>Vice Chair</p>
</div>
</div>
<div>
<img src={johnson} alt='board-img' />
<div className='text-div'>
<p>Ryan Johnson</p>
<p>Member of the Board</p>
</div>
</div>

</div>
<div id='team'>
<h1 className='volunteer-title'>Leadership Team</h1>
<div className='board'>
<div>
<img src={timKim} alt='board-img' />
<div className='text-div'>
<p>Timothy Kim</p>
<p>Chief of Operations</p>
</div>
</div>

<div>
<img src={roger} alt='board-img' />
<div className='text-div'>
<p>Roger Keih</p>
<p>Lead Software Engineer</p>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
42 changes: 23 additions & 19 deletions src/components/home/sections/Volunteer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react'
import './volunteer.scss'

import { BoardMembers } from './BoardMembers.jsx'
/* IMAGES */
import johnson from '../../../images/johnson.jpg'
import kim from '../../../images/kim.jpg'
import timKim from '../../../images/tim-kim.jpg'
import green from '../../../images/green.jpg'
// import johnson from '../../../images/johnson.jpg'
// import kim from '../../../images/kim.jpg'
// import timKim from '../../../images/tim-kim.jpg'
// import green from '../../../images/green.jpg'

const CONTENT1 = 'If you are another nonprofit or social worker in the Redmond, Kirkland, Woodinville, Bothell, or Bellevue who would like to refer families with school-aged, disabled, or unborn children, we would love to help. Currently, we are only able to deliver within Redmond, Kirkland, Woodinville, Bothell, and Bellevue. Hopefully, we\'ll be able to expand soon.'
const CONTENT2 = 'If you are looking for ways to volunteer remotely from your home, we would love to chat with you. Some of the things we could use help in include marketing, organizing, and developing apps to help us automate some processes with our deliveries (stack: JavaScript, Node, React, AWS, DynamoDB).'
Expand All @@ -14,22 +14,23 @@ const SECTION_TITLE = 'An invitation from our board members'

export const Volunteer = () => {
return (
<section id='volunteer'>
<>
<section id='volunteer'>

<div className='volunteer-content'>
<div className='volunteer-content'>

<h1 className='volunteer-title'>{SECTION_TITLE}</h1>
<p>{CONTENT1}</p>
<a href='https://docs.google.com/forms/d/e/1FAIpQLScEOOuZ1iZw9IWbsiWc1AX3OHhFQ4wpxYs_TZHyykx2glsrFw/viewform' target='_blank' rel='noopener noreferrer'><button className='btn-container'>Sign Up</button></a>
<p>{CONTENT2}</p>
<p>{CONTENT3}</p>
<h1 className='volunteer-title'>{SECTION_TITLE}</h1>
Copy link
Member

@ambergkim ambergkim Nov 8, 2020

Choose a reason for hiding this comment

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

Is this class name being used in css anywhere?

Copy link
Contributor Author

@rhtaylor rhtaylor Nov 12, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I believe this is being used. If not it was intended to be used and was never implemented as I was not on the team when the volunteer sections were created.

Copy link
Member

@ambergkim ambergkim Nov 15, 2020

Choose a reason for hiding this comment

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

No need to keep it if it's not being used.

<p>{CONTENT1}</p>
<a href='https://docs.google.com/forms/d/e/1FAIpQLScEOOuZ1iZw9IWbsiWc1AX3OHhFQ4wpxYs_TZHyykx2glsrFw/viewform' target='_blank' rel='noopener noreferrer'><button className='btn-container'>Sign Up</button></a>
<p>{CONTENT2}</p>
<p>{CONTENT3}</p>

<a href='https://docs.google.com/forms/d/e/1FAIpQLSd9N1_wWETbeMs7UAxzUTCMl0FhCnVneozlA-EMAMQXSBFy3A/viewform' target='_blank' rel='noopener noreferrer'>
<button className='btn-container'>volunteer with us</button>
</a>
</div>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSd9N1_wWETbeMs7UAxzUTCMl0FhCnVneozlA-EMAMQXSBFy3A/viewform' target='_blank' rel='noopener noreferrer'>
<button className='btn-container'>volunteer with us</button>
</a>
</div>

<div className='image-col'>
{/* <div className='image-col'>
<div className='overlay'>
<img src={kim} alt='board-img' />
<div className='text-div'>
Expand Down Expand Up @@ -59,7 +60,10 @@ export const Volunteer = () => {
<p>Chief of Operations</p>
</div>
</div>
</div>
</section>
</div> */}

</section>
<div><BoardMembers /></div>
</>
)
}
36 changes: 36 additions & 0 deletions src/components/home/sections/boardmembers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
.main{
display: flex;
direction: row;
@media only screen and (max-width: 430px){
display: none;
}
.volunteer-content{
Copy link
Member

@ambergkim ambergkim Nov 8, 2020

Choose a reason for hiding this comment

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

Duplicate class name from volunteer.scss

Copy link
Member

@ambergkim ambergkim Nov 15, 2020

Choose a reason for hiding this comment

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

For example, on here we are inside the board member scss and not volunteer content. So it's unclear why we are using "volunteer" here.

width: 100em;
h1{
text-align: center}
.board{
display: flex;
direction: row;
align-content: center;
align-self: center;
width: 500px;

#team{
flex: 2;
align-items: center;
//float: right;


}
img{
width: 200px;
height: 200px;
}
div{
border: 1px solid #000;
padding: 0 5px;

}
}

} }
11 changes: 7 additions & 4 deletions src/components/home/sections/volunteer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
$dark-purple: #412F8A;

#volunteer {
#volunteer {
width: 100%;
@media only screen and (min-width: 1024px) {
flex-direction: row;

float: left;
padding: 1em;
@media only screen and (min-width: 1366px) {
width: 80%;
width: 40%;
margin: auto;
}
}

.volunteer-content {
Copy link
Member

@ambergkim ambergkim Nov 8, 2020

Choose a reason for hiding this comment

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

Duplicate class name from boardmember.scss

Copy link
Contributor Author

@rhtaylor rhtaylor Nov 12, 2020

Choose a reason for hiding this comment

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

I am thinking this was due to the nesting nature of scss. I believe the class name will have different attributes if it has a different parent so to speak.

Copy link
Member

@ambergkim ambergkim Nov 15, 2020

Choose a reason for hiding this comment

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

Even if they are in different components and React will automate some things once everything has been processed, it's still good practice to be clearer and more intentional about avoiding collisions w/ naming.

display: flex;
flex-direction: column;
margin: 5%;
margin: 5%;
padding-left: 5em;

@media only screen and (min-width: 1024px) {
width: 50%;
Expand Down
Binary file added src/images/roger.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.