About-us page updates and bug fixes [Master Issue]

[drubgrubby]

Overview

The about-us page is a new page that was merged as an MVP. There are a number of additions and corrections that now need to be addressed. This issue is intended to serve as a master issue that will keep track our progress.

Details

Each new issue will be described in a new comment. There should be a description with a checkbox on each comment so we can check it off when it has been completed. As each sub-issue is addressed a new, small issue will be created and linked back to this master issue. That will allow us to keep each issue and PR on a smaller scale, and still keep track of the project as a whole.

(I'm trying to figure out the best way to do that; if anyone has any thoughts on how to make this better, please comment).

Resources

https://www.hackforla.org/about-us

[drubgrubby]

• In tablet view, the sticky navigation covers up the main content
• On really wide screens the sticky navigation drifts away from the content

Description

This issue was addressed in @ jbubar's review of the original PR: #811 (comment)

And also here: #811 (comment)

[drubgrubby]

• Clean up _about-us.scss file

Description

There are many classes in this file that would probably be better off being moved to different "master" .scss files so that they can be used more easily on different pages. Additionally, the file could be somewhat better organized to so that future coders working on this page won't curse my name quite so much.

I think it would be good to work with @daniellex0 to determine the best strategy for moving files. (This seems like it could also be part of componentizing the website.)

Resources

_sass/components/_about-us.scss

Issue

The sub-issue for this is #842

[drubgrubby]

• Put up actual text of Letter form the executive director.

Description

The page currently has lorem ipsum for the letter. We need to put up the actual text.

[drubgrubby]

• Minor CSS edits from Josh and Danielle's visual reviews.

Description

Some things just aren't where they're supposed to be. Extreme CSS tweaking should fix the problem(s). In the issue I will make a list of the specific changes.

The major visual issues will get their own issue.

The sub-issue for danielle's visual review fixes is: #851

[drubgrubby]

• Replace static image with animated gif in the donations section

Description

The image I originally used was a static image. It needs to be replaced with the intended animated gif.

Resources

civictechindex/CTI-website-frontend#60 (comment)

Issue

The sub-issue is #846

[drubgrubby]

• In SDG section, left row of images gets smaller when minimizing the page before it switches over to mobile view.

Description

Make it stop doing this:

Images should be the same size.

[drubgrubby]

• Make the Wins card link to the wins section

Description

Currently, the wins card on the about us page links to dean's linked-in account. As there wasn't a live wins page at the time, this made sense. Now, however, it probably makes more sense to link it to the wins page.

Resources

http://localhost:4000/wins

Sub-issue: #848

[drubgrubby]

• Make the Metrics card look better in tablet view

Description

The metrics card degrades in unpleasant ways in tablet view. Make it better.

In tablet view the cards look different:

In full screen the cards look the same:

[drubgrubby]

• Center header text when it first switches to mobile view

Description

When it first switches to mobile view there is a lot of white space to the right of the text and image. That should probably be centered as soon as it switches view.

Should look more like this:

This comment from Josh's code review may have something to do with it:
#811 (comment)

Sub-issue: #848

[drubgrubby]

• If possible, get rid of "!important" in the .is-active tag.

Description

See Josh's comment here: #811 (comment)

(I can't figure an easy way to do this, and it doesn't seem like it's worth the time to figure it out. "!important" is available for a reason)

[drubgrubby]

• Add "cursor:pointer" to .read-more/.read-less tags

###Description
See Josh's comment here: #811 (comment)

sub-issue: #848