From 04b34c98ed99479dd9dd6d02cbaa6cecfe45b572 Mon Sep 17 00:00:00 2001
From: Guillaume Rousse <guillaume.rousse@renater.fr>
Date: Fri, 23 Feb 2018 11:39:47 +0100
Subject: [PATCH] style and layout cleanup
---
resources/css/style.css | 39 ++++++-----------------
templates/web/en/create_accounts.tt2.html | 19 +++++++----
templates/web/fr/create_accounts.tt2.html | 19 +++++++----
3 files changed, 36 insertions(+), 41 deletions(-)
diff --git a/resources/css/style.css b/resources/css/style.css
index 5ee6324..060512f 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -77,16 +77,6 @@ main form table tr.even, main form table tr.alt, main form table tr: nth-of-type
main h2 {
font-size: 1.5rem;
}
-main #table_with_attributes {
- border: 1px solid #ff8447;
- border-radius: 7px;
-}
-main #table_with_attributes tr.even, main #table_with_attributes tr.alt, main #table_with_attributes tr: nth-of-type(2n) {
- background-color: hsl(20,100%,94%);
-}
-main form table #username, main form table #password {
- margin-bottom: 0
-}
/* wizard */
.wizard > .steps .current a, .wizard > .steps .current a: hover, .wizard > .steps .current a:active {
@@ -156,7 +146,7 @@ main form table #username, main form table #password {
}
/* Accounts profile */
-.accounts_profile {
+.accounts {
box-sizing: border-box;
min-width: 30%;
display: flex;
@@ -164,30 +154,28 @@ main form table #username, main form table #password {
justify-content: space-between;
align-items: stretch;
}
-.accounts_profile > div.tbl {
+.accounts .account {
flex: 0 0 22em;
- display: block; /* IE fix */
margin-right: 1em;
}
-.accounts_profile div.tbl table {
- width: 100%;
+.accounts .account table {
margin-top: 2rem;
table-layout: fixed;
word-wrap: break-word;
}
-.accounts_profile div.tbl table tr th: nth-child(1) {
- width: 40%;
+.accounts .account table caption {
+ background-color: #FF6314;
+ color: #FFFFFF;
+ border-radius: 5px 5px 0 0;
+ text-align: left;
+ font-weight: bold;
}
-.accounts_profile div.tbl table tr: nth-child(3) div {
+.accounts .account .comment {
display: flex;
margin: 0;
padding: 0;
height: 7em;
overflow-y: scroll;
-}
-.accounts_profile div.tbl table tr: nth-child(3) div p {
- margin: auto 0;
- display: block; /* IE fix */
font-size: 0.875rem;
line-height: 1.3;
text-align: left;
@@ -196,13 +184,6 @@ main form table #username, main form table #password {
margin-bottom: 0;
padding: 0.5rem 1rem;
}
-.accounts_profile table caption {
- background-color: #FF8547;
- color: #FFFFFF;
- padding: 0.2rem 0 0.2rem 1rem;
- border-radius: 5px 5px 0 0;
- text-align: left;
-}
.scrollable {
overflow-y: scroll;
diff --git a/templates/web/en/create_accounts.tt2.html b/templates/web/en/create_accounts.tt2.html
index 1c2c9a7..3351367 100644
--- a/templates/web/en/create_accounts.tt2.html
+++ b/templates/web/en/create_accounts.tt2.html
@@ -9,22 +9,29 @@ provider.</p>
<p>Click <a href="[% conf.app_url %]?action=download_accounts&entityid=[% entityid %]&token=[% token %]&key=[% key %]">here</a> to download the list of those accounts in CSV format.</p>
-<div class="accounts_profile">
+<div class="accounts">
[% FOREACH account IN accounts %]
- <div class="tbl">
+ <div class="account">
<table>
<caption>Account profile: [% account.profile() %]</caption>
<tr>
- <th>user name:</th><td> user[% account.id() %]</td>
+ <td><strong>user name:</strong></td>
+ <td>user[% account.id() %]</td>
</tr>
<tr>
- <th>user password:</th><td>[% account.password() %]</td>
+ <td><strong>user password:</strong></td>
+ <td>[% account.password() %]</td>
</tr>
<tr>
- <td colspan="2"><strong>comment:</strong><div><p>[% account.comment() %]</p></div></td>
+ <td colspan="2">
+ <strong>comment:</strong>
+ <div class="comment">[% account.comment() %]</div>
+ </td>
</tr>
<tr>
- <td colspan="2" class="text-center" ><button data-open="account_details_[% account.id() %]" class="button show_account_details" id="show_account_details_[% account.id() %]">show details</button></td>
+ <td colspan="2" class="text-center" >
+ <button data-open="account_details_[% account.id() %]" class="button show_account_details" id="show_account_details_[% account.id() %]">show details</button>
+ </td>
</tr>
</table>
</div>
diff --git a/templates/web/fr/create_accounts.tt2.html b/templates/web/fr/create_accounts.tt2.html
index fc09061..f458e73 100644
--- a/templates/web/fr/create_accounts.tt2.html
+++ b/templates/web/fr/create_accounts.tt2.html
@@ -9,22 +9,29 @@ service fédéré. Pour le faire, sélectionnez <strong>[% idp_displayname
<p>Cliquez <a href="[% conf.app_url %]?action=download_accounts&entityid=[% entityid %]&token=[% token %]&key=[% key %]">ici</a> pour télécharger la liste de ces comptes au format CSV.</p>
-<div class="accounts_profile">
+<div class="accounts">
[% FOREACH account IN accounts %]
- <div class="tbl">
+ <div class="account">
<table>
<caption>Profil d'utilisateur: [% account.profile() %]</caption>
<tr>
- <th>nom d'utilisateur:</th><td> user[% account.id() %]</td>
+ <td><strong>nom d'utilisateur:</strong></td>
+ <td>user[% account.id() %]<</td>
</tr>
<tr>
- <th>mot de passe:</th><td>[% account.password() %]</td>
+ <td><strong>mot de passe:</strong></td>
+ <td>[% account.password() %]</td>
</tr>
<tr>
- <td colspan="2"><strong>commentaire:</strong><div><p>[% account.comment() %]</p></div></td>
+ <td colspan="2">
+ <strong>commentaire:</strong>
+ <div class="comment">[% account.comment() %]</div>
+ </td>
</tr>
<tr>
- <td colspan="2" class="text-center" ><button data-open="account_details_[% account.id() %]" class="button show_account_details" id="show_account_details_[% account.id() %]">montrer les détails</button></td>
+ <td colspan="2" class="text-center" >
+ <button data-open="account_details_[% account.id() %]" class="button show_account_details" id="show_account_details_[% account.id() %]">montrer les détails</button>
+ </td>
</tr>
</table>
</div>
--
GitLab