Fixed OTP rendering

frontend/delta/css/clipperz.css

@@ -795,9 +795,6 @@ input[type=text] {
     z-index: 10;
     background-color: rgba(0, 0, 0, 0.5); }
 
-.mainPage.narrow #extraFeaturesPanel.fullOpen .extraFeatureIndex {
-  width: 0px; }
-
 #extraFeaturesPanel {
   position: fixed;
   z-index: 20;
@@ -824,7 +821,17 @@ input[type=text] {
   #extraFeaturesPanel.fullOpen {
     width: 100%; }
     #extraFeaturesPanel.fullOpen .extraFeatureContent {
-      display: block; }
+      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; }
   #extraFeaturesPanel .extraFeatureIndex {
     -webkit-box-flex: none;
     -webkit-flex: none;
@@ -875,10 +882,16 @@ input[type=text] {
     -moz-flex: auto;
     -ms-flex: auto;
     flex: auto;
-    width: 100%;
-    height: 100%;
     background-color: black; }
     #extraFeaturesPanel .extraFeatureContent .extraFeature {
+      -webkit-box-flex: auto;
+      -webkit-flex: auto;
+      -moz-box-flex: auto;
+      -moz-flex: auto;
+      -ms-flex: auto;
+      flex: auto;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
       display: -webkit-box;
       display: -webkit-flex;
       display: -moz-flex;
@@ -889,8 +902,7 @@ input[type=text] {
       -webkit-flex-direction: column;
       -moz-flex-direction: column;
       -ms-flex-direction: column;
-      flex-direction: column;
+      flex-direction: column; }
-      height: 100%; }
       #extraFeaturesPanel .extraFeatureContent .extraFeature .header {
         -webkit-box-flex: none;
         -webkit-flex: none;
@@ -910,6 +922,18 @@ input[type=text] {
         overflow: auto;
         -webkit-overflow-scrolling: touch; }
 
+.mainPage.narrow #extraFeaturesPanel.fullOpen .extraFeatureIndex {
+  width: 0px; }
+.mainPage.narrow #extraFeaturesPanel.fullOpen .extraFeatureContent header {
+  -webkit-box-flex: none;
+  -webkit-flex: none;
+  -moz-box-flex: none;
+  -moz-flex: none;
+  -ms-flex: none;
+  flex: none;
+  display: block;
+  height: 48px; }
+
 .container {
   height: 100%;
   width: 100%; }
@@ -2323,8 +2347,52 @@ span.count {
     #extraFeaturesPanel .extraFeatureContent .extraFeature .button.disabled {
       background-color: #c0c0c0;
       cursor: default; }
-  #extraFeaturesPanel .extraFeatureContent .OTP {
+  #extraFeaturesPanel .extraFeatureContent .preferences h3 {
-    height: 100%; }
+    border-bottom: 1px solid white; }
+  #extraFeaturesPanel .extraFeatureContent .preferences .row {
+    padding-top: 4px; }
+    #extraFeaturesPanel .extraFeatureContent .preferences .row.one {
+      padding-left: 40px; }
+    #extraFeaturesPanel .extraFeatureContent .preferences .row.two {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-direction: normal;
+      -webkit-box-orient: horizontal;
+      -webkit-flex-direction: row;
+      -moz-flex-direction: row;
+      -ms-flex-direction: row;
+      flex-direction: row; }
+      #extraFeaturesPanel .extraFeatureContent .preferences .row.two .col.one {
+        -webkit-box-flex: none;
+        -webkit-flex: none;
+        -moz-box-flex: none;
+        -moz-flex: none;
+        -ms-flex: none;
+        flex: none;
+        width: 40px; }
+      #extraFeaturesPanel .extraFeatureContent .preferences .row.two .col.two {
+        -webkit-box-flex: auto;
+        -webkit-flex: auto;
+        -moz-box-flex: auto;
+        -moz-flex: auto;
+        -ms-flex: auto;
+        flex: auto; }
+    #extraFeaturesPanel .extraFeatureContent .preferences .row.lockEnabled input {
+      margin-left: auto;
+      margin-right: auto;
+      display: block; }
+    #extraFeaturesPanel .extraFeatureContent .preferences .row.lockTimeout span:after {
+      content: ": "; }
+    #extraFeaturesPanel .extraFeatureContent .preferences .row.lockTimeout input {
+      width: 50px;
+      align: right; }
+  #extraFeaturesPanel .extraFeatureContent .preferences span {
+    vertical-align: middle; }
+  #extraFeaturesPanel .extraFeatureContent .preferences input {
+    vertical-align: middle; }
   #extraFeaturesPanel .extraFeatureContent .OTP .header .description {
     padding-bottom: 0px; }
     #extraFeaturesPanel .extraFeatureContent .OTP .header .description p {
