style and layout cleanup

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;

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>

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>