Merge pull request #39 from beanh66/master

Updating catalog designs

web-console/1-homepage/catalog.md

@@ -6,20 +6,28 @@
 
 ## Browse Catalog
 
-![catalog](img/OpenShift-Next-Homepage-AllCat-Getting-Started.png)
+![catalog](img/Browse-1.png)
 - Initially, upon arriving on the page, the `All` section is highlighted, underlined and expanded, with the catalog items sorted alphabetically by name.
 - Deploy Image and Import YAML/JSON links are available on the right side of the catalog primary categories bar.
 - Clicking either link will trigger the relevant [overlay panel actions](http://openshift.github.io/openshift-origin-design/web-console/4-patterns/overlay-panel).
 
-![catalog](img/OpenShift-Next-Homepage-AllLang-SingleEmptyCard.png)
+![catalog](img/Browse-3.png)
 - Any tabs that have subcategories of catalog items will have those subcategories displayed as tiles.
 - These tabs should also contain an a `All` tile for catalog items from all subcategories.
-
-### Hover States
-![hover](img/OpenShift-Next-Homepage-HoverItem-ProjectList.png)
-- Primary categories are highlighted in a lighter blue on hover.
+- Clicking on a subcategory tile will open a panel that contains the catalog items.
+- By default, the `All` tile should be collapsed.
+
+![catalog](img/Browse-2.png)
+- Clicking on an expanded tile should collapse that tile.
+
+### Selection and Hover States
+![hover](img/Browse-4.png)
+- The selected primary category will be blue with an underline.
+- On hover, the primary categories are highlighted in a lighter blue.
+- The selected subcategory icon will be a darker shade of the remaining unselected icons (light grey).
+- On hover, the subcategory text and icon will be blue.
 - Deploy Image and Import YAML are highlighted in a lighter blue on hover.
-- Hovering over a catalog item will highlighted the item in a circle and change the item name to blue.
+- On hover, catalog items will have a blue circle around the icon and  blue text.
 
 ### Implementation Details
 - Administrators should have the ability to determine which catalog items are available to users.      
@@ -30,25 +38,26 @@
 	- **Note:** Eventually, customers will have the capability to add their own custom category tabs.
 - Some primary categories will have a secondary level of categorization available.
 - For secondary levels of categorization, there should again be an `Other` category if there are items to display (not shown in mockup).
-- Clicking on a subcategory will open a scrollable panel that contains the catalog items.
 
-### Responsive State
-![mobile-1](img/OpenShift-Next-Mobile-V2-scrolledup.png)
 
-- On mobile, the catalog tabs should stack with arrows to the right.
-- Deploy Image and Import YAML should be displayed below all primary categories and should have a different visual treatment from the tabs.
+### Responsive States
 
-![mobile-2](img/OpenShift-Next-Mobile-subcategories.png)
+![catalog](img/Browse-5.png)
 
-- If subcategories exist, selecting the primary category will bring users to another screen to view subcategories as tiles.
-- Clicking back will bring users back to the home page with all primary tabs listed.
+![catalog](img/Browse-6.png)
 
-![mobile-3](img/OpenShift-Next-Mobile-subcategoryselected-V2.png)
+![catalog](img/Browse-7.png)
 
-- Selecting a subcategory tile will bring users to another screen to view catalog items by scrolling.
+- On smaller viewports the tiles may need to wrap.
+- Expanding a tile will always display the white caret with the catalog contents below the tile.
+
+#### Mobile
+- On mobile, the catalog tabs should stack with arrows to the right.
+- Deploy Image and Import YAML should be displayed below all primary categories and should have a different visual treatment from the tabs.
+- If subcategories exist, selecting the primary category will bring users to another screen to view subcategories.
+- On mobile, the subcategories will have the same visual representation as the primary categories.
+- Clicking back will bring users back to the home page with all primary tabs listed.
+- Selecting a subcategory will bring users to another screen to view catalog items by scrolling.
+- **Note:** When subcategories do not exist for a tab, selecting a primary category will bring the user directly to scroll through the catalog items.
 
-![mobile-4](img/OpenShift-Next-Mobile-subcategorydropdown.png)
-- The category title will be listed with a dropdown option to switch to another subcategory without navigating back to tiles.
-- The current selection will be highlighted with the icon in full color. All other images are muted.
-- Clicking "back" from this screen will navigate back to the initial Home Page (skipping the subcategory tile view).
-- **Note:** When subcategories do not exist for a tab, selecting a primary category will bring the user directly to a screen like this (without a dropdown option at the top).
+![mobile-1](img/MOBILE-Catalog.png)

web-console/1-homepage/project-panel.md

@@ -102,7 +102,7 @@
 ## Responsive Behavior/ Mobile View
 - On a mobile device, the right panel should disappear and move to the bottom of the screen, below the catalog content.
 
-![template](img/OpenShift-Next-Mobile-V2-scrolledmore.png)
+![template](img/MOBILE-Projects.png)
 - Selecting View All will display the full projects lists on a new screen with the back button available.
 - Selecting create project will show a full screen with the form and two action buttons, cancel and create at the bottom.