@@ -2484,8 +2552,6 @@ span.count {
         padding-right: 10px; }
     #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.REQUESTED, #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.USED {
       background-color: #222; }
-    #extraFeaturesPanel .extraFeatureContent .OTP .button {
-      margin: 1em 1em 0 0; }
   #extraFeaturesPanel .extraFeatureContent .OTP table tr td a {
     font-size: small;
     padding: 0 1em;
@@ -2819,8 +2885,6 @@ span.count {
     visibility: hidden; }
 
 .mainPage.narrow #extraFeaturesPanel .extraFeatureContent header {
-  display: block;
-  height: 48px;
   border-bottom: 1px solid white; }
   .mainPage.narrow #extraFeaturesPanel .extraFeatureContent header .button {
     font-family: 'clipperz-icons';

frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/OTP.js

@@ -214,17 +214,20 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
 		return	React.DOM.div({'className':'extraFeature OTP'}, [
 			React.DOM.div({'className':'header'}, [
 				React.DOM.h1({}, "One-Time Passwords"),
+			]),
+			React.DOM.div({'className':'content'}, [
+				React.DOM.div({},[
 					React.DOM.div({'className':'description'}, [
 						React.DOM.p({}, "A one-time password works like your regular passphrase, but it can be used only once. Strongly recommended when accessing your Clipperz account from unsecure devices where keyloggers may be installed."),
 					]),
-				React.DOM.a({'className':'button', 'onClick':this.handlePrint}, "Print")
+					React.DOM.a({'className':'button', 'onClick':this.handlePrint}, "Print"),
-			]),
+
-			React.DOM.div({'className':'content'}, [
 					React.DOM.ul({'className':'otpList'}, this.renderOtpRows()),
 					React.DOM.div({'className':'actions'}, [
 						React.DOM.a({'onClick': this.handleNew}, "create new OTP"),
 					]),
 				])
+			])
 		]);
 	},
 

frontend/delta/js/Clipperz/PM/UI/Components/Panels/ExtraFeaturesPanel.js

@@ -303,8 +303,8 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
 			React.DOM.header({}, [
 				React.DOM.div({'className':'button', 'onClick':this.hideExtraFeatureContent}, "close")
 			]),
-			// this.state['extraFeatureContent']
+			this.state['extraFeatureContentComponent'] ? this.state['extraFeatureContentComponent'](this.props) : null,
-			this.state['extraFeatureContentComponent'] ? this.state['extraFeatureContentComponent'](this.props) : null
+//			React.DOM.footer({}, "")
 		]);
 	},
 

frontend/delta/scss/core/layout.scss

@@ -169,28 +169,11 @@ input[type=text] {
 
 }
 
-.mainPage.narrow {
+//=============================================================================
-	#extraFeaturesPanel {
-		&.fullOpen {
-			.extraFeatureIndex {
-				width: 0px;
-			}
-		}
-
-		.extraFeatureContent {
-			.extraFeature {
-//				height: calc(100% - $mainCardToolbarHeight);
-			}
-		}
-		
-	}
-}
 
 #extraFeaturesPanel {
 	@include sliding-panel(right, $settingsPanelWidth);
 
-//	transition: right 0.3s ease-in-out;
-
 	&.open {
 		@include sliding-panel-open(right, $settingsPanelWidth);
 	}
@@ -200,10 +183,11 @@ input[type=text] {
 	}
 
 	&.fullOpen {
-//		right: 0px;
 		width: 100%;
+
 		.extraFeatureContent {
-			display: block;
+			@include flexbox();
+			@include flex-direction(column);
 		}
 	}
 
