Add max-height for Terms of Service panel
Follow up from https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/18570#note_71460276
If the Terms of Service agreement content is really long, the accept/decline buttons should still be visible on the screen and the content should scroll within the panel. The footer buttons should only stay fixed if the height of the content surpasses the viewport height.
Current screens
small screen | tall screen |
---|---|
Proposal
✏ ️ Figma work file
- define a container height to fit the user's screen
- add fade to bottom of container
- disable
Accept
button until scrolled to bottom of content.
Implementation plan
- Add some CSS to the TOS container to set a max width and make it scrollable
.terms-scrollable-viewport {
max-height: calc(100vh - 220px);
overflow: auto;
}
- Add some CSS to add the fade to the bottom of the TOS. Something like this:
.terms-fade {
position: absolute;
bottom: 0;
height: $gl-spacing-scale-11;
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%);
pointer-events: none;
}
- Add some JavaScript to enable the
Accept
button when the user has scrolled to the bottom
const viewport = document.querySelector('.js-terms-scrollable-viewport')
const viewportBottom = document.querySelector('.js-viewport-bottom')
const acceptButton = document.querySelector('.js-accept-button')
const callback = (event) => {
console.log(event);
if (event[0].isIntersecting) {
acceptButton.removeAttribute('disabled')
}
}
const observer = new IntersectionObserver(callback, {root: viewport});
observer.observe(viewportBottom)
- Add specs for the JavaScript
Edited by Peter Hegman