Details
-
Type:
Task
-
Status: Closed (View Workflow)
-
Priority:
Major
-
Resolution: Done
-
Affects Version/s: None
-
Fix Version/s: None
-
Labels:None
-
Story Points:1
-
Epic Link:
-
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
- relates to
-
-
- Closed
-
Activity
| Field | Original Value | New Value |
|---|---|---|
| Epic Link | IGBF-2563 [ 18746 ] |
| Rank | Ranked higher |
| Attachment | SubmitAppPage.png [ 15103 ] |
| 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. |
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. |
| Status | To-Do [ 10305 ] | In Progress [ 3 ] |
| Assignee | Sai Supreeth Segu [ ssegu ] |
| Status | In Progress [ 3 ] | To-Do [ 10305 ] |
| Assignee | Sai Supreeth Segu [ ssegu ] |
| Status | To-Do [ 10305 ] | In Progress [ 3 ] |
| Assignee | Sai Supreeth Segu [ ssegu ] |
| Attachment | Fixing_Submit_App.png [ 15105 ] |
| Status | In Progress [ 3 ] | Needs 1st Level Review [ 10005 ] |
| Assignee | Sai Supreeth Segu [ ssegu ] |
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?
| Status | Needs 1st Level Review [ 10005 ] | First Level Review in Progress [ 10301 ] |
| Status | First Level Review in Progress [ 10301 ] | To-Do [ 10305 ] |
| Assignee | Sai Supreeth Segu [ ssegu ] |
| Status | To-Do [ 10305 ] | In Progress [ 3 ] |
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
| Attachment | Fixing_Vertical_Space.png [ 15108 ] |
| Status | In Progress [ 3 ] | Needs 1st Level Review [ 10005 ] |
| Assignee | Sai Supreeth Segu [ ssegu ] |
| Sprint | Winter 1 Dec 28 - Jan 8 [ 111 ] | Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22 [ 111, 112 ] |
| Rank | Ranked higher |
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]
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] |
| Status | Needs 1st Level Review [ 10005 ] | First Level Review in Progress [ 10301 ] |
| Status | First Level Review in Progress [ 10301 ] | To-Do [ 10305 ] |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] | Sai Supreeth Segu [ ssegu ] |
| Status | To-Do [ 10305 ] | In Progress [ 3 ] |
I have made changes as suggested by Chirag Chandrahas Shetty.
Please review my changes: https://bitbucket.org/supreeth27/appstore/branch/IGBF-2733#diff
| Attachment | centerAlign_next.png [ 15121 ] |
| Status | In Progress [ 3 ] | Needs 1st Level Review [ 10005 ] |
| Assignee | Sai Supreeth Segu [ ssegu ] |
| Sprint | Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22 [ 111, 112 ] | Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22, Winter 3 Jan 25 - Feb 5 [ 111, 112, 113 ] |
| Rank | Ranked higher |
Assigning this to Chirag Chandrahas Shetty to review the latest changes.
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] |
| Status | Needs 1st Level Review [ 10005 ] | First Level Review in Progress [ 10301 ] |
| Status | First Level Review in Progress [ 10301 ] | Ready for Pull Request [ 10304 ] |
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/
| Status | Ready for Pull Request [ 10304 ] | Pull Request Submitted [ 10101 ] |
| Status | Pull Request Submitted [ 10101 ] | Reviewing Pull Request [ 10303 ] |
| Status | Reviewing Pull Request [ 10303 ] | To-Do [ 10305 ] |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] | Sai Supreeth Segu [ ssegu ] |
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.
| Status | To-Do [ 10305 ] | In Progress [ 3 ] |
| Status | In Progress [ 3 ] | Needs 1st Level Review [ 10005 ] |
| Status | Needs 1st Level Review [ 10005 ] | First Level Review in Progress [ 10301 ] |
| Status | First Level Review in Progress [ 10301 ] | Ready for Pull Request [ 10304 ] |
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]
| Status | Ready for Pull Request [ 10304 ] | Pull Request Submitted [ 10101 ] |
| Assignee | Sai Supreeth Segu [ ssegu ] |
| Status | Pull Request Submitted [ 10101 ] | Reviewing Pull Request [ 10303 ] |
| Status | Reviewing Pull Request [ 10303 ] | Merged Needs Testing [ 10002 ] |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] |
Tested on https://devappstore5.bioviz.org/. Everything looks good . Closing the ticket.
| Status | Merged Needs Testing [ 10002 ] | Post-merge Testing In Progress [ 10003 ] |
| Resolution | Done [ 10000 ] | |
| Status | Post-merge Testing In Progress [ 10003 ] | Closed [ 6 ] |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] | Sai Supreeth Segu [ ssegu ] |
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