search

OperationCode / operationcode_frontend

Front-end repository for live site. Please go to `front-end` repo to contribute instead.
https://operationcode.org
MIT License
101 stars 221 forks source link

Create Military Families and Spouses page #154

Open rickr opened 7 years ago

hollomancer commented 7 years ago

@RobKriner, I believe we had a design for this already...

hollomancer commented 7 years ago

desktop-military-families-design-spec

alexspence commented 7 years ago

I've actually already done alot of the work for this page, as I was using it as the original homepage. components are in scenes/home/families.

If no one else picks it up I can probably tackle it in a few days.

hollomancer commented 7 years ago

Once this page is up, I have some followup work to redirect Google Adwords to this page as a landing.

kylemh commented 7 years ago

I had a question on this. It looks very similar to the front-page. Do we have liberties to change up the banner image? This banner actually looks better suited for /families than it does the home page!

hollomancer commented 7 years ago

@kylemh, yeah - do you have something in mind?

kylemh commented 7 years ago

Looking at this again, I think we should just use the second image, as the banner image.

Have "The Facts" be devoid of an image.

hollomancer commented 7 years ago

Depends how this looks on mobile. I like 'The Facts' being a two-column, and I do see your previous point about the banner being better suited for /families than the home page.

kylemh commented 7 years ago

I'd say that we can keep this wireframe exactly as is, but only if we change the landing page's banner.

hollomancer commented 7 years ago

Until we figure that out, I'm comfortable leaving it the way it is (or making it blank, like the /about page currently is right now), as an MVP.

mwagz commented 7 years ago

I'll pick this one up. If @rickr or @hollomancer want to assign it to me.

kylemh commented 7 years ago

@mwagz to be clear - the wireframe is a great guideline, but do not use the same image header.

If you are able to replicate the curved hero bottom border, please try to cordon off that code for us to use on the landing page! :+1: also keep in mind that I'll be refactoring Nav/Header this weekend. Let me know if you implement any ideas so I don't reinvent the wheel. Consider using the

component as it is being used for the landing page within home.js

mwagz commented 7 years ago

@kylemh I didn't do anything crazy, but I did use as many pre-existing components as I was able to identify. For the curved hero bottom border, I came up with a solution that I'm not totally proud of, but it accomplishes the task.

There are 2 components in my PR, HeaderClipMaskLeft and HeaderClipMaskRight. These components are absolutely positioned to the first section on the page (the quote, in my case). I then set that section to be relatively positioned and include these new components in the Section. Reference is here.

These components could use some expanding upon. They're currently restricted to white and using props we could probably just use one component for both sides.

Outside of that stuff, I think I honored everything you outlined. I did take some liberties on mobile breakpoints.

JennWeideman commented 6 years ago

https://www.123rf.com this is a site full of free stock images. It might be nice if we could change up the images now and then

kylemh commented 6 years ago

This page is nearly done. Somebody may feel free to hijack @mwagz's work to finish

kylemh commented 6 years ago

With this page not mapped out as an aspect of parity, it'll be subject to redesign before creating a new issue on the new repo. Leaving open until redesign is prepared.