refactor: registration page (#759)

components/registration/index.css

@@ -117,16 +117,11 @@
 }
 #registration .mWrapper .stepsWrapper .step {
   min-height: 1px;
-  float: left;
-  opacity: 0;
   -moz-transition: 0.3s;
   -o-transition: 0.3s;
   -webkit-transition: 0.3s;
   transition: 0.3s;
 }
-#registration .mWrapper .stepsWrapper .step.active {
-  opacity: 1;
-}
 #registration .mWrapper #test {
   background: rgb(var(--background-total-theme));
   width: 450px;
@@ -537,6 +532,17 @@
 #registration .mWrapper .bloggers .welcome_text .name {
   color: rgb(var(--color-txt-ac));
 }
+#registration .mWrapper .bloggers .nextStepButtons {
+  position: sticky;
+  z-index: 1000;
+  bottom: 0;
+  height: 100px;
+  background: rgb(var(--background-hidden-layer));
+}
+#registration .mWrapper .bloggers .nextStepButtons .subc {
+  margin-top: 2em;
+  padding-top: 1em;
+}
 #registration .mWrapper .bloggers .usersHorizontal {
   margin-top: 20px;
   display: flex;
@@ -596,7 +602,7 @@
   cursor: default;
   width: 308px;
   position: absolute;
-  z-index: 9999;
+  z-index: 999;
   right: 180px;
   margin-top: 15px;
   background: rgb(var(--background-total-theme));
@@ -833,6 +839,12 @@
 #registration[step="bloggers"] .hasaccount {
   display: none;
 }
+#registration[step="bloggers"] .stepsWrapper {
+  overflow: visible;
+}
+#registration[step="bloggers"] .stepsWrapper .stepsWrapperLine {
+  overflow: visible;
+}
 .wndcontent #registration .categories .welcome_text {
   margin-top: 0.5em !important;
 }
@@ -851,6 +863,9 @@ html[theme="gray"] #registration .ucaptcha .captchaImage {
   #registration .mWrapper #test {
     width: 100%;
   }
+  #registration[step="bloggers"] .bloggers .nextStepButtons {
+    height: 150px;
+  }
   #registration .mWrapper .categories .cats {
     padding: 0.5em;
     justify-content: space-between;
@@ -862,10 +877,7 @@ html[theme="gray"] #registration .ucaptcha .captchaImage {
   #registration .mWrapper .cat {
     font-size: 0.8em !important;
   }
-  #registration .mWrapper .bloggers .subc {
-    margin-top: 2em;
-  }
-  .wndcontent #registration .categories .nextStepButtons {
+  .wndcontent #registration[step="categories"] .nextStepButtons {
     position: static;
   }
 }

components/registration/index.js

@@ -691,6 +691,8 @@ var registration = (function(){
 
 				after : function(el){
 
+					self.app.el.app.removeClass('default-scroll')
+
 					var c = false
 
 					var clbk = function(){
@@ -910,6 +912,8 @@ var registration = (function(){
 
 				after : function(el){
 
+					self.app.el.app.addClass('default-scroll')
+
 					var next = el.find('.next');
 
 					el.on('click', '.subscribeButton', events.subscribe);
@@ -1469,9 +1473,6 @@ var registration = (function(){
 
 				el.c.find('.step').width(w)
 
-
-
-
 				line.css('margin-left', '-' + ((getindex(current)) * w) + 'px')
 
 				line.width(w * _.toArray(steps).length)
@@ -1496,28 +1497,10 @@ var registration = (function(){
 
 				el.c.find('.step').removeClass('active');
 
-				var _el = el.c.find('.step[step="'+step.id+'"] .stepBody');
-				var s = _el.closest('.step');
-				var line = el.c.find('.stepsWrapperLine');
+				var _el = el.c.find('.step .stepBody');
 
 				renders[step.render](_el, function(_el){
 
-					var w = s.closest('.stepsWrapper').width()
-
-					el.c.find('.step').width(w)
-
-
-					line.width(w * _.toArray(steps).length)
-
-
-					var m = '-' + (getindex(current) * w) + 'px'
-
-					line.css('margin-left', m)
-
-
-					s.closest('.step').addClass('active')
-
-
 					if (clbk)
 						clbk(_el)
 				})
@@ -1902,6 +1885,8 @@ var registration = (function(){
 			destroy : function(){
 				window.removeEventListener('resize', events.width)
 
+				self.app.el.app.removeClass('default-scroll')
+
 				delete self.app.platform.sdk.node.transactions.clbks.moneyfail
 				delete self.app.errors.clbks.registration
 				delete self.app.platform.sdk.node.transactions.clbks.filluser

components/registration/index.less

@@ -1,6 +1,7 @@
 @import "../../css/__cssvar";
 
 #registration{
+
 	.caption{
 		margin-top: 3 * @rhythm;
 		font-size: 2.1em;
@@ -143,13 +144,7 @@
 			}
 			.step{
 				min-height: 1px;
-				float: left;
-				opacity: 0;
 				.transition(0.3s);
-
-				&.active{
-					opacity: 1;
-				}
 			}
 		}
 
@@ -655,6 +650,19 @@
 				}
 			}
 
+			.nextStepButtons{
+				position: sticky;
+				z-index: 1000;
+				bottom: 0;
+				height: 100px;
+				background: rgb(var(--background-hidden-layer));
+
+				.subc{
+					margin-top: @rhythm * 4;
+					padding-top: @rhythm * 2
+				}
+			}
+
 			.usersHorizontal{
 				margin-top: 20px;
 				display: flex;
@@ -731,7 +739,7 @@
 						cursor: default;
 						width: 308px;
 						position: absolute;
-						z-index: 9999;
+						z-index: 999;
 						right: 180px;
 						margin-top: 15px;
 						background: rgb(var(--background-total-theme));
@@ -1073,6 +1081,18 @@
 			display: none;
 		}
     }
+
+	&[step="bloggers"]{
+		.stepsWrapper{
+			overflow: visible;
+
+			.stepsWrapperLine{
+				overflow: visible;
+			}
+
+		}
+	}
+
 
 }
 
@@ -1115,6 +1135,15 @@ html[theme="gray"]{
 
 	#registration{
 
+		&[step="bloggers"]{
+
+			.bloggers{
+				.nextStepButtons{
+					height: 150px;
+				}
+			}
+		}
+
 		.mWrapper {
 			.categories {
 
@@ -1134,29 +1163,27 @@ html[theme="gray"]{
 				font-size: .8em!important;
 			}
 
-			.bloggers{
-				.subc{
-					margin-top: @rhythm * 4;
-				}
-			}
 		}
 
 
 	}
 
 	.wndcontent{
 		#registration{
-			.categories{
+			&[step="categories"]{
 
 				.nextStepButtons{
 					position: static;
 				}
 
 			}
+
 
 		}
 
 
 	}
+
+
 
 }

components/registration/templates/index.html

@@ -22,15 +22,13 @@
 		<div class="work">
 			<div class="stepsWrapper">
 				<div class="stepsWrapperLine">
-					<% _.each(steps, function(step){ %> 
 
-					<div class="step" step="<%-step.id%>">
+					<div class="step">
 						<div class="stepBody">
 
 						</div>
 					</div>
 
-					<% }) %>
 				</div>
 			</div>
 

css/main.css

@@ -6838,6 +6838,9 @@ html.pipmode .matrixchatwrapper {
   flex-direction: row;
   align-items: center;
 }
+#application.default-scroll {
+  overflow-x: visible;
+}
 #application .emojionearea,
 #application .emojionearea.form-control {
   background: rgb(var(--background-hidden-layer));

css/main.less

@@ -8468,6 +8468,10 @@ html.pipmode{
 ///////////
 #application{
 
+    &.default-scroll{
+        overflow-x: visible;
+    }
+
     .emojionearea, .emojionearea.form-control{
         background: rgb(var(--background-hidden-layer));
         color: rgb(var(--text-color));