Improved layout of login and registration pages

frontend/delta/css/clipperz.css

@@ -1329,17 +1329,107 @@ div.help {
   z-index: 10;
   background-color: transparent; }
 
-/*
+#loginPage, #registrationPage {
-//	Firefox considers 100% respect to height of the whole window, this is rule is necessary to eliminate the card toolbar offset.
+  overflow: auto;
-@-moz-document url-prefix() {
+  -webkit-overflow-scrolling: touch; }
-	@include fixHeighHack ($mainCardToolbarHeight, $cardListPadding)
+  #loginPage .content, #registrationPage .content {
-}
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -webkit-flex-direction: column;
+    -moz-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    height: 100%; }
+    #loginPage .content .miscInfo, #registrationPage .content .miscInfo {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0;
+      -moz-box-flex: 0;
+      -moz-flex: 0;
+      -ms-flex: 0;
+      flex: 0; }
+    #loginPage .content header, #registrationPage .content header {
+      -webkit-box-flex: auto;
+      -webkit-flex: auto;
+      -moz-box-flex: auto;
+      -moz-flex: auto;
+      -ms-flex: auto;
+      flex: auto;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: end;
+      -ms-flex-align: end;
+      -webkit-align-items: flex-end;
+      -moz-align-items: flex-end;
+      align-items: flex-end; }
+      #loginPage .content header .headerContent, #registrationPage .content header .headerContent {
+        width: 100%; }
+    #loginPage .content .body, #registrationPage .content .body {
+      -webkit-box-flex: auto;
+      -webkit-flex: auto;
+      -moz-box-flex: auto;
+      -moz-flex: auto;
+      -ms-flex: auto;
+      flex: auto;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      -webkit-align-items: center;
+      -moz-align-items: center;
+      align-items: center; }
+      #loginPage .content .body .bodyContent, #registrationPage .content .body .bodyContent {
+        margin-left: auto;
+        margin-right: auto; }
+    #loginPage .content .other, #registrationPage .content .other {
+      -webkit-box-flex: auto;
+      -webkit-flex: auto;
+      -moz-box-flex: auto;
+      -moz-flex: auto;
+      -ms-flex: auto;
+      flex: auto;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      -webkit-align-items: center;
+      -moz-align-items: center;
+      align-items: center; }
+      #loginPage .content .other .otherContent, #registrationPage .content .other .otherContent {
+        width: 100%; }
+    #loginPage .content footer, #registrationPage .content footer {
+      -webkit-box-flex: auto;
+      -webkit-flex: auto;
+      -moz-box-flex: auto;
+      -moz-flex: auto;
+      -ms-flex: auto;
+      flex: auto;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: end;
+      -ms-flex-align: end;
+      -webkit-align-items: flex-end;
+      -moz-align-items: flex-end;
+      align-items: flex-end; }
+      #loginPage .content footer .footerContent, #registrationPage .content footer .footerContent {
+        width: 100%; }
 
-//	Chrome fix (without messing with Safari)
-@supports (-webkit-appearance:none) and (R:0) {
-	@include fixHeighHack ($mainCardToolbarHeight, $cardListPadding)
-}
-*/
 .tagEditor {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1444,79 +1534,87 @@ div.help {
       color: white;
       margin: 0px; }
 
-#loginPage {
+#loginPage .content {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch; }
-  #loginPage div.loginForm {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    -webkit-flex-direction: column;
-    -moz-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-align: stretch;
-    -ms-flex-align: stretch;
-    -webkit-align-items: stretch;
-    -moz-align-items: stretch;
-    align-items: stretch;
-    height: 100%;
-    text-align: center;
   background-color: #ff9900; }
-    #loginPage div.loginForm header {
+  #loginPage .content .body {
-      -webkit-box-flex: 1;
+    background-color: #ff9900; }
-      -webkit-flex: 1;
+  #loginPage .content .other {
-      -moz-box-flex: 1;
+    color: white;
-      -moz-flex: 1;
+    background-color: black; }
-      -ms-flex: 1;
+    #loginPage .content .other a:before {
-      flex: 1;
+      content: "> "; }
-      font-size: 48pt;
+  #loginPage .content footer {
-      line-height: 90pt;
+    color: white;
-      color: white; }
+    background-color: black; }
-      #loginPage div.loginForm header h3 {
+
-        font-weight: bold;
+#registrationPage .content {
-        font-size: 38pt;
+  background-color: black; }
-        line-height: 1.7em; }
+  #registrationPage .content .body {
-      #loginPage div.loginForm header h5 {
+    background-color: black; }
+  #registrationPage .content .other {
+    color: black;
+    background-color: #ff9900; }
+    #registrationPage .content .other a:before {
+      content: "< "; }
+  #registrationPage .content footer {
+    color: black;
+    background-color: #ff9900; }
+
+#loginPage .content, #registrationPage .content {
+  text-align: center;
+  /*
+  		&.extra-short {
+  			header {
+  				font-size: 18pt;
+  			}
+  
+  			div.form {
+  				form {
+  					padding: 10px;
+  					margin-bottom: 20px;
+  
+  					input {
+  						padding: 3px;
+  						margin-top: 3px;
+  						margin-bottom: 5px;
   						font-size: 16pt;
-        line-height: 1.0em; }
+  					}
-    #loginPage div.loginForm div.form {
+  
-      -webkit-box-flex: 4;
+  					button {
-      -webkit-flex: 4;
+  						min-height: 20px;
-      -moz-box-flex: 4;
+  
-      -moz-flex: 4;
+  						font-size: 12pt;
-      -ms-flex: 4;
+  						padding: 3px 10px;
-      flex: 4; }
+  						border: 1px solid white;
-      #loginPage div.loginForm div.form form {
+  					}
+  				}
+  			}
+  
+  			footer {
+  				font-size: 14pt;
+  			}
+  		}
+  */ }
+  #loginPage .content header, #registrationPage .content header {
+    max-height: 15%;
+    min-height: 70px;
+    padding: 10px;
+    color: white; }
+    #loginPage .content header h3, #registrationPage .content header h3 {
+      font-weight: bold;
+      font-size: 38pt; }
+    #loginPage .content header h5, #registrationPage .content header h5 {
+      font-size: 16pt; }
+  #loginPage .content .body form, #registrationPage .content .body form {
     position: relative;
     background: white;
     padding: 20px;
-        margin-bottom: 50px;
     max-width: 400px;
     margin-left: auto;
-        margin-right: auto;
+    margin-right: auto; }
-        /*			
+    #loginPage .content .body form label, #registrationPage .content .body form label {
-        				&:after {
-        					content: "";
-        					position: absolute;
-        					top: -15px;
-        					margin-left: 50%;
-        					left: -15px;
-        					border-style: solid;
-        					border-width: 0 15px 15px;
-        					border-color: $main-alternate-text-color transparent;
-        					display: block;
-        					width: 0;
-        					z-index: 1;
-        				}			
-        */ }
-        #loginPage div.loginForm div.form form label {
       display: none; }
-        #loginPage div.loginForm div.form form input {
+    #loginPage .content .body form input, #registrationPage .content .body form input {
       font-family: "clipperz-font";
       display: block;
       padding: 5px;
@@ -1527,7 +1625,83 @@ div.help {
       width: 100%;
       border: 1px solid #ccc;
       border-radius: 0px; }
-        #loginPage div.loginForm div.form form button {
+    #loginPage .content .body form .steps, #registrationPage .content .body form .steps {
+      text-align: center; }
+      #loginPage .content .body form .steps .step, #registrationPage .content .body form .steps .step {
+        display: none; }
+        #loginPage .content .body form .steps .step.center, #registrationPage .content .body form .steps .step.center {
+          display: block; }
+        #loginPage .content .body form .steps .step h1, #registrationPage .content .body form .steps .step h1 {
+          color: #268bd2;
+          font-size: 24pt;
+          font-weight: 700;
+          margin: 0px;
+          padding-top: 15px; }
+        #loginPage .content .body form .steps .step p, #registrationPage .content .body form .steps .step p {
+          color: #657b83;
+          font-size: 14pt;
+          font-weight: 100;
+          margin: 0px;
+          padding: 5px 0px; }
+        #loginPage .content .body form .steps .step label, #registrationPage .content .body form .steps .step label {
+          display: none; }
+        #loginPage .content .body form .steps .step input, #registrationPage .content .body form .steps .step input {
+          font-family: "clipperz-font";
+          display: block;
+          padding: 5px;
+          margin-bottom: 10px;
+          font-size: 100%;
+          font-size: 24pt;
+          width: 100%; }
+        #loginPage .content .body form .steps .step.TERMS_OF_SERVICE .checkboxBlock input, #registrationPage .content .body form .steps .step.TERMS_OF_SERVICE .checkboxBlock input {
+          display: block;
+          float: left;
+          margin-top: 10px;
+          width: 30px; }
+        #loginPage .content .body form .steps .step.TERMS_OF_SERVICE .checkboxBlock p, #registrationPage .content .body form .steps .step.TERMS_OF_SERVICE .checkboxBlock p {
+          font-size: 12pt;
+          font-weight: 500;
+          display: block;
+          text-align: left;
+          margin-left: 50px;
+          line-height: 1.5em; }
+          #loginPage .content .body form .steps .step.TERMS_OF_SERVICE .checkboxBlock p a, #registrationPage .content .body form .steps .step.TERMS_OF_SERVICE .checkboxBlock p a {
+            color: #dc322f; }
+        #loginPage .content .body form .steps .step.TERMS_OF_SERVICE .stepIndex, #registrationPage .content .body form .steps .step.TERMS_OF_SERVICE .stepIndex {
+          margin-top: 10px; }
+        #loginPage .content .body form .steps .step .stepBody, #registrationPage .content .body form .steps .step .stepBody {
+          min-height: 140px; }
+        #loginPage .content .body form .steps .step .stepIndex, #registrationPage .content .body form .steps .step .stepIndex {
+          text-align: center; }
+          #loginPage .content .body form .steps .step .stepIndex .stepIndexItem, #registrationPage .content .body form .steps .step .stepIndex .stepIndexItem {
+            font-weight: 900;
+            font-size: 28pt;
+            display: inline;
+            color: lightgrey; }
+            #loginPage .content .body form .steps .step .stepIndex .stepIndexItem.center, #registrationPage .content .body form .steps .step .stepIndex .stepIndexItem.center {
+              color: gray; }
+        #loginPage .content .body form .steps .step .buttons, #registrationPage .content .body form .steps .step .buttons {
+          text-align: center;
+          margin-top: 10px; }
+          #loginPage .content .body form .steps .step .buttons .button, #registrationPage .content .body form .steps .step .buttons .button {
+            margin: 10px;
+            text-align: center;
+            vertical-align: middle;
+            display: inline-block;
+            width: 80px;
+            font-weight: 900;
+            line-height: 45px;
+            font-size: 24px; }
+            #loginPage .content .body form .steps .step .buttons .button.back, #registrationPage .content .body form .steps .step .buttons .button.back {
+              background-color: lightgrey; }
+              #loginPage .content .body form .steps .step .buttons .button.back.step_-1, #registrationPage .content .body form .steps .step .buttons .button.back.step_-1 {
+                visibility: hidden; }
+            #loginPage .content .body form .steps .step .buttons .button.disabled, #registrationPage .content .body form .steps .step .buttons .button.disabled {
+              background-color: #c0c0c0;
+              cursor: default; }
+            #loginPage .content .body form .steps .step .buttons .button.enabled, #registrationPage .content .body form .steps .step .buttons .button.enabled {
+              background-color: #ff9900; }
+    #loginPage .content .body form button, #registrationPage .content .body form button {
       font-family: "clipperz-font";
       min-height: 48px;
       min-width: 48px;
@@ -1543,269 +1717,40 @@ div.help {
       -o-transition: background-color font-weight 0.2s linear;
       -ms-transition: background-color font-weight 0.2s linear;
       transition: background-color font-weight 0.2s linear; }
-          #loginPage div.loginForm div.form form button:disabled {
+      #loginPage .content .body form button:disabled, #registrationPage .content .body form button:disabled {
         font-weight: 100;
         background-color: #c0c0c0;
         cursor: default; }
-    #loginPage div.loginForm div.links ul li {
+  #loginPage .content .other, #registrationPage .content .other {
-      display: inline-block; }
-    #loginPage div.loginForm footer {
-      -webkit-box-flex: 1;
-      -webkit-flex: 1;
-      -moz-box-flex: 1;
-      -moz-flex: 1;
-      -ms-flex: 1;
-      flex: 1;
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -moz-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-direction: normal;
-      -webkit-box-orient: vertical;
-      -webkit-flex-direction: column;
-      -moz-flex-direction: column;
-      -ms-flex-direction: column;
-      flex-direction: column;
-      -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-      -webkit-align-items: stretch;
-      -moz-align-items: stretch;
-      align-items: stretch;
-      color: white;
-      background-color: black;
     font-size: 24pt;
-      cursor: default; }
+    padding: 20px;
-      #loginPage div.loginForm footer a.registrationLink {
+    max-height: 20%; }
-        cursor: pointer;
+    #loginPage .content .other a, #registrationPage .content .other a {
-        -webkit-box-flex: auto;
-        -webkit-flex: auto;
-        -moz-box-flex: auto;
-        -moz-flex: auto;
-        -ms-flex: auto;
-        flex: auto;
-        line-height: 50pt; }
-        #loginPage div.loginForm footer a.registrationLink:before {
-          content: "> "; }
-      #loginPage div.loginForm footer .applicationVersion {
-        -webkit-box-flex: 1;
-        -webkit-flex: 1;
-        -moz-box-flex: 1;
-        -moz-flex: 1;
-        -ms-flex: 1;
-        flex: 1;
-        font-size: 8pt; }
-        #loginPage div.loginForm footer .applicationVersion span {
-          color: #999999; }
-          #loginPage div.loginForm footer .applicationVersion span:after {
-            content: ":"; }
-        #loginPage div.loginForm footer .applicationVersion a {
-          color: #999999;
-          text-decoration: none;
-          padding-left: 5px;
-          font-weight: bold; }
-  #loginPage div.loginForm.narrow header {
-    font-size: 30pt;
-    line-height: 70px; }
-  #loginPage div.loginForm.narrow footer {
-    /* max-height: 25px; */
-    line-height: 20pt; }
-  #loginPage div.loginForm.extra-short header {
-    font-size: 18pt; }
-  #loginPage div.loginForm.extra-short div.form form {
-    padding: 10px;
-    margin-bottom: 20px; }
-    #loginPage div.loginForm.extra-short div.form form input {
-      padding: 3px;
-      margin-top: 3px;
-      margin-bottom: 5px;
-      font-size: 16pt; }
-    #loginPage div.loginForm.extra-short div.form form button {
-      min-height: 20px;
-      font-size: 12pt;
-      padding: 3px 10px;
-      border: 1px solid white; }
-  #loginPage div.loginForm.extra-short footer {
-    font-size: 14pt; }
-
-.links ul {
-  margin-bottom: 1em; }
-  .links ul li {
-    color: white;
       cursor: pointer; }
-    .links ul li:after {
+  #loginPage .content footer, #registrationPage .content footer {
+    max-height: 50px; }
+    #loginPage .content footer .links ul, #registrationPage .content footer .links ul {
+      padding: 3px;
+      padding-bottom: 6px; }
+      #loginPage .content footer .links ul li, #registrationPage .content footer .links ul li {
+        display: inline-block;
+        cursor: pointer; }
+        #loginPage .content footer .links ul li:after, #registrationPage .content footer .links ul li:after {
           content: '-';
           padding-left: 4px;
-      padding-right: 4px; }
+          padding-right: 4px;
-    .links ul li:last-child:after {
+          cursor: default; }
+        #loginPage .content footer .links ul li:last-child:after, #registrationPage .content footer .links ul li:last-child:after {
           content: '';
           padding-left: 0px;
           padding-right: 0px; }
-
+    #loginPage .content footer .applicationVersion, #registrationPage .content footer .applicationVersion {
-#registrationPage {
+      padding: 2px;
-  background-color: black;
-  color: white; }
-  #registrationPage .registrationForm {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    -webkit-flex-direction: column;
-    -moz-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-align: stretch;
-    -ms-flex-align: stretch;
-    -webkit-align-items: stretch;
-    -moz-align-items: stretch;
-    align-items: stretch;
-    height: 100%;
-    text-align: center;
-    background-color: black; }
-    #registrationPage .registrationForm header {
-      -webkit-box-flex: 1;
-      -webkit-flex: 1;
-      -moz-box-flex: 1;
-      -moz-flex: 1;
-      -ms-flex: 1;
-      flex: 1;
-      font-size: 48pt;
-      line-height: 90pt;
-      color: white; }
-      #registrationPage .registrationForm header h3 {
-        font-weight: bold;
-        font-size: 38pt;
-        line-height: 1.7em; }
-      #registrationPage .registrationForm header h5 {
-        font-size: 16pt;
-        line-height: 1.0em; }
-    #registrationPage .registrationForm div.form {
-      -webkit-box-flex: 4;
-      -webkit-flex: 4;
-      -moz-box-flex: 4;
-      -moz-flex: 4;
-      -ms-flex: 4;
-      flex: 4; }
-      #registrationPage .registrationForm div.form form {
-        background: white;
-        padding: 20px;
-        margin-bottom: 50px;
-        max-width: 400px;
-        margin-left: auto;
-        margin-right: auto; }
-        #registrationPage .registrationForm div.form form .steps {
-          text-align: center;
-          margin-left: auto;
-          margin-right: auto;
-          width: 400px; }
-          #registrationPage .registrationForm div.form form .steps .step {
-            display: none; }
-            #registrationPage .registrationForm div.form form .steps .step.center {
-              display: block; }
-            #registrationPage .registrationForm div.form form .steps .step h1 {
-              color: #268bd2;
-              font-size: 24pt;
-              font-weight: 700;
-              margin: 0px;
-              padding-top: 15px; }
-            #registrationPage .registrationForm div.form form .steps .step p {
-              color: #657b83;
-              font-size: 14pt;
-              font-weight: 100;
-              margin: 0px;
-              padding: 5px 0px; }
-            #registrationPage .registrationForm div.form form .steps .step label {
-              display: none; }
-            #registrationPage .registrationForm div.form form .steps .step input {
-              font-family: "clipperz-font";
-              display: block;
-              padding: 5px;
-              margin-bottom: 10px;
-              font-size: 100%;
-              font-size: 24pt;
-              width: 100%; }
-            #registrationPage .registrationForm div.form form .steps .step.TERMS_OF_SERVICE .checkboxBlock input {
-              display: block;
-              float: left;
-              margin-top: 10px;
-              width: 30px; }
-            #registrationPage .registrationForm div.form form .steps .step.TERMS_OF_SERVICE .checkboxBlock p {
-              font-size: 12pt;
-              font-weight: 500;
-              display: block;
-              text-align: left;
-              margin-left: 50px;
-              line-height: 1.5em; }
-              #registrationPage .registrationForm div.form form .steps .step.TERMS_OF_SERVICE .checkboxBlock p a {
-                color: #dc322f; }
-            #registrationPage .registrationForm div.form form .steps .step.TERMS_OF_SERVICE .stepIndex {
-              margin-top: 10px; }
-            #registrationPage .registrationForm div.form form .steps .step .stepBody {
-              min-height: 140px; }
-            #registrationPage .registrationForm div.form form .steps .step .stepIndex {
-              text-align: center; }
-              #registrationPage .registrationForm div.form form .steps .step .stepIndex .stepIndexItem {
-                font-weight: 900;
-                font-size: 28pt;
-                display: inline;
-                color: lightgrey; }
-                #registrationPage .registrationForm div.form form .steps .step .stepIndex .stepIndexItem.center {
-                  color: gray; }
-            #registrationPage .registrationForm div.form form .steps .step .buttons {
-              text-align: center;
-              margin-top: 10px; }
-              #registrationPage .registrationForm div.form form .steps .step .buttons .button {
-                margin: 10px;
-                text-align: center;
-                vertical-align: middle;
-                display: inline-block;
-                width: 80px;
-                font-weight: 900;
-                line-height: 45px;
-                font-size: 24px; }
-                #registrationPage .registrationForm div.form form .steps .step .buttons .button.back {
-                  background-color: lightgrey; }
-                  #registrationPage .registrationForm div.form form .steps .step .buttons .button.back.step_-1 {
-                    visibility: hidden; }
-                #registrationPage .registrationForm div.form form .steps .step .buttons .button.disabled {
-                  background-color: #c0c0c0;
-                  cursor: default; }
-                #registrationPage .registrationForm div.form form .steps .step .buttons .button.enabled {
-                  background-color: #ff9900; }
-    #registrationPage .registrationForm div.links ul li {
-      display: inline-block; }
-    #registrationPage .registrationForm footer {
-      -webkit-box-flex: 1;
-      -webkit-flex: 1;
-      -moz-box-flex: 1;
-      -moz-flex: 1;
-      -ms-flex: 1;
-      flex: 1;
-      color: black;
-      background-color: #ff9900;
-      cursor: pointer;
-      font-size: 24pt; }
-      #registrationPage .registrationForm footer:before {
-        content: "< "; }
-      #registrationPage .registrationForm footer a {
-        line-height: 50pt; }
-      #registrationPage .registrationForm footer .applicationVersion {
-        -webkit-box-flex: 1;
-        -webkit-flex: 1;
-        -moz-box-flex: 1;
-        -moz-flex: 1;
-        -ms-flex: 1;
-        flex: 1;
       font-size: 8pt; }
-        #registrationPage .registrationForm footer .applicationVersion span {
+      #loginPage .content footer .applicationVersion span:after, #registrationPage .content footer .applicationVersion span:after {
-          color: black; }
-          #registrationPage .registrationForm footer .applicationVersion span:after {
         content: ":"; }
-        #registrationPage .registrationForm footer .applicationVersion a {
+      #loginPage .content footer .applicationVersion a, #registrationPage .content footer .applicationVersion a {
-          color: black;
+        color: inherit;
         text-decoration: none;
         padding-left: 5px;
         font-weight: bold; }

frontend/delta/js/Clipperz/PM/UI/Components/Pages/LoginPage.js

@@ -167,16 +167,28 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
 //									React.DOM.a({'key':'signup', 'onClick':this.handleRegistrationLinkClick}, "Sign up")
 //								]);
 
-		var	registrationLink = React.DOM.a({'key':'signup', 'className':'registrationLink', 'onClick':this.handleRegistrationLinkClick}, "Sign up");
+		var	registrationLink = React.DOM.div({'className':'other', 'key':'other'}, [
-		return React.DOM.div({'key':'loginForm', 'className':'loginForm ' + this.props['style']}, [
+			React.DOM.div({'className':'otherContent'}, [
+				React.DOM.a({'key':'signup', 'className':'registrationLink', 'onClick':this.handleRegistrationLinkClick}, "Sign up")
+			])
+		]);
+
+		return React.DOM.div({'key':'loginForm', 'className':'loginForm content ' + this.props['style']}, [
 			Clipperz.PM.UI.Components.AccountStatus(MochiKit.Base.update(this.props['proxyInfo'])),
 			React.DOM.header({'key':'header'}, [
+				React.DOM.div({'className':'headerContent'}, [
 					React.DOM.h3({}, 'clipperz'),
 					React.DOM.h5({}, 'keep it to yourself'),
 				]),
-			React.DOM.div({'key':'formWrapper', 'className':'form'}, [
+			]),
+			React.DOM.div({'key':'formWrapper', 'className':'form body'}, [
+				React.DOM.div({'className':'bodyContent'}, [
 					this.props.mode == 'PIN' ? this.pinForm() : this.loginForm(),
 				]),
+			]),
+			this.props['isNewUserRegistrationAvailable'] ? registrationLink : null,
+			React.DOM.footer({'key':'footer'}, [
+				React.DOM.div({'className':'footerContent'}, [
 					React.DOM.div({'key':'links', 'className':'links'}, [
 						React.DOM.ul({}, [
 							React.DOM.li({'key':'about',   'onClick':this.showUrl('/about/')}, "About"),
@@ -184,13 +196,12 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
 							React.DOM.li({'key':'privacy', 'onClick':this.showUrl('/privacy_policy/')}, "Privacy"),
 						])
 					]),
-			React.DOM.footer({'key':'footer'}, [
-				this.props['isNewUserRegistrationAvailable'] ? registrationLink : null,
 					React.DOM.div({'key':'applicationVersion', 'className':'applicationVersion'}, [
 						React.DOM.span({'key':'applicationVersionLabel'}, "application version"),
 						React.DOM.a({'key':'applicationVersionLink', 'href':'https://github.com/clipperz/password-manager/commit/' + Clipperz_version, 'target':'github'}, Clipperz_version)
 					])
 				])
+			])
 //			this.props['isNewUserRegistrationAvailable'] ? registrationLink : null
 		]);
 	}

frontend/delta/js/Clipperz/PM/UI/Components/Pages/RegistrationPage.js

@@ -221,16 +221,28 @@ Clipperz.PM.UI.Components.Pages.RegistrationPageClass = React.createClass({
 	},
 
 	render: function () {
-		return	React.DOM.div({'className':'registrationForm'},[
+		return	React.DOM.div({'className':'registrationForm content'},[
+					Clipperz.PM.UI.Components.AccountStatus(MochiKit.Base.update(this.props['proxyInfo'])),
 					React.DOM.header({'key':'header'}, [
+						React.DOM.div({'className':'headerContent'}, [
 							React.DOM.h3({}, 'clipperz'),
 							React.DOM.h5({}, 'keep it to yourself'),
+						])
 					]),
-					React.DOM.div({'key':'body', 'className':'form'}, [
+					React.DOM.div({'key':'body', 'className':'form  body'}, [
+						React.DOM.div({'className':'bodyContent'}, [
 							React.DOM.form({'key':'registrationForm', 'autoComplete':'off', 'onChange': this.handleChange}, [
 								React.DOM.div({'key':'steps', 'className':'steps'}, MochiKit.Base.map(this.renderStep, this.props['steps']))
 							])
+						])
 					]),
+					React.DOM.div({'className':'other', 'key':'other'}, [
+						React.DOM.div({'className':'otherContent'}, [
+							React.DOM.a({'key':'login', 'onClick':this.handleLoginLinkClick}, "Login"),
+						])
+					]),
+					React.DOM.footer({'key':'footer'}, [
+						React.DOM.div({'className':'footerContent'}, [
 							React.DOM.div({'key':'links', 'className':'links'}, [
 								React.DOM.ul({}, [
 									React.DOM.li({'key':'about',   'onClick':this.showUrl('/about/')}, "About"),
@@ -238,13 +250,12 @@ Clipperz.PM.UI.Components.Pages.RegistrationPageClass = React.createClass({
 									React.DOM.li({'key':'privacy', 'onClick':this.showUrl('/privacy_policy/')}, "Privacy"),
 								])
 							]),
-					React.DOM.footer({'key':'footer'}, [
-						React.DOM.a({'key':'login', 'onClick':this.handleLoginLinkClick}, "Login"),
 							React.DOM.div({'key':'applicationVersion', 'className':'applicationVersion'}, [
 								React.DOM.span({'key':'applicationVersionLabel'}, "application version"),
 								React.DOM.a({'key':'applicationVersionLink', 'href':'https://github.com/clipperz/password-manager/commit/' + Clipperz_version, 'target':'github'}, Clipperz_version)
 							])
 						])
+					])
 				]);
 	},
 

frontend/delta/scss/clipperz.scss

@@ -35,7 +35,6 @@ refer to http://www.clipperz.com.
 
 @import "style/loadingPage";
 @import "style/loginPage";
-@import "style/registrationPage";
 @import "style/selectionPanel";
 @import "style/settingsPanel";
 @import "style/accountStatus";

frontend/delta/scss/core/layout.scss

@@ -616,16 +616,71 @@ div.help {
 	background-color: rgba(0, 0, 0, 0);
 }
 
-//@include fixHeighHack ($mainCardToolbarHeight /*, $cardListPadding*/)
 
-/*
+#loginPage, #registrationPage {
-//	Firefox considers 100% respect to height of the whole window, this is rule is necessary to eliminate the card toolbar offset.
+	@include overflow-auto;
-@-moz-document url-prefix() {
-	@include fixHeighHack ($mainCardToolbarHeight, $cardListPadding)
-}
 
-//	Chrome fix (without messing with Safari)
+	.content {
-@supports (-webkit-appearance:none) and (R:0) {
+		@include flexbox();
-	@include fixHeighHack ($mainCardToolbarHeight, $cardListPadding)
+		@include flex-direction(column);
+//		@include align-items(stretch);
+
+		height: 100%;
+
+		.miscInfo {
+			@include flex(0);
+//			background-color: green;
+		}
+	
+		header {
+			@include flex(auto);
+//			background-color: yellow;
+
+			@include flexbox();
+			@include align-items(flex-end);
+			.headerContent {
+				width: 100%;
+			}
+		}
+	
+		.body {
+			@include flex(auto);
+//			background-color: green;
+
+			@include flexbox();
+			@include align-items(center);
+			.bodyContent {
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+	
+		.other {
+			@include flex(auto);
+//			background-color: yellow;
+
+			@include flexbox();
+			@include align-items(center);
+			.otherContent {
+				width: 100%;
+			}
+		}
+
+		footer {
+			@include flex(auto);
+//			background-color: green;
+
+			@include flexbox();
+			@include align-items(flex-end);
+
+			.footerContent {
+				width: 100%;
+				.links {
+				}
+
+				.applicationVersion {
+				}
+			}
+		}
+	}
 }
-*/

frontend/delta/scss/style/loginPage.scss

@@ -22,67 +22,93 @@ refer to http://www.clipperz.com.
 */
 
 #loginPage {
-	@include overflow-auto;
+	.content {
-
-	div.loginForm {
-		@include flexbox();
-		@include flex-direction(column);
-		@include align-items(stretch);
-
-		height: 100%;
-		
-		text-align: center;
 		background-color: $main-color;
 
-		header {
+		.body {
-			@include flex(1);
+			background-color: $main-color;
-//			@include icon-font();
+		}
 
-			font-size: 48pt;
+		.other {
-			line-height: 90pt;
+			color: $main-alternate-text-color;
+			background-color: $main-alternate-color;
+
+			a {
+				&:before {
+					content: "> ";
+				};
+			}
+		}
+
+		footer {
+			color: $main-alternate-text-color;
+			background-color: $main-alternate-color;
+		}
+	}
+}
+
+#registrationPage {
+	.content {
+		background-color: $main-alternate-color;
+
+		.body {
+			background-color: $main-alternate-color;
+		}
+
+		.other {
+			color: $main-text-color;
+			background-color: $main-color;
+
+			a {
+				&:before {
+					content: "< ";
+				};
+			}
+		}
+		
+		footer {
+			color: $main-text-color;
+			background-color: $main-color;
+		}
+	}
+}
+
+//==============================================================
+
+#loginPage, #registrationPage {
+
+	.content {
+		text-align: center;
+//		background-color: $main-color;
+
+		header {
+			max-height: 15%;
+			min-height: 70px;
+			padding: 10px;
 			color: $main-alternate-text-color;
 			
 			h3 {
 				font-weight: bold;
 				font-size: 38pt;
-				line-height: 1.7em;
 			}
 			
 			h5 {
 				font-size: 16pt;
-				line-height: 1.0em;
 			}
 		}
 
-		div.form {
+		.body {
-			@include flex(4);
-
 			form {
 				position: relative;
 				background: $main-alternate-text-color;
 
-//				@include border-radius(10px);
 				padding: 20px;
-				margin-bottom: 50px;
+//				margin-bottom: 50px;
 				max-width: 400px;
 
 				margin-left: auto;
 				margin-right: auto;
-/*			
+
-				&:after {
-					content: "";
-					position: absolute;
-					top: -15px;
-					margin-left: 50%;
-					left: -15px;
-					border-style: solid;
-					border-width: 0 15px 15px;
-					border-color: $main-alternate-text-color transparent;
-					display: block;
-					width: 0;
-					z-index: 1;
-				}			
-*/
 				label {
 					display: none;
 				}
@@ -90,18 +116,146 @@ refer to http://www.clipperz.com.
 				input {
 					font-family: "clipperz-font";
 					display: block;
-//					@include border-radius(4px);
 					padding: 5px;
 					margin-top: 5px;
 					margin-bottom: 10px;
 					font-size: 100%;
-//					box-shadow:inset 0 0 0;
 					font-size: 24pt;
 					width: 100%;
 					border: 1px solid #ccc;
 					border-radius: 0px;
 				}
 
+				.steps {
+					text-align: center;
+//					margin-left: auto;
+//					margin-right: auto;
+
+					.step {
+						display: none;
+
+						&.center {
+							display: block;
+						}
+
+						h1 {
+							color: $solarize-Accent-Blue;
+							font-size: 24pt;
+							font-weight: 700;
+							margin: 0px;
+							padding-top: 15px;
+						}
+						p {
+							color: $solarize-Content-50;
+							font-size: 14pt;
+							font-weight: 100;
+							margin: 0px;
+							padding: 5px 0px;
+						}
+
+						label {
+							display: none;
+						}
+
+						input {
+							font-family: "clipperz-font";
+							display: block;
+							padding: 5px;
+		//					margin-top: 5px;
+							margin-bottom: 10px;
+							font-size: 100%;
+							font-size: 24pt;
+							width: 100%;
+						}
+
+						&.TERMS_OF_SERVICE {
+							.checkboxBlock {
+//								margin-top: 10px;
+//								margin-bottom: 10px;
+//								clear: both;
+
+								input {
+									display: block;
+									float: left;
+//									margin: 5px;
+									margin-top: 10px;
+									width: 30px;
+								}
+
+								p {
+									font-size: 12pt;
+									font-weight: 500;
+									display: block;
+									text-align: left;
+									margin-left: 50px;
+									line-height: 1.5em;
+
+									a {
+										color: $solarize-Accent-Red;
+									}
+								}
+							}
+							
+							.stepIndex {
+								margin-top: 10px;
+							}
+						}
+				
+						.stepBody {
+							min-height: 140px;
+						}
+
+						.stepIndex {
+							
+							text-align: center;
+							.stepIndexItem {
+								font-weight: 900;
+								font-size: 28pt;
+								display: inline;
+								color: lightgrey;
+
+								&.center {
+									color: gray;
+								}
+							}
+						}	
+
+						.buttons {
+							text-align: center;
+							margin-top: 10px;
+
+							.button {
+								margin: 10px;
+								text-align: center;
+								vertical-align: middle;
+								display: inline-block;
+								width: 80px;
+
+								font-weight: 900;
+								line-height: 45px;
+								font-size: 24px;
+
+								&.back {
+									background-color: lightgrey;
+
+									&.step_-1 {
+										visibility: hidden;
+									}
+								}
+
+								&.disabled {
+									background-color: #c0c0c0;
+									cursor: default;
+								}
+								
+								&.enabled {
+									background-color: $main-color;
+								}
+							}
+						}
+					}
+				}
+
 				button {
 					font-family: "clipperz-font";
 					min-height: 48px;
@@ -133,78 +287,89 @@ refer to http://www.clipperz.com.
 			}
 		}
 
-		div.links {
+		.other {
-			ul {
+			font-size: 24pt;
-				li {
+			padding: 20px;
-					display: inline-block;
+			max-height: 20%;
-				}
+
+			a {
+				cursor: pointer;
 			}
 		}
 
 		footer {
-			@include flex(1);
+			max-height: 50px;
 
-			@include flexbox();
+			.links {
-			@include flex-direction(column);
+				ul {
-			@include align-items(stretch);
+					padding: 3px;
-
+					padding-bottom: 6px;
-			color: $main-alternate-text-color;
+					li {
-			background-color: $main-alternate-color;
+						display: inline-block;
-			font-size: 24pt;
+//						color: white;
-			cursor: default;
-
-			a.registrationLink {
 						cursor: pointer;
-				@include flex(auto);
-				line-height: 50pt;
 			
-				&:before {
+						&:after {
-					content: "> ";
+							content: '-';
+							padding-left: 4px;
+							padding-right: 4px;
+							cursor: default;
 						};
+
+						&:last-child:after {
+							content: '';
+							padding-left: 0px;
+							padding-right: 0px;
+						}
+					}
+				}
 			}
 
+			
 			.applicationVersion {
-				@include flex(1);
+				padding: 2px;
 				font-size: 8pt;
 				
 				$applicationVersionColor: #999;
 
 				span {
-					color: $applicationVersionColor;
+//					color: $applicationVersionColor;
 					&:after {
 						content: ":";
 					};
 				}
+
 				a {
-					color: $applicationVersionColor;
+//					color: $applicationVersionColor;
+					color: inherit;
 					text-decoration: none;
 					padding-left: 5px;
 					font-weight: bold;
 				}
 			}
 		}
-	}
 
-	div.loginForm.narrow {
+		//----------------------------------------------------------
+
+		&.narrow {
 			header {
-			font-size: 30pt;
+//				font-size: 30pt;
-			line-height: 70px;
+//				line-height: 70px;
 			}
 
 			footer {
-			/* max-height: 25px; */
+//				line-height: 20pt;
-			line-height: 20pt;
 			}
 		}
 
-	div.loginForm.extra-short {
+		//----------------------------------------------------------
+/*
+		&.extra-short {
 			header {
-//			@include flex(1);
 				font-size: 18pt;
 			}
 
 			div.form {
-//			@include flex(6);
 				form {
 					padding: 10px;
 					margin-bottom: 20px;
@@ -230,29 +395,10 @@ refer to http://www.clipperz.com.
 				font-size: 14pt;
 			}
 		}
+*/
+	}
+
+	//==============================================================
+
 
 }
-
-.links {
-	ul {
-
-		margin-bottom: 1em;
-		
-		li {
-			color: white;
-			cursor: pointer;
-			
-			&:after {
-				content: '-';
-				padding-left: 4px;
-				padding-right: 4px;
-			};
-
-			&:last-child:after {
-				content: '';
-				padding-left: 0px;
-				padding-right: 0px;
-			}
-		}
-	}
-}

frontend/delta/scss/style/registrationPage.scss

@@ -1,254 +0,0 @@
-/*
-
-Copyright 2008-2015 Clipperz Srl
-
-This file is part of Clipperz, the online password manager.
-For further information about its features and functionalities please
-refer to http://www.clipperz.com.
-
-* Clipperz is free software: you can redistribute it and/or modify it 
-  under the terms of the GNU Affero General Public License as published 
-  by the Free Software Foundation, either version 3 of the License, or 
-  (at your option) any later version.
-
-* Clipperz is distributed in the hope that it will be useful, but 
-  WITHOUT ANY WARRANTY; without even the implied warranty of 
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
-  See the GNU Affero General Public License for more details.
-
-* You should have received a copy of the GNU Affero General Public
-  License along with Clipperz. If not, see http://www.gnu.org/licenses/.
-
-*/
-
-#registrationPage {
-	background-color: $main-alternate-color;
-	color: $main-alternate-text-color;
-
-	.registrationForm {
-		@include flexbox();
-		@include flex-direction(column);
-		@include align-items(stretch);
-
-		height: 100%;
-		
-		text-align: center;
-		background-color: $main-alternate-color;
-
-		header {
-			@include flex(1);
-//			@include icon-font();
-
-			font-size: 48pt;
-			line-height: 90pt;
-			color: $main-alternate-text-color;
-			
-			h3 {
-				font-weight: bold;
-				font-size: 38pt;
-				line-height: 1.7em;
-			}
-			
-			h5 {
-				font-size: 16pt;
-				line-height: 1.0em;
-			}
-		}
-
-		div.form {
-			@include flex(4);
-
-			form {
-				background: $main-alternate-text-color;
-
-				padding: 20px;
-				margin-bottom: 50px;
-				max-width: 400px;
-
-				margin-left: auto;
-				margin-right: auto;
-
-				.steps {
-					text-align: center;
-					margin-left: auto;
-					margin-right: auto;
-					width: 400px;
-
-					.step {
-						display: none;
-
-						&.center {
-							display: block;
-						}
-
-						h1 {
-							color: $solarize-Accent-Blue;
-							font-size: 24pt;
-							font-weight: 700;
-							margin: 0px;
-							padding-top: 15px;
-						}
-						p {
-							color: $solarize-Content-50;
-							font-size: 14pt;
-							font-weight: 100;
-							margin: 0px;
-							padding: 5px 0px;
-						}
-
-						label {
-							display: none;
-						}
-
-						input {
-							font-family: "clipperz-font";
-							display: block;
-							padding: 5px;
-		//					margin-top: 5px;
-							margin-bottom: 10px;
-							font-size: 100%;
-							font-size: 24pt;
-							width: 100%;
-						}
-
-						&.TERMS_OF_SERVICE {
-							.checkboxBlock {
-//								margin-top: 10px;
-//								margin-bottom: 10px;
-//								clear: both;
-
-								input {
-									display: block;
-									float: left;
-//									margin: 5px;
-									margin-top: 10px;
-									width: 30px;
-								}
-
-								p {
-									font-size: 12pt;
-									font-weight: 500;
-									display: block;
-									text-align: left;
-									margin-left: 50px;
-									line-height: 1.5em;
-
-									a {
-										color: $solarize-Accent-Red;
-									}
-								}
-							}
-							
-							.stepIndex {
-								margin-top: 10px;
-							}
-						}
-				
-						.stepBody {
-							min-height: 140px;
-						}
-
-						.stepIndex {
-							
-							text-align: center;
-							.stepIndexItem {
-								font-weight: 900;
-								font-size: 28pt;
-								display: inline;
-								color: lightgrey;
-
-								&.center {
-									color: gray;
-								}
-							}
-						}	
-
-						.buttons {
-							text-align: center;
-							margin-top: 10px;
-
-							.button {
-								margin: 10px;
-								text-align: center;
-								vertical-align: middle;
-								display: inline-block;
-								width: 80px;
-
-								font-weight: 900;
-								line-height: 45px;
-								font-size: 24px;
-
-								&.back {
-									background-color: lightgrey;
-
-									&.step_-1 {
-										visibility: hidden;
-									}
-								}
-
-								&.disabled {
-									background-color: #c0c0c0;
-									cursor: default;
-								}
-								
-								&.enabled {
-									background-color: $main-color;
-								}
-							}
-						}
-					}
-				}
-
-
-
-
-			}
-		}
-
-		div.links {
-			ul {
-				li {
-					display: inline-block;
-				}
-			}
-		}
-
-		footer {
-			@include flex(1);
-
-//			color: $main-alternate-text-color;
-			color: $main-text-color;
-			background-color: $main-color;
-			cursor: pointer;
-			font-size: 24pt;
-
-			&:before {
-				content: "< ";
-			};
-
-			a {
-				line-height: 50pt;
-			}
-
-			.applicationVersion {
-				@include flex(1);
-				font-size: 8pt;
-				
-				$applicationVersionColor: black;
-
-				span {
-					color: $applicationVersionColor;
-					&:after {
-						content: ":";
-					};
-				}
-				a {
-					color: $applicationVersionColor;
-					text-decoration: none;
-					padding-left: 5px;
-					font-weight: bold;
-				}
-			}
-		}
-	}
-}