Uploaded image for project: 'IGB'
  1. IGB
  2. IGBF-2224

Modify CSS for font size and Categories section

    Details

    • Type: Task
    • Status: Closed (View Workflow)
    • Priority: Major
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: None
    • Labels:
      None
    • Story Points:
      1
    • Sprint:
      Spring 3 : 17 Feb to 28 Feb, Spring 4 : 2 Mar to 13 Mar, Spring 5 : 16 Mar to 27 Mar, Spring 6 : 30 Mar to Apr 10

      Description

      Problem: The Categories section on the home page is too narrow to show the entire text of many categories.

      Modify the CSS in App Store:

      • Increase width of area in which Categories are displayed. Follow example of https://apps.cytoscape.org. Note that the margins of left column are smaller in IGB App Store.
      • Decrease font sizes for descriptive text shown in App tiles - follow example of https://apps.cytoscape.org

      Before submitting PR, deploy onto test server and link to it here.

        Attachments

          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 Sameer Shanbhag [ sameer ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Status To-Do [ 10305 ] In Progress [ 3 ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Assignee Sameer Shanbhag [ sameer ]
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          Changes are live on:
          https://dev-appstore-1.bioviz.org/

          Change Log:
          1. size for Category Section increased for a better view
          2. App Buttons now have Curved Borders to match with Cytoscape
          3. Spacing for App Buttons changes to match with Cytoscape (Removed extra whitespaces)
          4. Search Panel Improved (Text Color, Place Holder Color, size) to match with Cytoscape

          Pull Request Can be found at:
          https://bitbucket.org/lorainelab/appstore/pull-requests/204/igbf-2224/diff

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Changes are live on: https://dev-appstore-1.bioviz.org/ Change Log: 1. size for Category Section increased for a better view 2. App Buttons now have Curved Borders to match with Cytoscape 3. Spacing for App Buttons changes to match with Cytoscape (Removed extra whitespaces) 4. Search Panel Improved (Text Color, Place Holder Color, size) to match with Cytoscape Pull Request Can be found at: https://bitbucket.org/lorainelab/appstore/pull-requests/204/igbf-2224/diff
          sameer Sameer Shanbhag (Inactive) made changes -
          Status In Progress [ 3 ] Needs 1st Level Review [ 10005 ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Assignee Sameer Shanbhag [ sameer ]
          Hide
          ann.loraine Ann Loraine added a comment -

          Merged to master.

          Show
          ann.loraine Ann Loraine added a comment - Merged to master.
          ann.loraine Ann Loraine made changes -
          Status Needs 1st Level Review [ 10005 ] First Level Review in Progress [ 10301 ]
          ann.loraine Ann Loraine made changes -
          Status First Level Review in Progress [ 10301 ] Ready for Pull Request [ 10304 ]
          ann.loraine Ann Loraine 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 -
          Status Merged Needs Testing [ 10002 ] Post-merge Testing In Progress [ 10003 ]
          ann.loraine Ann Loraine made changes -
          Status Post-merge Testing In Progress [ 10003 ] To-Do [ 10305 ]
          Hide
          ann.loraine Ann Loraine added a comment -

          Can you make the whitespace widths the same? For example, can you make the whitespace separating App tiles in horizontal and vertical dimensions identical in width to the vertical white stripe to the right of the navigation section?

          Suggestion: Tiles and navigation panel elements seem to have multiple margins specified. There are also multiple containers. It might be easier to manage all this if there could be one single container for the page. Then you can lay out everything in a grid pattern and allow bootstrap gutters to handle spacing between elements.

          Show
          ann.loraine Ann Loraine added a comment - Can you make the whitespace widths the same? For example, can you make the whitespace separating App tiles in horizontal and vertical dimensions identical in width to the vertical white stripe to the right of the navigation section? Suggestion: Tiles and navigation panel elements seem to have multiple margins specified. There are also multiple containers. It might be easier to manage all this if there could be one single container for the page. Then you can lay out everything in a grid pattern and allow bootstrap gutters to handle spacing between elements.
          ann.loraine Ann Loraine made changes -
          Assignee Sameer Shanbhag [ sameer ]
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          This design Incline to the Cytoscape Appstore. I tried reducing the whitespace between the App button and the Categories Section and the website looks pretty cramped up.

          I have updated the Dev-appstore-1 with a reduced margin.

          The Demo can be found at:
          https://dev-appstore-1.bioviz.org/

          Please have a look and let me know if this looks good.

          We cannot use Bootstrap Gutter as the default configuration for Gutter in Bootstrap is 30px.
          [~aloraine]

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - This design Incline to the Cytoscape Appstore. I tried reducing the whitespace between the App button and the Categories Section and the website looks pretty cramped up. I have updated the Dev-appstore-1 with a reduced margin. The Demo can be found at: https://dev-appstore-1.bioviz.org/ Please have a look and let me know if this looks good. We cannot use Bootstrap Gutter as the default configuration for Gutter in Bootstrap is 30px. [~aloraine]
          ann.loraine Ann Loraine made changes -
          Sprint Spring 2 : 20 Jan to 31 Jan [ 85 ] Spring 3 : 17 Feb to 21 Feb [ 87 ]
          ann.loraine Ann Loraine made changes -
          Rank Ranked higher
          nfreese Nowlan Freese made changes -
          Sprint Spring 3 : 17 Feb to 28 Feb [ 87 ] Spring 3 : 17 Feb to 28 Feb, Spring 4 : 2 Mar to 13 Mar [ 87, 89 ]
          nfreese Nowlan Freese made changes -
          Rank Ranked higher
          nfreese Nowlan Freese made changes -
          Sprint Spring 3 : 17 Feb to 28 Feb, Spring 4 : 2 Mar to 13 Mar [ 87, 89 ] Spring 3 : 17 Feb to 28 Feb, Spring 4 : 2 Mar to 13 Mar, Spring 5 : 16 Mar to 27 Mar [ 87, 89, 90 ]
          nfreese Nowlan Freese made changes -
          Rank Ranked higher
          nfreese Nowlan Freese made changes -
          Sprint Spring 3 : 17 Feb to 28 Feb, Spring 4 : 2 Mar to 13 Mar, Spring 5 : 16 Mar to 27 Mar [ 87, 89, 90 ] Spring 3 : 17 Feb to 28 Feb, Spring 4 : 2 Mar to 13 Mar, Spring 5 : 16 Mar to 27 Mar, Spring 6 : 30 Mar to Apr 10 [ 87, 89, 90, 91 ]
          nfreese Nowlan Freese made changes -
          Rank Ranked higher
          ann.loraine Ann Loraine made changes -
          Status To-Do [ 10305 ] In Progress [ 3 ]
          ann.loraine Ann Loraine made changes -
          Status In Progress [ 3 ] Needs 1st Level Review [ 10005 ]
          ann.loraine Ann Loraine made changes -
          Status Needs 1st Level Review [ 10005 ] First Level Review in Progress [ 10301 ]
          ann.loraine Ann Loraine made changes -
          Status First Level Review in Progress [ 10301 ] Ready for Pull Request [ 10304 ]
          ann.loraine Ann Loraine 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 -
          Status Merged Needs Testing [ 10002 ] Post-merge Testing In Progress [ 10003 ]
          ann.loraine Ann Loraine made changes -
          Resolution Done [ 10000 ]
          Status Post-merge Testing In Progress [ 10003 ] Closed [ 6 ]

            People

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

              Dates

              • Created:
                Updated:
                Resolved: