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

rhtaylor · 2020-10-31T05:29:47Z

This updates the site to have a new division for "Board Members" and "Leadership on the dev team".

A new jsx component is added with additional scss to section the webpage.

Local Tests are passing.
New tests have been added for new code where relevant
Screenshots of before and after changes have been added
JSDoc Documentation and comments have been added or updated in the code.
Documentation in the /docs folder has been added or updated when appropirate.
Follows Nouri JavaScript guidelines
Commit message follows Nouri guidelines
Introduces minimal or no additional external packages.

Closes #<Issue Number 89>

This is not perfect but just for a little Halloween fun I created a PR. It needs some additional minor scss spacing correction. However works with mobile.

ambergkim · 2020-11-01T21:41:48Z

Looks like something got broken w/ the mobile first queries:

EDIT:
Or maybe not. Looks like maybe my browser was confused or needed time.

If my browser is behaving, this will need some repositioning, though

src/components/home/sections/Volunteer.js

ambergkim · 2020-11-01T21:59:46Z

Can you doublecheck this. The profiles are spilling over the width of the page for me.

ambergkim · 2020-11-05T02:25:30Z

@rhtaylor Are you seeing this on your end?

If so, can you get rid of the padding on the left on mobile so that it's more balanced? I don't remember if talked about this one.

Not seeing the icons vertical on the iPad.

But am seeing it on iPad horizontal and it's disrupting the flow of everything on the page.

I think if we're going to have it vertical, it should be vertical for all screens and out of the document flow so that it floats on top and doesn't mess w/ the positioning of everything else. I'm seeing use of flexbox and display block, so it's still in the flow. It would probably be good to move it out into its own component as well.

Otherwise, if removing it from the flow gets too complicated, let's keep it unobtrusive at the bottom. Having it switch it between will get us into trouble w/ screen size changes in between different devices and between device versions.

Document Flow: https://soulandwolf.com.au/blog/what-is-document-flow/
Example of a floating social media bar: https://codepen.io/bhktkshn/pen/YzXawzZ

… .links-container for ipadPro

ambergkim · 2020-11-08T21:12:05Z

@rhtaylor Much improved on mobile. 👏

Some more feedback and refinement

: Let's have the pictures show up on earlier on 1024 width.

The funkiness at the bottom for larger screens is still overflowing to the right. You can see the border of the top bar ending earlier than the screen. This is probably a matter of the widths of paddings, margins, element widths, and borders, not adding up to more than 100% of the total width.

We can also work to center the icons on bigger screens.

ambergkim · 2020-11-08T21:16:47Z

src/components/home/sections/Volunteer.js

+          </a>
        </div>
+      </section>
+      <BoardMembers />


It would probably better to include this in the section as this whole part can be considered one section:

The div that encompasses the paragraphs and the pictures can then be removed.

Is it just me or does anyone else think the pics and words should be centered?

@RaevLogic Are you talking about the text justification or the whole section being off? There is padding that's pushing and making the section off.

I just edited it in Paint 3D real quick so it's not perfect, but that's more what I was thinking if we're splitting it in two sections like this.

Two sections being the section with paragraphs and the section with all of our pictures.

The only thing I don't like about this from a UI perspective is the split vision aspect. I find it awkward for our SPA to read down as a single column for the majority of the page, and then hit this portion and it's a two-column design where I have to read down the paragraphs and then go back up the page to visually scan back down the pictures section.

🤷‍♀️I'm good with either one or two columns. I think if we have them stacked, I would put the pictures on top and then the text below.

I think we can stick w/ the 2 column for now (unless it gets too annoying for you @rhtaylor ) and then create a new task for 1 column if we want to redesign to that.

Lol, I'm not exactly a designer over here. Just letting everyone know my thoughts so I'm not wondering if I should have said something for two weeks xD

Constructive feedback is always good. If it can improve user experience, we should think about it.

ambergkim · 2020-11-08T21:19:40Z

src/components/home/sections/volunteer.scss

    }
  }

  .volunteer-content {


Duplicate class name from boardmember.scss

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.

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.

ambergkim · 2020-11-08T21:20:03Z

src/components/home/sections/boardmembers.scss

+    @media only screen and (max-width: 430px){
+        display: none;
+    }
+.volunteer-content{ 


Duplicate class name from volunteer.scss

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.

ambergkim · 2020-11-08T21:21:19Z

src/components/home/sections/Volunteer.js

-          <button className='btn-container'>volunteer with us</button>
-        </a>
-      </div>
+          <h1 className='volunteer-title'>{SECTION_TITLE}</h1>


Is this class name being used in css anywhere?

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.

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

ambergkim · 2020-11-08T21:21:57Z

src/components/home/sections/BoardMembers.jsx

+    <div className='main'>
+      <div className='volunteer-content'>
+
+        <h1 className='volunteer-title'>Board Members</h1>


Is this class name being used in css anywhere?

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

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

ambergkim · 2020-11-08T21:34:20Z

src/components/home/sections/volunteer.scss

-      margin: auto;
+      width: 40%;
+      margin: auto; 
+      padding-left: 20vh;


This is causing the left padding which adds to things being pushed too far to the right.

I thought I took care of the extra space in the padding?

This is still causing the issue on my end. Removing it removes the extra padding

With the padding:

Without:

If you've removed this, can you double check that you pushed your local changes up. I'm still seeing this here on github

website/src/components/home/sections/volunteer.scss

Line 12 in fc2f95f

padding-left: 20vh;

ambergkim · 2020-11-08T21:37:51Z

src/components/common/footer/Footer.jsx

  return (
-    <div>
+    <>
      <div className='links-container'>


I think this links container can actually be put inside the footer tag since it's part of the whole footer. You will have to readjust the styling but the separation between areas of the page will be clearer.

You would also be able to remove the fragment that surrounds the footer.

I'm seeing a new span tag added to replace the <> or
instead of all the contents being put under the footer element.

Yes I used a span tag. If you want the elements totally I believe react will let me use an array to wrap the elements in [,
] for example. I don't know how well that would work but worth a try.

…dual class name

updates sections for board members, adds scss file

701488d

rhtaylor requested review from RaevLogic and ambergkim October 31, 2020 05:30

adds padding-left: 5em to .volunteer-content in volunteer.scss

18cf139

ambergkim reviewed Nov 1, 2020

View reviewed changes

src/components/home/sections/Volunteer.js Outdated Show resolved Hide resolved

rhtaylor added 2 commits November 1, 2020 17:06

removed commets, spell check Keith

81746d2

updates scss to fix Ipad pro layout/replaces roger.jpg to real pic

d968561

rhtaylor added 4 commits November 8, 2020 12:46

fixes extra padding on left of .volunteer-content for mobile, centers…

928c802

… .links-container for ipadPro

update to narrow rage of media query in footer.scss

8368dca

moves over board members and leadership team h1s to appear centered

e1d1825

moves over volunteer section of page 20vh for large screen

b85ce4e

ambergkim reviewed Nov 8, 2020

View reviewed changes

rhtaylor added 5 commits November 12, 2020 16:31

removes react fragment and replaces with span in footer

b6fbf42

adds box shadow to individuals on board member component, adds indivi…

fc2f95f

…dual class name

updates mobile ipad board-member sections

302fe1d

updates p in className individual to size 16px for media screens

f09e4ad

updates board members to have same text-div scss on @media query

65e5b3d

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

rhtaylor commented Oct 31, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ambergkim commented Nov 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

ambergkim commented Nov 1, 2020

Uh oh!

ambergkim commented Nov 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ambergkim commented Nov 8, 2020

Some more feedback and refinement

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rhtaylor Nov 12, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rhtaylor commented Oct 31, 2020 •

edited

Loading

ambergkim commented Nov 1, 2020 •

edited

Loading

ambergkim commented Nov 5, 2020 •

edited

Loading

rhtaylor Nov 12, 2020 •

edited

Loading