Ensure that dashboard pages are all responsive

[jonathancrabtree]

Exact requirements may need to be refined, but at minimum each of the current dashboard pages (index.html, summary_graph.html, dcc_review.html, and dashboard.html) and also the new personalized dashboard page, should resize gracefully down to at least iPad (CSS not pixel) resolution of 768 x 1024. Related cases include #43, #73, #76, and there was some previous discussion in #66.

[jonathancrabtree]

I've taken a first pass at doing this for the landing page (index.html), although the changes won't show up in app-dev until after tonight's nightly update. I've also changed the look of the layout somewhat, though nothing drastic. Here are some side-by-side comparisons of the current (app.nih-cfde.org) and proposed landing pages at different horizontal resolutions (these are CSS "pixels" not device pixels and I'm only giving the horizontal resolution).

Super-wide (2305 pixels) current:

Super-wide (2305 pixels) new. Note the new location of the title at the top left and summary box at the top right. Content is allowed to expand more than in the current version but we could place an upper limit on the width if desired:

Regular (1300 pixels) current:

Regular (1300 pixels) new (very similar):

Somewhat narrow (1155 pixels) current. Content is now offscreen to the right. Good example of neo-classical "Let them eat scrollbar" school of web design:

Somewhat narrow (1155 pixels) new:

Narrow (1024 pixels) current:

Narrow (1024 pixels) new. "Funding" hops onto a new line:

Very narrow (800 pixels) current. Switching to Developer Tools view:

Very narrow (800 pixels) new. Note the navbar is a bit funky, as is the black bar at the bottom of the page (not visible in this image, but shown in the previous one - that blank area at the bottom right seems to be connected to the navbar somehow):

[jonathancrabtree]

768 pixels (current):

768 pixels (new):

767 pixels (new). 767 pixels is when the navbar switches over to its compact mode:

500 pixels (current):

500 pixels (new):

250 pixels (new). Note the issue with the navbar and the fact that the artifact in the page footer seems to correspond to whatever's going on with the navbar. Will have to check if this shows up on app-dev tomorrow as I may have older navbar code/CSS on my dev server:

[jonathancrabtree]

@jrchudy once this update is on app-dev (tomorrow, I assume) I'll have to check and see if the navbar (and footer) problems are still there and if they are then maybe you can investigate. That white blank space to the right of the navbar appears to be correlated with the white blank space on the right side of the (black) page footer. It varies depending on page width and can be very small ranging up to almost half the width of the screen, as shown above. Also, once everyone is happy with the layout on index.html I can do essentially the same thing on the other dashboard pages.

[jrchudy]

I'll have to look at this tomorrow as well since this is likely an issue with the styles applied to the navbar.

[jonathancrabtree]

app-dev looks consistent with my dev site. Current state:

• index.html - using new layout, looks good except for navbar at very narrow screen sizes
• summary_graph.html - no known layout issues
• dashboard.html - not yet updated to new layout
• dcc_review.html - not yet updated to new layout

[jrchudy]

Some updates from testing the same screen sizes that Jonathan did in the past

• width = 2305 px
  • The udashbaord, pdashboard, and dcc_review don't stretch the page content to fill the full width
  • The title on dcc_review pulls left, un-aligning it from the rest of the content
• width = 1300 px
  • no changes from earlier assessment, pages look good
• width = 1155 px
  • dcc_review does not shrink the content to adjust for the smaller screen
• width = 1024 px
  • same issue with dcc_review page
• width = 800 px
  • weird white space on right side of footer starts showing for home and dashboard pages
  • udashboard
    • alert has the "x" move to next line
    • carousel doesn't wrap or internally scroll
    • download button for chart is out of the box
  • content on the pdashboard is starting to look "slim" but not unreadable/un-useable yet
  • continued issue with dcc_review page
• width = 768 px
  • same issues as 800px
• width = 767 px
  • navbar switches to compact mode, footer issue is less noticeable but still there
  • udashboard has the x/y axis dropdowns for the plot stack now with the download button overlaying the x-axis dropdown
  • pdashboard switches to stacking saved searches, then favorites, then the plot
  • continued issue with dcc_review page
• width = 500 px
  • banner text is truncated
  • footer issue is still there
  • udashboard x/y axis dropdowns are made even wider as the screen shrinks
  • continued issue with dcc_review page
• width = 250 px
  • same issues Jonathan noted before with navbar/footer being way worse
  • plot on homepage is usable, on udashboard the content squeezes/shrinks way too much and is un-useable (maybe not updated to use the same html/styles as the homepage and pdashboard plots?

One thing to note, part of the application (I think maybe the navbar since this applies to deriva pages too) limits the "minimum" screen width when stretching/shrinking the browser width. The width can't "normally" go below ~538px so the issues specific to 500px and 250px are much less likely to occur when using a desktop.

I did test on mobile (not sure how to check the "pixel width of my mobile display" and do see something similar to the 500px and 250px cases, although the application is not designed to be "completely" mobile friendly.

To summarize similar to how Jonathan did before

Current state of app-dev (Dec 16th, 2021):

• index.html - looks good except for navbar and banner text at very narrow screen sizes
• summary_graph.html - no known layout issues
• udashboard.html - content does not shrink as the page width gets smaller
• pdashboard.html - looks very good
• dcc_review.html - content does not shrink as the page width gets smaller (probably never got updated to new layout)

[jrchudy]

Need to test in safari, firefox, and IE/edge and see if the browser min width issue occurs in those browsers as well.