From 44feb51386fb24637455954094babe7542e6bad9 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Tue, 8 Jan 2019 14:40:09 -0800 Subject: [PATCH] Onboarding responsive styles (#2352) * update cubo doodles * migrate style changes * update snapshots --- ui/assets/images/cubo_doodle.svg | 68 +++++++- ui/assets/images/cubo_doodle_green.svg | 69 ++++++++- .../components/wizard/ProgressBar.scss | 40 +++-- .../wizard/WizardProgressHeader.scss | 10 +- ui/src/onboarding/OnboardingWizard.scss | 146 +++++++++++++----- ui/src/onboarding/components/AdminStep.tsx | 26 +++- .../onboarding/components/CompletionStep.tsx | 4 +- ui/src/onboarding/components/InitStep.tsx | 16 +- .../components/OnboardingButtons.tsx | 18 ++- .../__snapshots__/AdminStep.test.tsx.snap | 23 +-- .../CompletionStep.test.tsx.snap | 6 +- .../configureStep/ConfigureDataSourceStep.tsx | 2 +- .../lineProtocol/LineProtocolTabs.tsx | 41 +++-- .../LineProtocolTabs.test.tsx.snap | 34 ++-- .../selectionStep/SelectDataSourceStep.tsx | 15 +- .../components/side_bar/SideBar.scss | 42 +++-- .../components/verifyStep/VerifyDataStep.tsx | 2 +- update-golang | 1 + 18 files changed, 436 insertions(+), 127 deletions(-) create mode 160000 update-golang diff --git a/ui/assets/images/cubo_doodle.svg b/ui/assets/images/cubo_doodle.svg index 14ebd14bfe..54582b7770 100644 --- a/ui/assets/images/cubo_doodle.svg +++ b/ui/assets/images/cubo_doodle.svg @@ -1 +1,67 @@ -cubo_doodle \ No newline at end of file + + + + +cubo_doodle + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/assets/images/cubo_doodle_green.svg b/ui/assets/images/cubo_doodle_green.svg index e5c9f9aa17..24697347f3 100644 --- a/ui/assets/images/cubo_doodle_green.svg +++ b/ui/assets/images/cubo_doodle_green.svg @@ -1 +1,68 @@ -cubo_doodle_green \ No newline at end of file + + + + +cubo_doodle_green + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/clockface/components/wizard/ProgressBar.scss b/ui/src/clockface/components/wizard/ProgressBar.scss index c9a65ce3c7..12fd506d12 100644 --- a/ui/src/clockface/components/wizard/ProgressBar.scss +++ b/ui/src/clockface/components/wizard/ProgressBar.scss @@ -9,19 +9,22 @@ align-items: center; align-self: center; width: 100%; + flex-shrink: 0; } .wizard--progress-icon { position: relative; - font-size: 13px; - height: 26px; - width: 26px; - border-radius: 50%; + font-size: 0; + height: 0; + width: 0; + border-radius: 13px; background-color: $g2-kevlar; + opacity: 0; display: inline-flex; - margin-right: $ix-marg-b; + margin-right: 0; + flex-shrink: 0; color: $g7-graphite; - transition: background-color .4s; + transition: opacity .4s ease-in-out, width .4s ease-in-out, height .4s ease-in-out; > .icon { position: absolute; @@ -50,8 +53,8 @@ .wizard--progress-title { font-weight: 700; color: $g7-graphite; - font-size: 15px; - transition: color .4s; + font-size: $ix-text-base; + transition: color .4s ease-in-out, font-size .4s ease-in-out; } .wizard--progress-title.checkmark { @@ -75,7 +78,8 @@ align-items: center; cursor: pointer; margin: 0 $ix-marg-a; - flex-shrink: 0; + flex-shrink: 1; + text-align: center; } .wizard--progress-button:hover { @@ -123,3 +127,21 @@ .wizard--progress-connector--full:after { width: 100%; } + +@media screen and (min-width: $grid--breakpoint-md) { + .wizard--progress-title { + font-size: $ix-text-base-1; + } + + .wizard--progress-button { + flex-shrink: 0; + } + + .wizard--progress-icon { + font-size: $ix-text-base; + height: 26px; + width: 26px; + opacity: 1; + margin-right: $ix-marg-b; + } +} \ No newline at end of file diff --git a/ui/src/clockface/components/wizard/WizardProgressHeader.scss b/ui/src/clockface/components/wizard/WizardProgressHeader.scss index 766ac810c0..0443eaa0d6 100644 --- a/ui/src/clockface/components/wizard/WizardProgressHeader.scss +++ b/ui/src/clockface/components/wizard/WizardProgressHeader.scss @@ -7,12 +7,14 @@ position: relative; background-color: $g0-obsidian; width: 100%; - height: 50px; + height: 60px; + flex-shrink: 0; padding: 0 $ix-marg-c; display: inline-flex; justify-content: center; align-items: center; border-radius: $radius; + transition: height .4s ease-in-out; } .wizard--progress-skip { @@ -23,3 +25,9 @@ .wizard--progress-header.hidden { visibility: hidden; } + +@media screen and (min-width: $grid--breakpoint-sm) { + .wizard--progress-header { + height: 50px; + } +} \ No newline at end of file diff --git a/ui/src/onboarding/OnboardingWizard.scss b/ui/src/onboarding/OnboardingWizard.scss index a62d757ce5..b699f61bc0 100644 --- a/ui/src/onboarding/OnboardingWizard.scss +++ b/ui/src/onboarding/OnboardingWizard.scss @@ -3,6 +3,37 @@ ------------------------------------------------------------------------------ */ +.wizard--bookend-step { + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + + .button { + position: relative; + white-space: nowrap; + margin: 0 $ix-marg-a; + } +} + +.splash-logo { + background-size: 100% 100%; + background-position: center center; + background-repeat: no-repeat; + width: 100%; + flex: .5; + + &.primary { + background-image: url('../../assets/images/cubo_doodle.svg'); + } + + &.secondary { + background-image: url('../../assets/images/cubo_doodle_green.svg'); + } +} + .wizard-contents { display: flex; align-items: stretch; @@ -25,7 +56,7 @@ text-align: center; background-color: $g3-castle; border-radius: $radius; - padding: 20px; + padding: $ix-marg-c $ix-marg-c ($ix-marg-d * 2 + 38px) $ix-marg-c; flex: 1 0 100%; transition: flex 0.4s ease; transform: translate3d(0, 0, 0); @@ -37,13 +68,21 @@ .wizard--button-container { position: absolute; - bottom: 30px; - left: 30px; - right: 30px; + bottom: $ix-marg-d; + left: $ix-marg-c; + right: $ix-marg-c; + display: inline-flex; + justify-content: center; + flex-wrap: wrap; - .wizard--skip-button { - position: absolute; - right: 0; + .wizard--skip-container { + width: 100%; + display: inline-flex; + justify-content: center; + + .button { + margin: $ix-marg-b 0 0 0; + } } } @@ -51,12 +90,11 @@ display: inline-flex; flex-shrink: 0; position: relative; - min-width: 100%; - width: 100%; justify-content: center; align-items: center; height: auto; flex-wrap: nowrap; + flex: 2; .button { position: relative; @@ -65,35 +103,18 @@ } } -.splash-logo { - background-size: 100% 100%; - background-position: center center; - background-repeat: no-repeat; - width: 100%; - height: 170px; - margin: auto auto; - - &.primary { - background-image: url('../../assets/images/cubo_doodle.svg'); - } - - &.secondary { - background-image: url('../../assets/images/cubo_doodle_green.svg'); - } -} - .wizard-step--title { font-size: 32px; font-weight: 300; color: $g15-platinum; - margin-top: 32px; + margin-top: $ix-marg-d; margin-bottom: $ix-marg-b; @include no-user-select(); } .wizard-step--sub-title { margin-top: $ix-marg-b; - margin-bottom: 32px; + margin-bottom: $ix-marg-d; font-size: 16px; font-weight: 400; color: $g11-sidewalk; @@ -138,10 +159,24 @@ } } +.wizard-step--body-snippet { + background-color: $g3-castle; + border-radius: $radius; + margin: $ix-marg-a 0; + padding: $ix-marg-b; + overflow-x: auto; + font-family: 'RobotoMono', monospace; +} + +.wizard-step--body-copybutton{ + margin-left: 10px; +} + .wizard-step--lp-body { height: 280px; - width: 750px; - margin: 10px auto 0px auto; + flex-shrink: 1; + width: 100%; + margin: $ix-marg-c auto 0 auto; } .wizard-step--top-container { @@ -150,7 +185,7 @@ max-width: 750px; margin: 10px auto 0 auto; border-radius: $radius; - background-color: #202028; + background-color: $g2-kevlar; transition: background-color 0.25s ease, border-color 0.25s ease; } @@ -170,7 +205,6 @@ border-radius: $radius; height: 50px; width: 100%; - max-width: 750px; margin-top: 10px; background-color: $g6-smoke; text-align: center; @@ -190,16 +224,19 @@ .onboarding-step { width: 100%; - max-width: 60vw; - max-height: calc(100% - 68px); + max-height: 100%; text-align: center; display: inline-flex; flex-direction: column; justify-content: flex-start; align-items: center; - margin: 0 auto 60px auto; overflow-y: scroll; overflow-x: hidden; + transition: max-width .4s ease-in-out; +} + +.wizard--skippable { + margin-bottom: $ix-marg-a + 38px; } .wizard-step--grid-container { @@ -211,4 +248,43 @@ .wizard-step--filter { float:right; padding-bottom: 15px; +} + +@media screen and (min-width: $grid--breakpoint-md) { + .wizard-step--container { + padding: $ix-marg-d $ix-marg-d ($ix-marg-d * 2 + 38px) $ix-marg-d; + } + + .wizard--skippable { + margin-bottom: 0; + + .wizard--button-container::before { + content: ""; + flex: 1; + visibility: hidden; + } + } + + .wizard--button-container { + left: $ix-marg-d; + right: $ix-marg-d; + + .wizard--skip-container { + width: auto; + flex: 1; + justify-content: flex-end; + + .button { + margin: 0 0 0 $ix-marg-a; + } + } + } + + .onboarding-step { + max-width: 60vw; + } + + .wizard--bookend-step { + width: 70%; + } } \ No newline at end of file diff --git a/ui/src/onboarding/components/AdminStep.tsx b/ui/src/onboarding/components/AdminStep.tsx index 2a5988d479..555367d2f1 100644 --- a/ui/src/onboarding/components/AdminStep.tsx +++ b/ui/src/onboarding/components/AdminStep.tsx @@ -65,7 +65,11 @@ class AdminStep extends PureComponent { > - + { /> - + { /> - + { /> - + { /> - + { const {onExit, onDecrementCurrentStepIndex} = this.props return ( -
+

Setup Complete!

-
+
+
) } diff --git a/ui/src/onboarding/components/OnboardingButtons.tsx b/ui/src/onboarding/components/OnboardingButtons.tsx index 62a801daa7..2c03df2517 100644 --- a/ui/src/onboarding/components/OnboardingButtons.tsx +++ b/ui/src/onboarding/components/OnboardingButtons.tsx @@ -91,14 +91,16 @@ class OnboardingButtons extends PureComponent { } return ( -
) } } diff --git a/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap b/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap index 934a0862eb..18ed671011 100644 --- a/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap +++ b/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap @@ -21,8 +21,9 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
-
+