diff --git a/services/web/app/views/project/editor/feature-onboarding.jade b/services/web/app/views/project/editor/feature-onboarding.jade index 3a46b05a36..1a8d769088 100644 --- a/services/web/app/views/project/editor/feature-onboarding.jade +++ b/services/web/app/views/project/editor/feature-onboarding.jade @@ -12,26 +12,36 @@ p.feat-onboard-description span.feat-onboard-description-name Code check  | will highlight potential problems in your LaTeX code, allowing you to handle errors earlier and become more productive. + .row + video.feat-onboard-video(autoplay, loop) + source(src="/img/teasers/code-checker/code-checker.mp4", type="video/mp4") + img(src="/img/teasers/code-checker/code-checker.gif") .row.feat-onboard-adv-wrapper .col-xs-4 h2.feat-onboard-adv-title | Missing  span.feat-onboard-adv-title-highlight brackets - p Lorem ipsum feature description stuff. + p Forgot to place a closing bracket? We'll warn you. .col-xs-4 h2.feat-onboard-adv-title - | Missing  - span.feat-onboard-adv-title-highlight brackets - p Lorem ipsum feature description stuff. + | Unclosed  + span.feat-onboard-adv-title-highlight environments + p + | Know when you are missing an  + code \end{...} + |  command. .col-xs-4 h2.feat-onboard-adv-title - | Missing  - span.feat-onboard-adv-title-highlight brackets - p Lorem ipsum feature description stuff. + | Incorrect  + span.feat-onboard-adv-title-highlight nesting + p + | Order matters. Get notified when you use an  + code \end{...} + |   too soon. .feat-onboard-btn-wrapper button.btn.btn-primary(ng-click="turnCodeCheckOn();") Yes, turn Code check on .feat-onboard-btn-wrapper - button.btn.btn-default(ng-click="turnCodeCheckOn();") No, disable it for now + button.btn.btn-default(ng-click="turnCodeCheckOff();") No, disable it for now div(ng-if="innerStep === 2;") p.feat-onboard-description | Remember: you can always turn  diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less index bedb7be22a..1be73411e3 100644 --- a/services/web/public/stylesheets/app/editor/feature-onboarding.less +++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less @@ -1,4 +1,5 @@ -@feat-onboard-wrapper-width: 700px; +@feat-onboard-wrapper-width: 820px; +@feat-onboard-max-text-width: 750px; .feat-onboard { position: fixed; @@ -61,20 +62,27 @@ color: #FFF; font-weight: bold; } + .feat-onboard-description { - margin-bottom: 40px; + max-width: @feat-onboard-max-text-width; + margin: 0 auto 40px; padding: 0 80px; } .feat-onboard-description-name { font-weight: bold; } + .feat-onboard-video { + box-shadow: 0 0 70px rgba(255, 255, 255, 0.3); + } + .feat-onboard-adv-wrapper { text-align: left; margin-bottom: 40px; } .feat-onboard-adv-title { color: #FFF; + font-size: 23px; } .feat-onboard-adv-title-highlight { font-weight: bold;