O.Lumineau : using flexbox for test accounts presentation.

Show account details boxes now using modal window intergation


git-svn-id: https://svn.geant.net/GEANT/edugain_testidp_account_manager/trunk@84 047e039d-479c-447e-8a29-aa6bf4a09bab

resources/css/style.css

@@ -209,24 +209,45 @@ button:hover, .button:hover{
 /* Accounts profile page*/
 .accounts_profile{
 	box-sizing:border-box;
+	min-width: 30%;
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+	align-items: stretch;
 }
 
-/*
-.accounts_profile ol{
-width: 100%;
-margin-top:2rem;
-margin-left:0;
+.accounts_profile > div {
+  flex: 1 0 20em;
+  display: block; /* IE fix */
+  margin-right:1em;
 }
-.accounts_profile li{
-margin-top:1rem;
-margin-bottom:1rem;
-}
-*/
 
-.accounts_profile table{
+
+.accounts_profile div table{
 	width:100%;
 	margin-top:2rem;
+	table-layout: fixed; 
+	word-wrap: break-word;
+}
+
+.accounts_profile div table tr th:nth-child(1){
+	width:40%;
 }
+
+.accounts_profile div table tr:nth-child(3) div{
+	display:flex;
+	margin:0;
+	padding:0;
+	height:10em;
+	overflow-y:scroll;	
+}
+.accounts_profile div table tr:nth-child(3) div p{
+	margin:auto;
+	display: block; /* IE fix */
+	font-size: 0.875rem;
+	line-height: 1.125;
+}
+
 .show_account_details{
 	margin-bottom:0;
 	padding:0.5rem 1rem;

templates/web/validate_token.tt2.html

-<h3>Test Accounts</h3>
-
 <script type="text/javascript">
 
 jQuery(document).ready(function($){
@@ -26,37 +24,58 @@ jQuery(document).ready(function($){
 
 
 <div class="row">
-	
+
+<h2>Test Accounts</h2>
+
 <div class="alert-box success radius">
 <strong>Success:</strong> Your identity as administrator of the Service Provider with entityID <strong>[% sp_entityid %]</strong> could successfully be validated!
 </div>
 
-<h4>The following test accounts with different profiles were created for you:</h4>
+<h3>The following test accounts with different profiles were created for you:</h3>
 
 <div class="accounts_profile">
 
     [% FOREACH account IN test_accounts %]
       [% PROCESS "${account.get('account_profile')}.tt2" %]
-
-        <table>
-			<caption>Account profile: [% account_profile.type %]</caption>
-			<tr>
-				<th>user name:</th><td> user[% account.get('id') %]</td>
-			</tr>
-			<tr>
-				<th>user password:</th><td>[% account.get('user_password') %]</td>
-			</tr>
-			<tr>
-				<th>comment:</th><td>[% account_profile.comment %]</td>
-			</tr>
-			<tr>
-			<td colspan=2 class="align-center" ><button class="show_account_details" id="show_account_details_[% account.get('id') %]">show account details</button></td> 
-			</tr>
-        </table>
-        
-        <div class="account_details" id="account_details_[% account.get('id') %]">
-            Below is the list of user attributes associated to this test account. After a successfull authentication process these attributes are transmited
-            via the SAML protocol from the Test Identity Provider to your Service Provider.
+		<div>
+			<table>
+				<caption>Account profile: [% account_profile.type %]</caption>
+				<tr>
+					<th>user name:</th><td> user[% account.get('id') %]</td>
+				</tr>
+				<tr>
+					<th>user password:</th><td>[% account.get('user_password') %]</td>
+				</tr>
+				<tr>
+					<th>comment:</th><td><div><p>[% account_profile.comment %]</p></div></td>
+				</tr>
+				<tr>
+				<td colspan=2 class="align-center" ><button data-reveal-id="account_details_[% account.get('id') %]" class="show_account_details" id="show_account_details_[% account.get('id') %]">show account details</button></td> 
+				</tr>
+			</table>
+		</div>
+        <div class="accounts_profile reveal-modal" data-reveal id="account_details_[% account.get('id') %]"> <!-- old version : class="account_details"-->
+            <h3>List of user attributes associated</h3>
+            <p>Below is the list of user attributes associated to this test account. After a successfull authentication process these attributes are transmited
+            via the SAML protocol from the Test Identity Provider to your Service Provider.</p>
+<div>
+			<table>
+				<caption>List of user attributes</caption>
+            [% FOREACH attribute IN account_profile.pairs -%]
+              [% NEXT IF attribute.key.match('^(type|comment)$') %]
+              [% IF attribute.value.isa('SCALAR') -%]
+				<tr>
+					<th>[% attribute.key %]:</th><td> [% attribute.value %]</td>
+				</tr>
+			  [% ELSE -%]
+				<tr>
+					<th>[% attribute.key %]:</th><td> [% attribute.value.join(",") %]</td>
+				</tr>
+			  [% END %]
+            [% END %]
+			</table>
+	</div>
+<!--
             <ul>
             [% FOREACH attribute IN account_profile.pairs -%]
               [% NEXT IF attribute.key.match('^(type|comment)$') %]
@@ -67,8 +86,9 @@ jQuery(document).ready(function($){
               [% END %]
             [% END %]
             </ul>
-            
-            If you a customized test account with additionnal user attributes, you should contact <a href="mailto:[% conf.support_email %]">[% conf.support_email %]</a>.
+-->         
+            <div class="alert-box info radius">If you a customized test account with additionnal user attributes, you should contact <a href="mailto:[% conf.support_email %]">[% conf.support_email %]</a>.</div>
+			<a class="close-reveal-modal">&#215;</a>
         </div>
         </dl>