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
            ssegu Sai Supreeth Segu (Inactive) added a comment -

            I have moved all the items in Submit_App page to center. Dr. [~aloraine] and Sameer Shanbhag, please review my changes.
            Link for my branch: https://bitbucket.org/supreeth27/appstore/branch/IGBF-2733#diff

            Show
            ssegu Sai Supreeth Segu (Inactive) added a comment - I have moved all the items in Submit_App page to center. Dr. [~aloraine] and Sameer Shanbhag , please review my changes. Link for my branch: https://bitbucket.org/supreeth27/appstore/branch/IGBF-2733#diff
            Hide
            ann.loraine Ann Loraine added a comment - - edited

            It would be good if you can increase the space between the heading "Submit your app" and the horizontal orange line to match the same vertical distance between "Submit your app" and "Select a file". Could you give that a try and then upload a new screen capture?

            Show
            ann.loraine Ann Loraine added a comment - - edited It would be good if you can increase the space between the heading "Submit your app" and the horizontal orange line to match the same vertical distance between "Submit your app" and "Select a file". Could you give that a try and then upload a new screen capture?
            Hide
            ssegu Sai Supreeth Segu (Inactive) added a comment -

            I have added space between "Submit your app" and "Orange line". Please review my changes.
            Link for th branch: https://bitbucket.org/supreeth27/appstore/branch/IGBF-2733#diff

            Show
            ssegu Sai Supreeth Segu (Inactive) added a comment - I have added space between "Submit your app" and "Orange line". Please review my changes. Link for th branch: https://bitbucket.org/supreeth27/appstore/branch/IGBF-2733#diff
            Hide
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment - - edited

            Sai Supreeth Segu will it be possible to move the Next button to left align? It looks bit weird at the current position since it is somewhere in between center and left margin.

            cc: Dr. [~aloraine]

            Show
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment - - edited Sai Supreeth Segu will it be possible to move the Next button to left align? It looks bit weird at the current position since it is somewhere in between center and left margin. cc: Dr. [~aloraine]
            Hide
            ssegu Sai Supreeth Segu (Inactive) added a comment -

            I have made changes as suggested by Chirag Chandrahas Shetty.
            Please review my changes: https://bitbucket.org/supreeth27/appstore/branch/IGBF-2733#diff

            Show
            ssegu Sai Supreeth Segu (Inactive) added a comment - I have made changes as suggested by Chirag Chandrahas Shetty . Please review my changes: https://bitbucket.org/supreeth27/appstore/branch/IGBF-2733#diff
            Hide
            ann.loraine Ann Loraine added a comment -

            Assigning this to Chirag Chandrahas Shetty to review the latest changes.

            Show
            ann.loraine Ann Loraine added a comment - Assigning this to Chirag Chandrahas Shetty to review the latest changes.
            Hide
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment -

            Sai Supreeth Segu and [~aloraine] 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 (Inactive) added a comment - Sai Supreeth Segu and [~aloraine] 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
            ann.loraine 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
            ann.loraine 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 (Inactive) 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. [~aloraine]
            Hide
            ann.loraine Ann Loraine added a comment - - edited

            Merged and deployed.

            Show
            ann.loraine Ann Loraine added a comment - - edited Merged and deployed.
            Hide
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment -

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

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

              People

              • Assignee:
                ssegu Sai Supreeth Segu (Inactive)
                Reporter:
                ann.loraine Ann Loraine
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: