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
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.
[~aloraine] I have attached the screenshots as per your request. Please have a look at them.
This looks great. Please submit PR when ready.
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?
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]
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.
Please submit PR when convenient.
Merged and deployed on https://appstore3.bioviz.org
Tested on https://devappstore5.bioviz.org/. The "install app" button maintains its width across screen sizes as intended.
Chirag Chandrahas Shetty - Can you take a look?