Explorar el Código

More style adjustments.

Paulo Reis hace 9 años
padre
commit
a8a7589973

+ 16 - 16
services/web/app/views/project/editor/feature-onboarding.pug

@@ -6,11 +6,11 @@
 )
 )
 	.feat-onboard-wrapper
 	.feat-onboard-wrapper
 		h1.feat-onboard-title
 		h1.feat-onboard-title
-			span.feat-onboard-title-name Commenting
+			span.feat-onboard-highlight Commenting
 			|  & 
 			|  & 
-			span.feat-onboard-title-name Track Changes
+			span.feat-onboard-highlight Track Changes
 		p.feat-onboard-description
 		p.feat-onboard-description
-			| Collaboration features are finally here! 
+			| Collaboration features are here! 
 		p.feat-onboard-description
 		p.feat-onboard-description
 			span.feat-onboard-highlight Commenting 
 			span.feat-onboard-highlight Commenting 
 			| and 
 			| and 
@@ -60,38 +60,38 @@
 				i.fa.fa-arrow-right
 				i.fa.fa-arrow-right
 
 
 		div(ng-switch="onboarding.innerStep")
 		div(ng-switch="onboarding.innerStep")
-			.row.feat-onboard-adv-wrapper(ng-switch-when="1")
+			.row(ng-switch-when="1")
 				.col-xs-6
 				.col-xs-6
 					h2.feat-onboard-adv-title Commenting
 					h2.feat-onboard-adv-title Commenting
-					p Want to discuss specific parts of the text?
-					p Use our brand-new commenting system.
+					p.feat-onboard-description Want to discuss specific parts of the text?
+					p.feat-onboard-description Use our brand-new commenting system.
 				.col-xs-6
 				.col-xs-6
 					h2.feat-onboard-adv-title Track Changes
 					h2.feat-onboard-adv-title Track Changes
-					p See changes in your documents, live.
-					p Track, accept and reject changes individually.
-			.row.feat-onboard-adv-wrapper(ng-switch-when="2")
+					p.feat-onboard-description See changes in your documents, live.
+					p.feat-onboard-description Track, accept and reject changes individually.
+			.row(ng-switch-when="2")
 				.col-xs-12
 				.col-xs-12
 					h2.feat-onboard-adv-title Commenting
 					h2.feat-onboard-adv-title Commenting
-					p
+					p.feat-onboard-description
 						span.feat-onboard-highlight Commenting 
 						span.feat-onboard-highlight Commenting 
 						| is very easy.
 						| is very easy.
-					p Just select a span of text and click on 
+					p.feat-onboard-description Just select a span of text and click on 
 						span.feat-onboard-highlight “Add comment”
 						span.feat-onboard-highlight “Add comment”
 						| .		
 						| .		
-			.row.feat-onboard-adv-wrapper(ng-switch-when="3")
+			.row(ng-switch-when="3")
 				.col-xs-12
 				.col-xs-12
 					h2.feat-onboard-adv-title Track Changes
 					h2.feat-onboard-adv-title Track Changes
-					p
+					p.feat-onboard-description
 						| Let your peers know what you've been up to.
 						| Let your peers know what you've been up to.
-					p
+					p.feat-onboard-description
 						| Click on the 
 						| Click on the 
 						span.feat-onboard-highlight “Track Changes” 
 						span.feat-onboard-highlight “Track Changes” 
 						| toggle to start marking your insertions, as well as your deletions.
 						| toggle to start marking your insertions, as well as your deletions.
 
 
-			.row.feat-onboard-adv-wrapper(ng-switch-when="4") 
+			.row(ng-switch-when="4") 
 				.col-xs-12
 				.col-xs-12
 					h2.feat-onboard-adv-title Track Changes
 					h2.feat-onboard-adv-title Track Changes
-					p
+					p.feat-onboard-description
 						| Click 
 						| Click 
 						span.feat-onboard-highlight “Accept” 
 						span.feat-onboard-highlight “Accept” 
 						| or 
 						| or 

+ 16 - 34
services/web/public/stylesheets/app/editor/feature-onboarding.less

@@ -1,6 +1,3 @@
-@feat-onboard-wrapper-width: 750px;
-@feat-onboard-max-text-width: 700px;
-
 .feat-onboard {
 .feat-onboard {
 	position: fixed;
 	position: fixed;
 	top: 0;
 	top: 0;
@@ -9,7 +6,7 @@
 	left: 0;
 	left: 0;
 	display: flex;
 	display: flex;
  	justify-content: center;
  	justify-content: center;
- 	align-items: center;
+ 	align-items: baseline;
 	background-color: rgba(0, 0, 0, .85);
 	background-color: rgba(0, 0, 0, .85);
 	background-repeat: no-repeat;
 	background-repeat: no-repeat;
 	background-position-x: 0;
 	background-position-x: 0;
@@ -18,53 +15,37 @@
 	z-index: 102;
 	z-index: 102;
 	overflow: auto;
 	overflow: auto;
 }
 }
-
 	.feat-onboard-wrapper {
 	.feat-onboard-wrapper {
+		padding-top: 30px;
 	}
 	}
+
 		.feat-onboard-title {
 		.feat-onboard-title {
 			color: #FFF;
 			color: #FFF;
-			margin-bottom: 40px;
-
+			margin-bottom: 30px;
 		}
 		}
-			.feat-onboard-title-name {
-				font-weight: bold;
-			}
 
 
 		.feat-onboard-description {
 		.feat-onboard-description {
-			max-width: @feat-onboard-max-text-width;
+			max-width: 30em;
 			margin: 0 auto 5px;
 			margin: 0 auto 5px;
-			padding: 0 80px;
 		}
 		}
-	
-	.feat-onboard-highlight {
-		font-weight: bold;
-		white-space: nowrap;
-	}
-
-	.feat-onboard-adv-wrapper {
-		text-align: left;
-	}
-		.feat-onboard-adv-title {
+		
+		.feat-onboard-highlight {
 			font-weight: bold;
 			font-weight: bold;
 			white-space: nowrap;
 			white-space: nowrap;
-			color: #FFF;
-			font-size: 23px;
-			margin-top: 0;
 		}
 		}
 
 
-	.feat-onboard-btn-wrapper {
-		margin-top: 30px;
-		margin-bottom: 10px;
-
-		> .btn {
-			box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3);
-		}
-	}
+			.feat-onboard-adv-title {
+				font-weight: bold;
+				white-space: nowrap;
+				color: #FFF;
+				font-size: 23px;
+				margin-top: 0;
+			}
 
 
 	.feat-onboard-tutorial-wrapper {
 	.feat-onboard-tutorial-wrapper {
 		display: flex;
 		display: flex;
 		align-items: center;
 		align-items: center;
-		padding: 30px 0;
+		padding: 30px 0 15px;
 	}
 	}
 		.feat-onboard-video {
 		.feat-onboard-video {
 			width: 616px;
 			width: 616px;
@@ -80,6 +61,7 @@
 			padding: 0;
 			padding: 0;
 			font-size: 1.3em;
 			font-size: 1.3em;
 			line-height: 1em;
 			line-height: 1em;
+			box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3);
 
 
 			&[disabled] {
 			&[disabled] {
 				opacity: 0.2;
 				opacity: 0.2;