maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[deploy] Render onboarding on small screens correctly (#7548)

Browse source
This commit is contained in:
Mac Siri 2020-04-27 16:16:33 -04:00 • committed by GitHub
parent 8eb4612166
commit f4000a1809
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/stylesheets/config/_import.scss vendored
View file

@ -53,8 +53,7 @@ $site-width: 1280px;
// [DRAFT] Responsiveness Breakpoints. /////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
//
// List of breakpoints for our responsiveness. Right now these are not
// used anywhere. They are here as a placeholder.
// List of breakpoints for our responsiveness.
$breakpoint-s: 640px;
$breakpoint-m: 768px;

11
app/assets/stylesheets/preact/onboarding-modal.scss
View file

@ -252,12 +252,12 @@
// modal overflow scrolling
.onboarding-modal-scroll-container {
height: auto;
min-height: 436px;
max-height: calc(100vh - 289px);
overflow-y: scroll;
border-bottom: 1px solid var(--base-20);
@media screen and (min-width: $breakpoint-s) {
max-height: 500px;
overflow-y: scroll;
position: relative;
@media screen and (min-height: 800px) {
max-height: 520px;
}
}
@ -267,7 +267,6 @@
grid-template-columns: repeat(2, 1fr);
grid-gap: $su-4;
width: 100%;
min-height: 316px;
@media screen and (min-width: 800px) {
grid-template-columns: repeat(3, 1fr);

16
app/javascript/onboarding/__tests__/Onboarding.test.jsx
View file

@ -189,16 +189,16 @@ describe('<Onboarding />', () => {
test('should allow a user to add a tag and advance', async () => {
fetch.once({});
const followTags = onboardingSlides.find(<FollowTags />);
const firstButton = onboardingSlides
.find('.onboarding-tags__button')
.first();
expect(onboardingSlides.find('.next-button').text()).toContain(
'Skip for now',
);
const firstButton = onboardingSlides
.find('.onboarding-tags__button')
.first();
firstButton.simulate('click');
const followTags = onboardingSlides.find(<FollowTags />);
expect(followTags.state('selectedTags').length).toBe(1);
expect(onboardingSlides.find('.next-button').text()).toContain(
@ -239,7 +239,6 @@ describe('<Onboarding />', () => {
test('should allow user to fill forms and advance', async () => {
fetch.once({});
const profileForm = onboardingSlides.find(<ProfileForm />);
const summaryEvent = { target: { value: 'my bio', name: 'summary' } };
const locationEvent = {
target: { value: 'my location', name: 'location' },
@ -259,6 +258,7 @@ describe('<Onboarding />', () => {
onboardingSlides.find('#location').simulate('change', locationEvent);
onboardingSlides.find('#employment_title').simulate('change', titleEvent);
onboardingSlides.find('#employer_name').simulate('change', employerEvent);
const profileForm = onboardingSlides.find(<ProfileForm />);
expect(profileForm.state().formValues.summary).toBe(
summaryEvent.target.value,
);
@ -317,7 +317,6 @@ describe('<Onboarding />', () => {
test('should allow a user to select and advance', async () => {
fetch.once({});
const followUsers = onboardingSlides.find(<FollowUsers />);
expect(onboardingSlides.find('.next-button').text()).toContain(
'Skip for now',
@ -336,6 +335,7 @@ describe('<Onboarding />', () => {
'Continue',
);
const followUsers = onboardingSlides.find(<FollowUsers />);
expect(followUsers.state('selectedUsers').length).toBe(2);
onboardingSlides.find('.next-button').simulate('click');
await flushPromises();
@ -344,7 +344,6 @@ describe('<Onboarding />', () => {
test('should have a functioning select-all toggle', async () => {
fetch.once({});
const followUsers = onboardingSlides.find(<FollowUsers />);
expect(onboardingSlides.find('button').last().text()).toBe(
'Select all 3 people',
@ -353,6 +352,7 @@ describe('<Onboarding />', () => {
expect(onboardingSlides.find('button').last().text()).toBe(
'Deselect all',
);
const followUsers = onboardingSlides.find(<FollowUsers />);
expect(followUsers.state('selectedUsers').length).toBe(3);
});