From 81da5f78072cd0687a5e2802539c4b62ccb85135 Mon Sep 17 00:00:00 2001
From: "renater.salaun" <renater.salaun@047e039d-479c-447e-8a29-aa6bf4a09bab>
Date: Tue, 13 Jan 2015 07:58:22 +0000
Subject: [PATCH] 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 | 43 ++++++++++++----
templates/web/validate_token.tt2.html | 72 +++++++++++++++++----------
2 files changed, 78 insertions(+), 37 deletions(-)
diff --git a/resources/css/style.css b/resources/css/style.css
index fd0a835..9050ce4 100644
--- a/resources/css/style.css
+++ b/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;
diff --git a/templates/web/validate_token.tt2.html b/templates/web/validate_token.tt2.html
index 9212ec6..fac501a 100644
--- a/templates/web/validate_token.tt2.html
+++ b/templates/web/validate_token.tt2.html
@@ -1,5 +1,3 @@
-<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">×</a>
</div>
</dl>
--
GitLab