Sizing style changes:

[rhodges]

• reduce padding
• reduce font size
• change the copy to reduce letter count
• June 23 (tmrw) design review

All pages well:

• reduce padding
• reduce font size
• change the copy to reduce letter count
• June 23 (tmrw) design review
• X-Frame-Options allow google forms

Filter modals:

• Can the text displayed at top be longer than the filter text shown on home / results page? If so we can supply that.
• “x” for closing the overlay is styled wrong (see comps) and behavior is jumpy
• Please apply styles from comp to “clear” and “apply” button
• Image needs adding to the three with images, will supply by 4pm
• Check box fill should be green
• As discussed in Wednesday meeting, better screen positioning and sizing for overlay (centered, balanced) as constraints allow. Can columns be single when content allows for that w/o scrolling for example?
• Small text field under title needs adding, reads “You can select multiple filters, explanatory text.” in comps

Specifics:

• kiwi maru font for page header title
• Remove 'All' from 'Browse all Producers'
• use pt-1 instead of pt-4 in well
• Availability, Producer Identity, USDA Components, Browse Providers
• Darker filter color & on hover
• white right arrow icon default on browse all
• use a spinner in place of ...
• use svg in header
• use correct type above categories
• create higher res
• borders on category cards
• control image size
• hard code image size to

Footer:

• 1st child of footer-col is an image increase the max height/width and min height/width '+', '?', '*'
• increase link icon footer icons opacity on hover
• check footer icon
• Replace bottom border with 'underlines'
• Have link icons 'hug' the link (not pushed off of column)

Home page:

• 4. Product boxes are varying heights — can i standardize the image size to avoid that? Ideally we could have a uniform space between the bottom line of text and the bottom of the box
  • --Create Schema for providers info #4: Yes, but product images are managed in Django rather than Wagtail, and width can impact what scale images are shown at. You may need to work with @Angela to make sure all product images are at least the same ratio, if not the exact dimensions
• 6. As mentioned in our mtg the title at the top of the page should be Kiwi Maru
• see more filters
• * [ ] Home page & Results: Filter font should be bold and the hex color is off for font and outline (should be #4D2908). Font size should be 15. Worth trying 14 to get on a single line
• Home page: ’Search by product type” font should be Nunito Black / 18pt / 75 letter spacing
• Home page product boxes should be square cornered, no rounding
• 5. Product boxes: when the product name is two lines, the line spacing should be smaller (see Summer Squash)
• 7. Can we make the link to the video an anchor to that section of the about page? So we don’t take people off the site
  • -- Create Django Admin Form for product hierarchy and products #7: I am seeing a lot of requests, but no support for 'anchor tags' for internal links. I could create a widget similar to the 'google form' links, but it also would not be able to be put into a paragraph -- at best sandwiched between two paragraphs
  • ACK! I've already called it quits for the week, but just found this. That link claims to show how to make 'anchor links' AND 'set image dimensions' in Wagtail RTE. I'll DEFINITELY be looking at this next week!
• 8. Let’s keep skimming padding off the green area until we can see half the apple
  • -- Landing page: query and tile product categories #8: For a 1280x800 screen? We cannot use this metric without a resolution.
• 10. “Browse providers” button (whether it says “show results” or not!) should have a solid white background

results:

• why does filter form flash when navigating from home to results page

• full screen modal till results returned

• Results Counter Size, on certain screens (circle)

• active filters button styling

• same filter button text changes as home page

• Practices in place of Production Practices

• padding changes same as home page

• Clear All button as link to /results/

• Apply button styles in modal,

  • hover overlay white opacity at .35 and icon color
  • add icon
  • background color

• checkout hover on filter

• exit button in modals

• center modal on screen, try to look like county

• Can we hide “Try removing filters to see more results” from results pages without any filters applied?

• The fold again here! Can we buy enough vertical space on almost all screen resolutions (except mobile and tablet) so that we see the names of the first row of results above the fold? We can do that by getting filters on a single line and skimming off padding

• Clear all filter button needs adding back in

• Filter text shown on results and home page edits per angela below:

• Please change the filter text from “Production practices” --> “Practices”

• Filter text change: “Availability by County” --> “Availability”

• Filter text change: “USDA Meal Components” --> “Meal Components”

• Results boxes shouldn’t have rounded corners

• When a filter is engaged it needs to be shown with a white opacity on the background to indicate it has been applied to the results shown (true for results and homepage)

• Please add colon after “We found x producers that meet your criteria”

• Location font in results boxes should be Nunito bold / 10pt / 50pt letter spacing

Producer page:

• product details modal
  • Producer Product Column Organization #183
  • dropdown options
• column width on producer page
• contact info font size
• Product buttons
  • 2px border on product button
  • border radius on product buttons
• border right between 2 main columns on producer page
• send slack info about URL for producer on Zoom
• URL wrap text for webiste
• extra padding between titles and details
• Icon wrapping for titles that are too long
• add external links styling for external links
• check if mobile users can use info button
• information last updated on styles, zilla italics. additonal top margin
• Additional margin between 'last updated' and 'bottom blurb'
• add school icon for has sold to schools before
• class 'modal-launcher' should be bold, underlined, and with cursor: "pointer" (see last line of blurb on staging)

Product detail modal:

• 1. Can I supply a comp for this special case functionality? It could be done by Friday morning — maybe we aren’t working til Monday tho.

• 2. How can we provide more clarity for our users when they reach the product detail overlay with product types selected? Can we have some explanatory text there?

• 3. More product categories coming from Angela, she is adding them to the database Friday. Will they then automatically show up in the appropriate overlays then?

• Google form modal height (fill screen)

Content Page:

• Increased padding between header (yellow) and content (in white)