Uploaded image for project: 'IGB'
  1. IGB
  2. IGBF-2735

Modify header styling to improve appearance when screen is smaller

    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
    • 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

          Hide
          ssegu Sai Supreeth Segu added a comment -

          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. Ann Loraine

          Show
          ssegu Sai Supreeth Segu added a comment - 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. Ann Loraine
          Hide
          aloraine Ann Loraine added a comment - - edited

          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
          Show
          aloraine Ann Loraine added a comment - - edited 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
          Hide
          ssegu Sai Supreeth Segu added a comment -

          These are screenshots for current behaviour of appstore header. My Screen has a maximum of 1440px.

          Show
          ssegu Sai Supreeth Segu added a comment - These are screenshots for current behaviour of appstore header. My Screen has a maximum of 1440px.
          Hide
          aloraine Ann Loraine added a comment -

          This looks fine. Please submit PR.

          Show
          aloraine Ann Loraine added a comment - This looks fine. Please submit PR.
          Show
          ssegu Sai Supreeth Segu added a comment - Please review my pull request: https://bitbucket.org/lorainelab/appstore/pull-requests/270/igbf-2735-modified-header-styling-when
          Hide
          aloraine Ann Loraine added a comment -

          Merged and deployed to https://devappstore3.bioviz.org.

          Show
          aloraine Ann Loraine added a comment - Merged and deployed to https://devappstore3.bioviz.org .
          Hide
          chirag24 Chirag Chandrahas Shetty added a comment - - edited

          The elements alignment is same as shown in the reference image: https://jira.transvar.org/secure/attachment/15114/header_for_Small_Screen.png

          Show
          chirag24 Chirag Chandrahas Shetty added a comment - - edited The elements alignment is same as shown in the reference image: https://jira.transvar.org/secure/attachment/15114/header_for_Small_Screen.png

            People

            • Assignee:
              ssegu Sai Supreeth Segu
              Reporter:
              aloraine Ann Loraine
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: