Details
-
Type:
Improvement
-
Status: Closed (View Workflow)
-
Priority:
Major
-
Resolution: Done
-
Affects Version/s: None
-
Fix Version/s: None
-
Labels:None
-
Story Points:0.5
-
Epic Link:
-
Sprint:Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22, Winter 3 Jan 25 - Feb 5, Winter 4 Feb 8 - Feb 19, Winter 5 Feb 22 - Mar 5, Winter 6 Mar 8 - Mar 19
Description
Note: this may now be redundant with IGBF-2723, a previous worked-on issue. Check on that before starting this.
Here is a description of the problem:
App pages contain two sections on the right side of the page that contain the app installation section (contains a button) and a section titled "RESOURCES" (all caps).
The "install app" button is a core part of the functionality. Having it change depending on the widths of the screen creates a feeling of instability and fluidity, which sends a subtle negative message about interface reliability to the user.
For this task, please investigate:
- Can you modify the CSS so that the width of this column never increases or decreases? Ideally, it should not expand or contract but always have the same width. Please make sure to test with different widths and browsers.
Note: If it seems too difficult, make a note of it here. Please only spend 1/2 day on it.
Attachments
Issue Links
- relates to
-
IGBF-2723 Improve right-side whitespace for app store pages
-
- Closed
-
Activity
| Field | Original Value | New Value |
|---|---|---|
| Epic Link | IGBF-2563 [ 18746 ] |
| Assignee | Ann Loraine [ aloraine ] |
| Description |
App pages contain two sections on the right side of the page that contain the app installation section (contains a button) and a section titled "RESOURCES" (all caps).
The "install app" button is a core part of the functionality. Having it change depending on the widths of the screen creates a feeling of instability and fluidity, which sends a subtle message to the user that they can potentially break the functionality simply by changing the size of the window. For this task, please modify the CSS so that the width of this column never increases or decreases. It should not expand or contract. In addition, it would be awesome if you can modify the App page so that the content and header are centered and do not consume the entire width of the page, more similar to App Store 1.0. pages (ex: https://apps.bioviz.org/apps/merge-annotation-operator) |
Note: this may now be redundant with App pages contain two sections on the right side of the page that contain the app installation section (contains a button) and a section titled "RESOURCES" (all caps). The "install app" button is a core part of the functionality. Having it change depending on the widths of the screen creates a feeling of instability and fluidity, which sends a subtle negative message about interface reliability to the user. For this task, please modify the CSS so that the width of this column never increases or decreases. It should not expand or contract. In addition, it would be awesome if you can modify the App page so that the content and header are centered and do not consume the entire width of the page, more similar to App Store 1.0. pages (ex: https://apps.bioviz.org/apps/merge-annotation-operator) |
| 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 |
| 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 |
| Summary | Restrict size of "install app" section, whitespace on either side of page | Improve "install app" section |
| Description |
Note: this may now be redundant with App pages contain two sections on the right side of the page that contain the app installation section (contains a button) and a section titled "RESOURCES" (all caps). The "install app" button is a core part of the functionality. Having it change depending on the widths of the screen creates a feeling of instability and fluidity, which sends a subtle negative message about interface reliability to the user. For this task, please modify the CSS so that the width of this column never increases or decreases. It should not expand or contract. In addition, it would be awesome if you can modify the App page so that the content and header are centered and do not consume the entire width of the page, more similar to App Store 1.0. pages (ex: https://apps.bioviz.org/apps/merge-annotation-operator) |
Note: this may now be redundant with Here is a description of the problem: App pages contain two sections on the right side of the page that contain the app installation section (contains a button) and a section titled "RESOURCES" (all caps). The "install app" button is a core part of the functionality. Having it change depending on the widths of the screen creates a feeling of instability and fluidity, which sends a subtle negative message about interface reliability to the user. For this task, please investigate: * Can you modify the CSS so that the width of this column never increases or decreases? Ideally, it should not expand or contract but always have the same width. Please make sure to test with different widths and browsers. Note: If it seems too difficult, make a note of it here. Please only spend 1/2 day on it. |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] |
| Status | To-Do [ 10305 ] | In Progress [ 3 ] |
| Status | In Progress [ 3 ] | Needs 1st Level Review [ 10005 ] |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] |
Chirag Chandrahas Shetty - please provide well-named images showing:
- current behavior of app page at the relevant screen widths
- new behavior of your branch at the relevant screen widths
Relevant screen widths (or others as you see fit)
- wide - 1650 pixels
- small - 500 pixels
Example of well-named image files:
- 1650-current-[git hash].png
- 1650-branch-[git hash].png
Note that the file name contains image width in pixels, a string indicated whether the image is from the existing code or the new code, and a git hash that allows us to easily identify the tip of the branch.
| 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 ] |
| Status | To-Do [ 10305 ] | In Progress [ 3 ] |
| Attachment | 61ea178-780px.PNG [ 15128 ] | |
| Attachment | 61ea178-1280px.PNG [ 15129 ] | |
| Attachment | new-71754f9-780px.PNG [ 15130 ] | |
| Attachment | new-71754f9-1280px.PNG [ 15131 ] |
| Status | In Progress [ 3 ] | Needs 1st Level Review [ 10005 ] |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] | Ann Loraine [ aloraine ] |
[~aloraine] I have attached the screenshots as per your request. Please have a look at them.
| Attachment | 61ea178-1280px.PNG [ 15129 ] |
| Attachment | 61ea178-780px.PNG [ 15128 ] |
| Attachment | current-61ea178-780px.PNG [ 15132 ] | |
| Attachment | current-61ea178-1280px.PNG [ 15133 ] |
This looks great. Please submit PR when ready.
| Status | Needs 1st Level Review [ 10005 ] | First Level Review in Progress [ 10301 ] |
| Status | First Level Review in Progress [ 10301 ] | Ready for Pull Request [ 10304 ] |
| Assignee | Ann Loraine [ aloraine ] | Chirag Chandrahas Shetty [ chirag24 ] |
| Status | Ready for Pull Request [ 10304 ] | Pull Request Submitted [ 10101 ] |
| Status | Pull Request Submitted [ 10101 ] | Reviewing Pull Request [ 10303 ] |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] | Ann Loraine [ aloraine ] |
| Status | Reviewing Pull Request [ 10303 ] | Merged Needs Testing [ 10002 ] |
| Assignee | Ann Loraine [ aloraine ] |
Merged but not yet deployed to testing site.
Testing: Please test the changes by changing the browser size in Safari, chrome, Firefox and Edge.
Deployed to https://devappstore3.bioviz.org
I'm noticing something a bit weird is happening to the "RESOURCES" block when the page width decreases. The little icons turn a pale shade of gray and also the spacing between the various listed items changes.
Chirag Chandrahas Shetty - could you look into it?
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] |
| Status | Merged Needs Testing [ 10002 ] | Post-merge Testing In Progress [ 10003 ] |
| Status | Post-merge Testing In Progress [ 10003 ] | To-Do [ 10305 ] |
That is happening because of the bootstrap's inbuilt nav class that we are using for the "RESOURCE" block. I cannot find the exact code where it is happening but we can add some code to copy some of the properties that we want and use that class instead of nav.
cc:[~aloraine]
| Sprint | Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22, Winter 3 Jan 25 - Feb 5 [ 111, 112, 113 ] | Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22, Winter 3 Jan 25 - Feb 5, Winter 4 Feb 8 - Feb 19 [ 111, 112, 113, 114 ] |
| Rank | Ranked higher |
Question for Chirag Chandrahas Shetty:
Why can't you find the exact code where it is happening? I am not sure what is meant in the previous comment.
| Rank | Ranked higher |
| Status | To-Do [ 10305 ] | In Progress [ 3 ] |
| Status | In Progress [ 3 ] | Needs 1st Level Review [ 10005 ] |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] |
| Status | Needs 1st Level Review [ 10005 ] | First Level Review in Progress [ 10301 ] |
| Assignee | Ann Loraine [ aloraine ] |
Please submit PR when convenient.
| Status | First Level Review in Progress [ 10301 ] | Ready for Pull Request [ 10304 ] |
| Assignee | Ann Loraine [ aloraine ] | Chirag Chandrahas Shetty [ chirag24 ] |
| Status | Ready for Pull Request [ 10304 ] | Pull Request Submitted [ 10101 ] |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] | Ann Loraine [ aloraine ] |
Merged and deployed on https://appstore3.bioviz.org
| Status | Pull Request Submitted [ 10101 ] | Reviewing Pull Request [ 10303 ] |
| Status | Reviewing Pull Request [ 10303 ] | Merged Needs Testing [ 10002 ] |
| Sprint | Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22, Winter 3 Jan 25 - Feb 5, Winter 4 Feb 8 - Feb 19 [ 111, 112, 113, 114 ] | Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22, Winter 3 Jan 25 - Feb 5, Winter 4 Feb 8 - Feb 19, Winter 5 Feb 22 - Mar 5 [ 111, 112, 113, 114, 115 ] |
| Rank | Ranked higher |
| Assignee | Ann Loraine [ aloraine ] |
| Sprint | Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22, Winter 3 Jan 25 - Feb 5, Winter 4 Feb 8 - Feb 19, Winter 5 Feb 22 - Mar 5 [ 111, 112, 113, 114, 115 ] | Winter 1 Dec 28 - Jan 8, Winter 2 Jan 11 - Jan 22, Winter 3 Jan 25 - Feb 5, Winter 4 Feb 8 - Feb 19, Winter 5 Feb 22 - Mar 5, Winter 6 Mar 8 - Mar 19 [ 111, 112, 113, 114, 115, 116 ] |
| Rank | Ranked higher |
| Assignee | Philip Badzuh [ pbadzuh ] |
| Status | Merged Needs Testing [ 10002 ] | Post-merge Testing In Progress [ 10003 ] |
Tested on https://devappstore5.bioviz.org/. The "install app" button maintains its width across screen sizes as intended.
| Resolution | Done [ 10000 ] | |
| Status | Post-merge Testing In Progress [ 10003 ] | Closed [ 6 ] |
| Assignee | Philip Badzuh [ pbadzuh ] | Chirag Chandrahas Shetty [ chirag24 ] |
Chirag Chandrahas Shetty - Can you take a look?