Details
-
Type:
Task
-
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
Description
When viewing app store on a narrower screen, the column components of the header move from horizontal layout to vertical layout.
This is behavior is basically what we want, but unfortunately the layout of the elements when in the narrower view mode looks weird. See attached.
Note how the App Store title is left justified, the middle component ("Curious About App Store? Watch a Demo") is center-justified, and the last element (Submit App button and login icon) is right justified.
As a result, when the three components move from horizontal to vertical layout, they look really weird together. Also, notice how there is no whitespace separating the text from the left edge of the window.
For this task, please try to modify the styling of the header so that it looks better when the page is narrower.
Attachments
Activity
| Field | Original Value | New Value |
|---|---|---|
| Epic Link | IGBF-2563 [ 18746 ] |
| Summary | Modify styling of header to improve appearance when screen is smaller | Modify header styling to improve appearance when screen is smaller |
| Assignee | Sai Supreeth Segu [ ssegu ] |
| Status | To-Do [ 10305 ] | In Progress [ 3 ] |
| Attachment | header_for_Small_Screen.png [ 15114 ] |
| 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 |
| 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 |
Sai Supreeth Segu - please provide images showing:
- current behavior of appstore at the relevant screen widths
- new behavior of your branch at the relevant screen widths
Relevant screen widths:
- wide - 1650 pixels
- small - 500 pixels
| Assignee | Sai Supreeth Segu [ ssegu ] |
| Status | Needs 1st Level Review [ 10005 ] | First Level Review in Progress [ 10301 ] |
| Status | First Level Review in Progress [ 10301 ] | To-Do [ 10305 ] |
These are screenshots for current behaviour of appstore header. My Screen has a maximum of 1440px.
| Attachment | Current_Small_Screen_500px.png [ 15123 ] | |
| Attachment | Current_wide_Screen_1440px.png [ 15124 ] |
| Status | To-Do [ 10305 ] | In Progress [ 3 ] |
| Attachment | New_wide_screen_1440px.png [ 15125 ] |
| Status | In Progress [ 3 ] | Needs 1st Level Review [ 10005 ] |
| Assignee | Sai Supreeth Segu [ ssegu ] |
This looks fine. Please submit PR.
| 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 | Sai Supreeth Segu [ ssegu ] |
Please review my pull request: https://bitbucket.org/lorainelab/appstore/pull-requests/270/igbf-2735-modified-header-styling-when
| 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 ] |
Merged and deployed to https://devappstore3.bioviz.org.
| 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 |
| 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 | Chirag Chandrahas Shetty [ chirag24 ] |
| Status | Merged Needs Testing [ 10002 ] | Post-merge Testing In Progress [ 10003 ] |
The elements alignment is same as shown in the reference image: https://jira.transvar.org/secure/attachment/15114/header_for_Small_Screen.png
| Resolution | Done [ 10000 ] | |
| Status | Post-merge Testing In Progress [ 10003 ] | Closed [ 6 ] |
| Assignee | Chirag Chandrahas Shetty [ chirag24 ] | Sai Supreeth Segu [ ssegu ] |
I have modifies the styling for the small screen. Please review my changes.
Link for my branch: https://bitbucket.org/supreeth27/appstore/branch/IGBF-2735#diff
cc: Dr. [~aloraine]