Details
-
Type: Improvement
-
Status: Closed (View Workflow)
-
Priority: Major
-
Resolution: Done
-
Affects Version/s: None
-
Fix Version/s: None
-
Labels:None
-
Story Points:1.5
-
Epic Link:
-
Sprint:Fall 4 : 30 Sep to 11 Oct
Description
Now that IGB App Store core functionality is in place, let's work to improve IGB App Store appearance. This is important because developers will be more likely to contribute Apps if they feel like their contributions will look amazing when presented in App Store. They will also be more inspired to trust the site if it looks professional and polished.
The IGB App Store "tile" visualization appears on almost every page - it is a key graphic that sets the tone for the entire site. This aspect of App Store needs to look amazing!
IGB App Store tiles are based on Cytoscape App Store tiles, which have elements which make them look polished and professional.
See:
For this task, modify the IGB App Store tiles to emulate the polish and professional appearance of Cytoscape App Store tiles. For example:
- Modify Bundle_Name text. It should be the same color as hyperlinks. Upon mouse-over, it should turn black (providing user feedback for the mouse-over action).
- Currently, mousing over a Bundle_Name in IGB App Store triggers display of a speech ballon-shaped tooltip with white text and black background that repeats the text of the Bundle_Name. Remove this.
- Match the text layout of the Cytoscape tiles to ensure that there is enough whitespace margin all around - in both mouse-over and non-mouse-over state
- Cytoscape tiles are surrounded by a faint border line, which creates a nice visual separation between the tile itself and the rest of the page. Add this to IGB App Store tiles.
- Check tile aspect ratio for IGB App Store tiles. Make sure it's using golden ratio. Golden ratio is a super-easy way to create a sense of harmonious ease in visual interfaces with minimal effort! See: https://www.canva.com/learn/what-is-the-golden-ratio/
- Mousing over a Cytoscape tile does not cause anything on the page to change position or wiggle. Make sure that when users mouse over tiles in IGB App Store, the rest of the page stays stable - no movement or change that could distract the user or create a sense of instability.
Prof. [~aloraine]
I have updated my EC2 instance with my latest changes to the
IGBF-2039branch. Please have a look and suggest changes if required.