pcreglow commented 9 years ago

TIY-Catalog: Team-Badass Plan

User Story - Category Search

Show Results Box - Left side, listing all available categories a user can pick from
Refine your search option - Left side, under Show Results Box
- User can refine search based on Item Type, Price, Color, Ordering Options, Location, & Ship-To
- Users select via check box or entering information
Product Items Display
- 3 items per row, Page 1 with a total 14 rows
- Product images and info box are all the same size
- Product Details - Image, Price, Seller User Name, Item Title
- Hover State - Allows user to favorite item and access a hamburger menu to select a user wish list
Bottom of page - Page Selector
- User can jump to a specific page of product results

Feature/Category List

Header: "Show results for: "
Container: <ul> with <li>
<li> : Includes an <a> links to a specific category

Feature/Refine Your Search

Header: "Refine you search: "
Container:
- Item Type - Includes <li> with <a> embedded
- Price - Includes two <input> from low to high, <button> that submits price
- Filter by Color - Includes <a> linked to specific color result by hexadecimal color
- Ordering Options - Includes header and <a> like checkboxes
- Shop Location - Includes header and options of Anywhere, United States
- Choose a custom location - Input field pops up to replace Anywhere, United States option
- Submit button after entering custom location, Cancel to exit custom location
- Ship To - BIG ASS <select> tag featuring countries to ship to

Feature/Product Results

Header: Showing number of results, Sort by option <select> - most recent, highest price, lowest price
Product Listing: Per page, 3 products per row, 14 rows per page

Feature/Product Template

Image: Square, all products have same size image
Product Info: Title, Seller Name and Price below image
- Seller Name: Link to seller store and product
- Image: Link to seller store and product
- Hover state: Heart to click to like product, hamburger menu to select user wish list
- Container: Listings are inline-block, listings are 3 to a row

Feature/Page Selector

Span: Shop suggestions - lists shop recommendations
Page selector: Pagination!
- Back Button
- Page numbers
- Last page number
- Forward Button

Feature/Product Details

Header Row: Top Left - Image for Seller Store, Links to store page when click image
- Shop Name - Link to Seller Store - Stacked on top of a <button> to 'favorite' a store
- Includes basic text and a heart icon
- Hover state: Background made darker when hover
- Right side of header - Line of 5 evenly shaped boxes, represent for item images on left
- Box on right lists number of items available in store, hyperlink to store, and every item has hover effect
- Items left hover darker - opacity black - one on right hovers blue
Body - 2 columns, 3/5ths and 2/5ths ?
- Left column - 3/5ths
- Everything stacks!
- 100% width for left column
- Block - includes a 'favorite' <button> with heart icon, hover effect - gets darker
- <button> takes up entire height of box, element on right is broken into 2 stacked boxes
- Boxes on right are about 80% of entire width of block, favorite button 20% ?
BIG ASS image of the product img 570 x 570
- One button on left, one on right - hover effect on each, change to blue color, inline with image
- Below image, box of small thumbnail images - alternate pictures of product
- To right of thumbnail images, a zoom <span> tag and magnify glass icon
Tab Row - 3 tabs included, inline-block, no space between tabs
- Middle tab has star icons
- Below tab row, border bottom
- Inactive tabs are darkgrey
Right column - 2/5ths
- BIG section - bordered with faint green, thick border, border radius
- Category tags assigned to item - 100% width of BIG section
- Box with two elements - Price and Currency Selector ($ USD)
- Ask a Question - <button> gets darker on hover
- Line for quantity - display: block, below is selector to select quantity
- Below is word 'color', selector for color - placeholder text is 'Select a color'
- <ul> <li> list titled with overview - individual list items take up their own line - block elements?
- Links for users who have left feedback and favorited item
BIG ASS green button below BIG section - Add to cart - hover effect as green gets darker
Social box - grey box with thick grey border - two buttons aligned left
- Favorite button with heart icon, hamburger menu icon, 'Add to' and down arrow, hover effect - darker
Below social box, 4 different icons - Twitter, Pinterest, Tumblr, Facebook 'like'
BIG ASS green box with thick light blue border - border radius
- Block level element - Seller store logo, below is Seller Store name, below is Seller location
- Block elements - 50% width, 2 per line, each element has the following:
- Image, full width (100% of 50%)
- Listing Title full width (100% of 50%)
- Line for the Item Price - green, full width (100% of 50%)
- Hover effect - Image, Title, Price surrounded by a border, border becomes darker
- Hover effect - Heart icon to favorite, hamburger menu