search

GSA / uswds-sf-lightning-community

A Salesforce Lightning Community Theme and related components built upon US Web Design System
Other
32 stars 15 forks source link

Make page fill screen height at a minimum #182

Closed mvogelgesang closed 1 year ago

mvogelgesang commented 1 year ago

Idea from @carchiere

Is your feature request related to a problem? Please describe.

Pages without a lot of content do not fill the entire screen height and as a result make the page feel chopped off.

Describe the solution you'd like

Default the theme layout to fill the entire screen height at a minimum. This requires setting the page to flex and then setting the body to expand and fill remaining space. Currently, slds-grid classes are used and then intermingled with uswds grid. Should look at cleaning that up.

uswds lightning community issue182

mvogelgesang commented 1 year ago

Commonly shared solutions using flexbox require setting the html and body height to 100%. This is not achievable with Theme Layouts as the contents (header, navigation, search, main, footer, and identifier are slotted into the body and you can't set attributes further up the DOM. One could potentially set the height via an inline script that gets injected into <head> but that is not a deployable solution and would require teams to manually add the code.

A potential option is to fudge it and set arbitrary height values within the main content area. This however would require different settings for different screen sizes and might produce a lot of whitespace on one screen and very little on another.

Will need to solicit opinions from a larger group

mvogelgesang commented 1 year ago

Setting the height within main may leave gaps at some viewports but could meet the spirit of the ask. A value of 50vh seems to be a happy medium. The ten most common screen sizes from DAP are below along with an indication if the theme fills the screen height or not. Evaluation was conducted without any content in main nor content in the footer.

Screen Dimensions Theme Fills Height % of Traffic to GSA Sites
1920x1080 ✅ 27%
1536x864 ✅ 7%
1440x900 ✅ 6%
1280x720 ✅ 5%
1366x768 ✅ 5%
390x844 ✅ 4%
428x926 ✅ 3%
2560x1440 ❌ 3%
414x896 ✅ 2%
1600x900 ✅ 2%

The screen sizes listed above represent ~64% of all screen sizes used to access GSA sites. If we wanted to be truly comprehensive, media queries could be used to increase the vh where necessary- goal being not to have the border of the footer in the same spot each time but to serve a page that at minimum fills the screen height.

Seeing this data makes me more comfortable with the vh solution.

scottkellum commented 1 year ago

@mvogelgesang Here are two options that might make this better:

A more foundational approach

Add these styles to the body:

body {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height avoids issues with mobile UI elements */
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Here is an example of how it might be structureed: https://codepen.io/scottkellum/pen/WNgYPEP/26ffadbb4ac90599163ffab80bb402e6

A more pragmatic approach

on main, instead of estimating a min-height of 50vh, calculate how much height the banner, nav, footer, identifier, and OSS banner take up. Then pass that into a calc() function.

main {
  --head-foot-height: 500px;
  min-height: calc(100vh - var(--head-foot-height));
  min-height: calc(100dvh - var(--head-foot-height)); /* Dynamic viewport height avoids issues with mobile UI elements */
}

I also assume the header and footer height changes at different breakpoints. You can adjust this relatively easily now with the CSS variable.

@media (min-width: 760px) {
  main {
    --head-foot-height: 650px;
  }
}
mvogelgesang commented 1 year ago

@scottkellum Thanks, this is incredibly helpful. I was able to calculate the height of the individual components at different breakpoints as you suggested. This was done using minimal examples so as not to expect a lot of footer content by default and thereby skew calculations. Unfortunately css variables are not available in Salesforce aura components. The result was inline calculations but the table below has been added to the CSS as a comment for clarity.

USWDS Width Name Size Banner & Header Height Footer, Identifier, OSS Height
Smallest ≥0px 96.461px 472.8px
Mobile large ≥480px 96.461px 478.818px
Tablet ≥640px 70.07px 351.5px
Desktop ≥1024px 204.464px 327.606px