@@ -224,10 +208,7 @@ input[type=text] {
 	
 		& > div {
 			@include flex(auto);
-		
 			@include overflow-auto();
-//			overflow: auto;
-		
 		}
 
 		footer {
@@ -236,32 +217,62 @@ input[type=text] {
 	}
 
 	.extraFeatureContent {
-//		display: none;
 		@include flex(auto);
-		width: 100%;
-		height: 100%;
-//		background-color: rgba( 0, 0, 0, 0.95);
 		background-color: black;
 
+		header {
+		}
+
 		.extraFeature {
+			@include flex(auto);
+			@include overflow-auto();
+
 			@include flexbox();
 			@include flex-direction(column);
-			height: 100%;
-		
 			.header {
 				@include flex(none);
 				padding: 20px;
 			}
 			.content {
 				@include flex(auto);
-//				height: 100%;
 				padding: 0px 20px 20px 20px;
 				@include overflow-auto();
 			}
 		}
+
+//		footer {
+//			@include flex(none);
+//			height: 48px;
+//			width: 100%;
+//		}
 	}
 }
 
+//.............................................................................
+
+.mainPage.narrow {
+	#extraFeaturesPanel.fullOpen {
+
+		.extraFeatureIndex {
+			width: 0px;
+		}
+
+		.extraFeatureContent {
+			header {
+				@include flex(none);
+				display: block;
+				height: 48px;
+			}
+			
+			.extraFeature {
+				
+			}
+		}
+	}
+}
+
+//=============================================================================
+
 .container {
 	height: 100%;
 	width: 100%;

frontend/delta/scss/style/settingsPanel.scss

@@ -236,7 +236,6 @@ refer to http://www.clipperz.com.
 	.extraFeatureContent {
 		border-right: 1px solid #222;
 		color: white;
-//		padding: 20px;
 
 		header {
 			display: none;
@@ -244,7 +243,6 @@ refer to http://www.clipperz.com.
 		
 		.extraFeature {
 			.header {
-//				padding-bottom: 20px;
 
 				h1 {
 					font-size: 20pt;
@@ -387,10 +385,63 @@ refer to http://www.clipperz.com.
 			}
 		}
 
+		.preferences {
+			h3 {
+				border-bottom: 1px solid white;
+			}
+			
+			.row {
+				$firstColumnWidth: 40px;
+				padding-top: 4px;
+				
+				&.one {
+					padding-left: $firstColumnWidth;
+				}
+				
+				&.two {
+					@include flexbox();
+					@include flex-direction(row);
+
+					.col.one {
+						@include flex(none);
+						width: $firstColumnWidth;
+					}
+					
+					.col.two {
+						@include flex(auto);
+					}
+				}
+
+				&.lockEnabled {
+					input {
+						margin-left: auto;
+						margin-right: auto;
+						display: block;
+					}
+				}
+
+				&.lockTimeout {
+					span {
+						&:after {
+							content: ": ";
+						};
+					}
+					input {
+						width: 50px;
+						align: right;
+					}
+				}
+			}
+
+			span {
+				vertical-align: middle;
+			}
+			input {
+				vertical-align: middle;
+			}
+		}
 
 		.OTP {
-			height: 100%;
-
 			.header {
 				.description {
 					padding-bottom: 0px;
@@ -417,6 +468,7 @@ refer to http://www.clipperz.com.
 					};
 				}
 			}
+
 			.selectMenu {
 				margin-top: 1em;
 
@@ -550,7 +602,7 @@ refer to http://www.clipperz.com.
 				}
 			}
 			.button {
-				margin:1em 1em 0 0;
+//				margin:1em 1em 0 0;
 			}
 
 			table {
@@ -980,8 +1032,6 @@ refer to http://www.clipperz.com.
 	#extraFeaturesPanel {
 		.extraFeatureContent {
 			header {
-				display: block;
-				height: 48px;
 				border-bottom : 1px solid white;
 
 				.button {
@@ -994,6 +1044,14 @@ refer to http://www.clipperz.com.
 					padding-left: 10px;
 				}
 			}
+			
+			.extraFeature {
+			}
+		}
+		
+		&.fullOpen {
+			.extraFeatureContent {
+			}
 		}
 	}
 }