Details

    • Type: Improvement
    • Status: Closed (View Workflow)
    • Priority: Major
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: None
    • Labels:
      None

      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.
      • 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.

        Attachments

          Issue Links

            Activity

            ann.loraine Ann Loraine created issue -
            ann.loraine Ann Loraine made changes -
            Field Original Value New Value
            Epic Link IGBF-1388 [ 17463 ]
            ann.loraine Ann Loraine made changes -
            Rank Ranked higher
            ann.loraine Ann Loraine made changes -
            Assignee Ann Loraine [ aloraine ]
            ann.loraine Ann Loraine made changes -
            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:

            * http://apps.cytoscape.org/

            For this task, modify the IGB App Store tiles to mimic 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.
            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:

            * http://apps.cytoscape.org/

            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.
            ann.loraine Ann Loraine made changes -
            Link This issue relates to IGBF-2034 [ IGBF-2034 ]
            sameer Sameer Shanbhag (Inactive) made changes -
            Assignee Sameer Shanbhag [ sameer ]
            sameer Sameer Shanbhag (Inactive) made changes -
            Status Open [ 1 ] To-Do [ 10305 ]
            sameer Sameer Shanbhag (Inactive) made changes -
            Status To-Do [ 10305 ] In Progress [ 3 ]
            sameer Sameer Shanbhag (Inactive) made changes -
            Status In Progress [ 3 ] Needs 1st Level Review [ 10005 ]
            sameer Sameer Shanbhag (Inactive) made changes -
            Status Needs 1st Level Review [ 10005 ] First Level Review in Progress [ 10301 ]
            sameer Sameer Shanbhag (Inactive) made changes -
            Status First Level Review in Progress [ 10301 ] Ready for Pull Request [ 10304 ]
            sameer Sameer Shanbhag (Inactive) made changes -
            Status Ready for Pull Request [ 10304 ] Pull Request Submitted [ 10101 ]
            ann.loraine Ann Loraine made changes -
            Status Pull Request Submitted [ 10101 ] Reviewing Pull Request [ 10303 ]
            ann.loraine Ann Loraine made changes -
            Status Reviewing Pull Request [ 10303 ] Merged Needs Testing [ 10002 ]
            ann.loraine Ann Loraine made changes -
            Assignee Sameer Shanbhag [ sameer ]
            svallapu Sai Charan Reddy Vallapureddy (Inactive) made changes -
            Assignee Sai Charan Reddy Vallapureddy [ svallapu ]
            svallapu Sai Charan Reddy Vallapureddy (Inactive) made changes -
            Status Merged Needs Testing [ 10002 ] Post-merge Testing In Progress [ 10003 ]
            svallapu Sai Charan Reddy Vallapureddy (Inactive) made changes -
            Resolution Done [ 10000 ]
            Status Post-merge Testing In Progress [ 10003 ] Closed [ 6 ]
            svallapu Sai Charan Reddy Vallapureddy (Inactive) made changes -
            Assignee Sai Charan Reddy Vallapureddy [ svallapu ] Sameer Shanbhag [ sameer ]
            ann.loraine Ann Loraine made changes -
            Workflow Fall 2019 Workflow Update [ 20796 ] Revised Fall 2019 Workflow Update [ 22528 ]
            ann.loraine Ann Loraine made changes -
            Link This issue relates to IGBF-2812 [ IGBF-2812 ]

              People

              • Assignee:
                sameer Sameer Shanbhag (Inactive)
                Reporter:
                ann.loraine Ann Loraine
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: