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

          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
          Hide
          ann.loraine Ann Loraine added a comment -

          Merged to master.

          Show
          ann.loraine Ann Loraine added a comment - Merged to master.
          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.
          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]

            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: