Added application version info

frontend/delta/css/clipperz.css

@@ -591,6 +591,11 @@ div.overlay {
 	&.show-bottom { transform: translateZ( -100px ) rotateX(   90deg ); }
 }
 */
+html {
+  position: fixed;
+  height: 100%;
+  width: 100%; }
+
 .page {
   position: absolute;
   top: 0;
@@ -925,7 +930,8 @@ div.cardContent {
   -webkit-flex-direction: row;
   -moz-flex-direction: row;
   -ms-flex-direction: row;
-  flex-direction: row; }
+  flex-direction: row;
+  height: 100%; }
   div.cardContent div.cardListColumn.column {
     -webkit-box-flex: 1;
     -webkit-flex: 1 0;
@@ -950,6 +956,7 @@ div.cardContent {
       -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
       border-radius: 30px;
+      z-index: 1;
       position: relative;
       bottom: 0px;
       font-size: 45pt;
@@ -1117,12 +1124,12 @@ div.cardContent {
     display: -moz-flex;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-direction: normal;
+    -webkit-box-direction: reverse;
     -webkit-box-orient: horizontal;
-    -webkit-flex-direction: row;
-    -moz-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row; }
+    -webkit-flex-direction: row-reverse;
+    -moz-flex-direction: row-reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse; }
     .cardDetailToolbar ul li {
       -webkit-box-flex: auto;
       -webkit-flex: auto;
@@ -1415,14 +1422,54 @@ div.dialogBox {
       -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;
-      cursor: pointer;
-      font-size: 24pt; }
-      #loginPage div.loginForm footer a {
+      font-size: 24pt;
+      cursor: default; }
+      #loginPage div.loginForm footer a.registrationLink {
+        cursor: pointer;
+        -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:before {
+        #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.extra-short header {
     font-size: 18pt; }
   #loginPage div.loginForm.extra-short div.form form {
@@ -2023,9 +2070,9 @@ div.cardList ul {
       -moz-flex: auto;
       -ms-flex: auto;
       flex: auto;
-      font-size: 18pt;
-      padding-top: 0.5em;
-      padding-bottom: 0.5em;
+      font-size: 14pt;
+      padding-top: 0.8em;
+      padding-bottom: 0.8em;
       padding-left: 8px;
       padding-right: 8px; }
 
@@ -2199,11 +2246,11 @@ div.cardList.narrow {
   -o-user-select: text;
   user-select: text;
   font-size: 24pt;
-  padding: 10px;
+  padding: 20px 20px 20px 42px;
   border: 0px; }
 .content input.cardLabel {
   width: 100%;
-  height: 52px; }
+  padding: 20px 20px 20px 42px; }
 .content .tagEditor {
   padding: 10px; }
 .content .cardNotes {
@@ -2220,7 +2267,8 @@ div.cardList.narrow {
     /* No support for these yet, use at own risk */
     -o-user-select: text;
     user-select: text;
-    line-height: 1.5em; }
+    line-height: 1.5em;
+    white-space: pre-wrap; }
   .content .cardNotes textarea {
     white-space: pre-wrap;
     word-wrap: break-word;
@@ -2419,6 +2467,8 @@ div.cardList.narrow {
   background-color: #ff9900;
   color: white;
   cursor: pointer; }
+  .content .cardDirectLogin .directLoginLabel {
+    padding-left: 36px; }
 
 div.dialog {
   -webkit-box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.75);

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

@@ -146,15 +146,19 @@ Clipperz.PM.UI.Components.Pages.LoginPage = React.createClass({
 //									React.DOM.a({'key':'signup', 'onClick':this.handleRegistrationLinkClick}, "Sign up")
 //								]);
 
-		var	registrationLink = React.DOM.a({'key':'signup', 'onClick':this.handleRegistrationLinkClick}, "Sign up");
+		var	registrationLink = React.DOM.a({'className':'registrationLink', 'key':'signup', 'onClick':this.handleRegistrationLinkClick}, "Sign up");
 
 		return React.DOM.div({'className':'loginForm ' + this.props['style']}, [
 			React.DOM.header({'key':'header'}, 'clipperz'),
 			React.DOM.div({'key':'form-wrapper', 'className':'form'}, [
 				this.props.mode == 'PIN' ? this.pinForm() : this.loginForm(),
 			]),
-			React.DOM.footer({'key':'registrationLink', 'className':'registrationLink'}, [
-				this.props['isNewUserRegistrationAvailable'] ? registrationLink : null
+			React.DOM.footer({}, [
+				this.props['isNewUserRegistrationAvailable'] ? registrationLink : null,
+				React.DOM.div({'className':'applicationVersion'}, [
+					React.DOM.span({}, "application version"),
+					React.DOM.a({'href':'https://github.com/clipperz/password-manager/commit/' + Clipperz_version}, Clipperz_version)
+				])
 			])
 //			this.props['isNewUserRegistrationAvailable'] ? registrationLink : null
 		]);

frontend/delta/scss/core/layout.scss

@@ -257,7 +257,8 @@ div.cardContent {
 
 	@include flexbox();
 	@include flex-direction(row);
-	
+	height: 100%;
+
 	div.cardListColumn.column {
 		@include flex($cardListWidth, 0);
 //		overflow-y: scroll;

frontend/delta/scss/style/loginPage.scss

@@ -98,22 +98,47 @@
 		}
 
 
-//		div.registrationLink {
 		footer {
 			@include flex(1);
 
+			@include flexbox;
+			@include flex-direction(column);
+			@include align-items(stretch);
+
 			color: $main-alternate-text-color;
 			background-color: $main-alternate-color;
-			cursor: pointer;
 			font-size: 24pt;
+			cursor: default;
 
-			a {
+			a.registrationLink {
+				cursor: pointer;
+				@include flex(auto);
 				line-height: 50pt;
 
 				&:before {
 					content: "> ";
 				};
 			}
+			
+			.applicationVersion {
+				@include flex(1);
+				font-size: 8pt;
+				
+				$applicationVersionColor: #999;
+
+				span {
+					color: $applicationVersionColor;
+					&:after {
+						content: ":";
+					};
+				}
+				a {
+					color: $applicationVersionColor;
+					text-decoration: none;
+					padding-left: 5px;
+					font-weight: bold;
+				}
+			}
 		}
 	}
 
@@ -147,9 +172,7 @@
 			}
 		}
 
-//		div.registrationLink {
 		footer {
-//			@include flex(2);
 			font-size: 14pt;
 		}
 	}