Просмотр исходного кода

Include teaser media and do some style adjustments.

Paulo Reis 10 лет назад
Родитель
Сommit
06629e05d4

+ 18 - 8
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 

+ 10 - 2
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;