homepage polish

[cgreim]

starting a ticket to make a checklist of polish things for the new home page / about pages:

• [x] change logo in footer to white background behind letters
• [x] change Iridescent Learning to Iridescent
• [x] update home page DC blurb to say "80+" instead of 65 :grin:

• [x] update home page text (copy here)
• [x] new footer on about pages
• [x] update general about page text (copy here)
• [x] include full logo row from home page on general about page
• [x] about page tweak review with @savannahmillion
• [x] check all links
• [x] build page for scientist/engineer engagement (copy here)
• [x] update parent page with content from @marianarutigliano
• [x] add photos to membership page (and others?)
• [x] add demo video to mentor page
• [ ] update mentor graphic

[cgreim]

We'll use this ticket to create a new list of small fixes for the updated, bootstrap 4 version of the home page etc.

cat notes Home Page

• [x] remove blue underline from twitter / facebook logo links
• [x] change header hover color on "Log in" to green
• [x] "Log in" button should bring up modal
• [x] "Sign up" and "Join" buttons should bring up modal (in header, middle of image, and bottom of page)
• [x] clicking on the Curiosity Machine logo takes you to /index (dashboard if you're logged in, home page if you're not)
• [x] change How it Works video to embed instead of YouTube
• [x] make "Schools, Organizations, and Playgroups" and "Science and Engineering Companies" capitalized header style (to make other similar headers on the page)

• [x] "Subscribe" button needs to subscribe user to mailchimp
• [x] logo on bottom left corner goes to /home
• [x] color of hover state on About Us red tab in mobile menu isn't distinct enough to notice in browser -- maybe not a big deal because you would mostly see this on mobile
• [ ] background image on mobile is a blur (in Chrome and Safari)

About Pages

• [x] Sign Up button at bottom of each page should take you to /join (or /join_as_mentor , educator, etc)
• [x] On Educator page, Become a Member button should link to /about-membership

• [x] Change units on Educator page to
• https://www.curiositymachine.org/units/11/
• https://www.curiositymachine.org/units/13/
• https://www.curiositymachine.org/units/2/

(Devin recently did a big update to units, want to showcase that we have options K-12)

• [x] NGSS button on Educator page should link to: https://s3.amazonaws.com/curiositymachine/statics/Curiosity_Machine_NGSS_Alignment_K-5.pdf
• [x] links for More Resources are... Guide to Great Submissions Under 13 Consent Form *Create Account Instructions
• [x] on Mentor page, links are... informative feedback Engineering Design Process *why it's valuable
• [x] on Mentor page, mentor@iridescentlearning address should...open an email client?
• [x] on Memberships page, "Get in touch..." and "this form" links should open form in new window (link is right though!)
• [x] on Partnerships page, mentor@iridescentlearning address should...open an email client?
• [x] FAQ page needs links to go places! I think this will be fastest if I just sit down with someone and tell you where the links should go :smile_cat:

savannah's nitpicky visual notes

• [x] have video just fade in, not come down and fade in
• [x] a little more space between "sign up" and "see how it works" buttons -- 15 or 20px would be good
• [x] put the h3 "Build engineering design..." into a smaller column set so the headline doesn't span across the entire thing. Not familiar with bootstrap v4 column system yet but I can be more specific as soon as I look into it!
• [x] change link hover state to text-decoration: none
• [x] re: removing underlines on the icons -- before I did that by adding a class called action-img to anything I didn't want to have a border-bottom on hover (I realize this can be a little tedious because it's altering default behavior, but I think it looks so much better...but I'm open to change it back!)
• [x] Visually fix the newsletter form field -- there's a few things wrong currently. Text doesn't show up when you type, needs more padding, probably a 4px border radius

[savannahmillion]

What a good time to check these off? After committing to a branch or after merging the branch to bootstrap4?

Edit: I'm checking them off as I make commits to: https://github.com/Iridescent-CM/curiosity-machine/pull/568 so I can keep track :dancer:

[cgreim]

New set of boxes to check, from amy and mariana's feedback:

• [x] change mentor email on Mentor and Partnerships page to "mentors@iridescentlearning.org" (currently it's "mentor@iridescentlearning.org")
• [x] add this sentence to end of "Become a role model..." section on Partnerships page: "Learn more and become a mentor"
• [ ] change text in Sign Up window for Educator to "find resources to teach engineering challenges and track student progress"
• [x] change menu order to Mentors -- Challenges -- About us -- Log in

[savannahmillion]

So one note – changed menu order to Challenges / Mentors / About Us / Log In. I think this makes more sense because Challenges is the most important, and you're moving from "in platform" --> "informational" as you go

[marianarutigliano]

I agree, Savannah!

On Mon, Sep 28, 2015 at 2:56 PM, Savannah Million notifications@github.com wrote:

So one note – changed menu order to Challenges / Mentors / About Us / Log In. I think this makes more sense because Challenges is the most important, and you're moving from "in platform" --> "informational" as you go

— Reply to this email directly or view it on GitHub https://github.com/Iridescent-CM/curiosity-machine/issues/543#issuecomment-143885043 .

Mariana Rutigliano _Community Engagement Director Iridescent_Curiosity Machine http://curiositymachine.org |website http://www.iridescentlearning.org/ *| watch us https://www.youtube.com/watch?v=94JY-Zs1r2U* _Follow Us: [image: Facebook] http://www.facebook.com/pages/Iridescent-ONR/125009044180713 [image: Google Calendar] http://https//www.google.com/calendar/hosted/iridescentlearning.org/embed?src=heo0pf217oq2lsn9m3v8srflt4@group.calendar.google.com&ctz=America/New_York&gsessionid=97qwa0WMWfNkyFx_zDfFvQ [image: YouTube] http://www.youtube.com/user/tarachk [image: WordPress]_

[cgreim]

more follow up, now that much of this is in staging:

• [x] fix focus states (@savannahmillion to figure out style)
• [x] change menu order on header on old pages (should be: Challenges / Mentors / About Us / Log In)
• [x] Log In button on old pages should link to /login
• [x] Background image on mobile is a blur (in Chrome and Safari) -- maybe this is ok? need to decide what to do about it
• [x] Creating account for underage student lands on /challenges rather than /underage....you only hit /underage if you try to interact. Even though underage student should be able to access /challenges (because you can access that if you're logged out), your landing page when creating account or logging in should be /underage
• [x] Add sentences to /join_as_mentor/ -- "Curiosity Machine Mentors are professionals or students training in STEM fields. If this sounds like you, please sign up!"
• [x] Remove photo badge from logged in user's dashboard
• [x] on Memberships page, "Get in touch..." should link to this form rather than the curiosity email address
• [x] change text in Sign Up window for Educator to "find resources to teach engineering challenges and track student progress" (done on old modal, needs to be updated on new modal)

[stenington]

• [x] Fix logged in dropdown header section in old framework to look like new framework

[stenington]

Background image on mobile is a blur (in Chrome and Safari) -- maybe this is ok? need to decide what to do about it

This seems like a product of many mobile browsers not handling background-attachment: fixed; background-size: cover; very well. I found some workarounds when the background image is applied to the page body, but not when it's applied to an element.

It seems the affected browsers scale the background image up to be the full size of the page, not just the viewport, meaning you get a super-zoomed in chunk of the full image visible. Reducing the image size will improve page load time but actually just make that super zoomed in chunk very pixelated as well, compounding the problem.

Not sure what a good solution would be yet, seems sort of like a catch-22.

[savannahmillion]

@stenington can we set up a media query and serve a smaller image just to mobile devices?

[cgreim]

if neither of those works, should we think about whether we're ok with the blurred image background, or should switch to something else for mobile (like a solid color, more like the panels further down the page)?

On Fri, Oct 2, 2015 at 1:34 PM, Savannah Million notifications@github.com wrote:

@stenington https://github.com/stenington can we set up a media query and serve a smaller image just to mobile devices?

— Reply to this email directly or view it on GitHub https://github.com/Iridescent-CM/curiosity-machine/issues/543#issuecomment-145117905 .

[stenington]

@savannahmillion We can do that, but that's what will result in the pixelated-ness in affected browsers. They'll stretch that smaller image to be full page height so only a tiny, highly pixelated bit will be visible.

[stenington]

Doing something just for mobile isn't easy, and totally changing the background might be jarring on desktop if someone chooses to make their window narrow. Although there are certainly plenty of sites that change a lot at narrow window sizes, so maybe that's just a reality that we'd have to accept?

[stenington]

For now let's try making the background image scroll at the same breakpoint where we switch to the mobile header, and see if that works better.

[cgreim]

these fixes are all implemented!