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

Further improve content layout on "Submit your App" page

    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:
      Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22, Winter 3 Jan 25 - Feb 5

      Description

      The current "Submit your App" page looks very unbalanced because all the content text is pushed over to the left side of the page, leaving a large white area on the right. Also, the space between elements a bit uneven. For example, the "No file chosen" label has only a small amount of space between it and the "Choose File" button. It looks a bit cramped and uneven.

      Try moving the content so that it occupies the center of the page, but continues to be left-justified. Also improve the layout of the elements so that it looks more even and harmonious.

      Test your design by viewing the page at different magnifications and different window sizes.

        Attachments

          Issue Links

            Activity

            Hide
            chirag24 Chirag Chandrahas Shetty added a comment -

            Sai Supreeth Segu and Ann Loraine Everything looks good but I think we can use some of the bootstrap library to make the form look good and more responsive.

            Please check File input and Sizing sections in the following link:
            https://getbootstrap.com/docs/5.0/forms/form-control/

            Show
            chirag24 Chirag Chandrahas Shetty added a comment - Sai Supreeth Segu and Ann Loraine Everything looks good but I think we can use some of the bootstrap library to make the form look good and more responsive. Please check File input and Sizing sections in the following link: https://getbootstrap.com/docs/5.0/forms/form-control/
            Hide
            aloraine Ann Loraine added a comment -

            Thank you for looking into this!
            Let's merge the proposed change for now.
            Chirag Chandrahas Shetty - could you please create a new ticket to explore using bootstrap features to improve the appearance of the entry form? Please assign it to yourself as well, and add it to the current sprint.

            Requirements:

            • The basic functionality should stay the same.
            • All the user-entry components should be visible at once to help with learnability.
            Show
            aloraine Ann Loraine added a comment - Thank you for looking into this! Let's merge the proposed change for now. Chirag Chandrahas Shetty - could you please create a new ticket to explore using bootstrap features to improve the appearance of the entry form? Please assign it to yourself as well, and add it to the current sprint. Requirements: The basic functionality should stay the same. All the user-entry components should be visible at once to help with learnability.
            Show
            ssegu Sai Supreeth Segu added a comment - Please review my pull request: https://bitbucket.org/lorainelab/appstore/pull-requests/267/igbf-2733-further-improve-content-layout cc: Chirag Chandrahas Shetty and Dr. Ann Loraine
            Hide
            aloraine Ann Loraine added a comment - - edited

            Merged and deployed.

            Show
            aloraine Ann Loraine added a comment - - edited Merged and deployed.
            Hide
            chirag24 Chirag Chandrahas Shetty added a comment -

            Tested on https://devappstore5.bioviz.org/. Everything looks good . Closing the ticket.

            Show
            chirag24 Chirag Chandrahas Shetty added a comment - Tested on https://devappstore5.bioviz.org/ . Everything looks good . Closing the ticket.

              People

              • Assignee:
                ssegu Sai Supreeth Segu
                Reporter:
                aloraine Ann Loraine
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: