Here is a mockup of our idea for the plan ahead page. Please let me know if you have thoughts or questions about what may not work or what may be improved. Thanks.
Please do not scrap the work done on the dashboard plan ahead page. That will still be needed. The remainder of the dashboard plan ahead page will mainly be the list of things the user has added to their plan ahead list (wish list).
Notified 1 person
Curtis Street,Director of Marketing
The green color should be #7cc576 for links, the filtering and buttons
Notified 1 person
Ryan Ross,Developer
Fixed
Notified 1 person
Curtis Street,Director of Marketing
The following adjustments to the Plan Ahead page are proposed based on the understanding that the page is complete apart from adding products.
Can the date picker be a calendar format? Please change the icon on the Select A Date button to the one specified in the mockup. I will put the PSD in the development folder. Remove margin beneath h1 liturgical day, so the date is right under it. Please make filter titles bold Please remove the all caps on the liturgical days in the Upcoming box. Make the dates and liturgical days in the Upcoming box green.
Notified 1 person
Ryan Ross,Developer
Calendar can probably be a date picker. Will circle back for this. Need the PSD for the specified icon.
Remainder has been adjusted as requested.
Notified 1 person
Curtis Street,Director of Marketing
The PSD has been uploaded to the Development folder.
Notified 1 person
Curtis Street,Director of Marketing
Some more plan ahead page adjustments:
Remove shadow and padding around "Upcoming" box. This should reduce the wrapping. The shadowed box was originally meant for when Plan Ahead was going to reside in the Dashboard environment.
The word "Upcoming" should be regular weight instead of bold.
Remove the bright green hover state of the "Select A Date" buttons, so they remain the same when hovered.
Is it possible to do a light gray line below and connecting all the filter items (see mockup)?
Make date above filter items to be 18px
Make margin above and below the Plan Ahead logo at the top to be 30px each
On the banner image, change the Plan Now button to be white text surrounded by a white outline (same as hero banners)
Notified 1 person
Ryan Ross,Developer
All done.
Notified 1 person
Curtis Street,Director of Marketing
This is looking GREAT Ryan. Thanks! Just a few more small things, then we should be good on this page.
Can you remove the right and left padding on the upcoming section, so the text doesn't wrap?
Add 20px top and bottom padding to plan_ahead_title_container
Is there a way to address the odd "bounce" effect that is happening to items below the second line of filter tags when one of the tags on the second line is hovered? (This may be a side effect of adding the gray line).
Apart from changing the date picker, this page should be done for now.
Notified 1 person
Ryan Ross,Developer
Padding on upcoming removed, but shortens the gap from 60px to 30px
The bounce can partially be addressed. It's a side effect due to the 3px border on hover/active. I can make the height of the ul 100px, enough to accommodate the extra border on hover of the bottom row when top row is active, but it does not resolve the inverse - that being bottom row active, hovering top row.
Notified 1 person
Curtis Street,Director of Marketing
Okay.
Notified 1 person
Ryan Ross,Developer
Had a thought - What about a 1px border in green on Hover, 3px on Active. This results in no bounce for any case.
Notified 1 person
Ryan Ross,Developer
White border on 'a' trick worked. Put the gray border on the li.
Ryan R.
Can the date picker be a calendar format?
Please change the icon on the Select A Date button to the one specified in the mockup. I will put the PSD in the development folder.
Remove margin beneath h1 liturgical day, so the date is right under it.
Please make filter titles bold
Please remove the all caps on the liturgical days in the Upcoming box.
Make the dates and liturgical days in the Upcoming box green.
Need the PSD for the specified icon.
Remainder has been adjusted as requested.
The bounce can partially be addressed. It's a side effect due to the 3px border on hover/active. I can make the height of the ul 100px, enough to accommodate the extra border on hover of the bottom row when top row is active, but it does not resolve the inverse - that being bottom row active, hovering top row.