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

            Hide
            sameer Sameer Shanbhag (Inactive) added a comment -

            Prof. [~aloraine]

            I have updated my EC2 instance with my latest changes to the IGBF-2039 branch. Please have a look and suggest changes if required.

            Show
            sameer Sameer Shanbhag (Inactive) added a comment - Prof. [~aloraine] I have updated my EC2 instance with my latest changes to the IGBF-2039 branch. Please have a look and suggest changes if required.
            Hide
            ann.loraine Ann Loraine added a comment -

            Change requests:

            • 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
            • Match the line spacing of Cytoscape tiles - there is a slightly larger gap between the Bundle_Name and short description text.
            • Also please match the fontface styling. The Cytoscape App Store Bundle-Description fontface appears to be a bit bigger - possibly it is in boldface? It is larger than the text following it. It is subtle but it looks very nice. Please try to match this.
            • Use rounded corners not sharp.
            • The logic that shows "..." text is working a bit strangely. For some reason the 3rd line of 23 and Me App short description text is not showing more text even though there is space to show more text.
            Show
            ann.loraine Ann Loraine added a comment - Change requests: 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 Match the line spacing of Cytoscape tiles - there is a slightly larger gap between the Bundle_Name and short description text. Also please match the fontface styling. The Cytoscape App Store Bundle-Description fontface appears to be a bit bigger - possibly it is in boldface? It is larger than the text following it. It is subtle but it looks very nice. Please try to match this. Use rounded corners not sharp. The logic that shows "..." text is working a bit strangely. For some reason the 3rd line of 23 and Me App short description text is not showing more text even though there is space to show more text.
            Hide
            ann.loraine Ann Loraine added a comment -

            Also this one needs to be done as well:

            • 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).
            Show
            ann.loraine Ann Loraine added a comment - Also this one needs to be done as well: 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).
            Hide
            sameer Sameer Shanbhag (Inactive) added a comment -

            Most of the Changes are pushed to my Devappstore.
            Please open the Devappstore-1 in Incognito mode as it is a UI change.

            Request Completed:
            1. Spacing in the Tiles
            2. Matching the Line Spacing
            3. [Not sure about the font face used by cytoscape(will change this in next commit)]
            4. "..." will no longer be shown .. Line display is handled using CSS
            5. Bundle_name text is converted to Hyperspace.

            https://dev-appstore-1.bioviz.org/

            Show
            sameer Sameer Shanbhag (Inactive) added a comment - Most of the Changes are pushed to my Devappstore. Please open the Devappstore-1 in Incognito mode as it is a UI change. Request Completed: 1. Spacing in the Tiles 2. Matching the Line Spacing 3. [Not sure about the font face used by cytoscape(will change this in next commit)] 4. "..." will no longer be shown .. Line display is handled using CSS 5. Bundle_name text is converted to Hyperspace. https://dev-appstore-1.bioviz.org/
            Show
            sameer Sameer Shanbhag (Inactive) added a comment - Pull Request Submitted: https://bitbucket.org/lorainelab/appstore/pull-requests/128/igbf-2039/diff Changes are live on: https://dev-appstore-1.bioviz.org/
            Hide
            ann.loraine Ann Loraine added a comment -

            Merged, not yet deployed on dev-appstore-2

            Show
            ann.loraine Ann Loraine added a comment - Merged, not yet deployed on dev-appstore-2
            Hide
            ann.loraine Ann Loraine added a comment -

            Merged and deployed to https://dev-appstore-2.bioviz.org

            Show
            ann.loraine Ann Loraine added a comment - Merged and deployed to https://dev-appstore-2.bioviz.org
            Hide
            svallapu Sai Charan Reddy Vallapureddy (Inactive) added a comment -

            Tested this in dev-appstore-2. Tiles are looking same as Cytoscape.

            Show
            svallapu Sai Charan Reddy Vallapureddy (Inactive) added a comment - Tested this in dev-appstore-2. Tiles are looking same as Cytoscape.

              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: