From 5884b1231f87acb55677a26c75b17b41ab284423 Mon Sep 17 00:00:00 2001
From: Mario Volke <info@mariovolke.com>
Date: Thu, 6 Nov 2014 16:55:14 +0100
Subject: [PATCH] rewritten account lightbox without tables

---
 src/sass/blocks/views/_account.scss | 52 ++++++++++++++++++++---------
 src/tpl/account.html                | 35 ++++++++-----------
 2 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/src/sass/blocks/views/_account.scss b/src/sass/blocks/views/_account.scss
index 77988a3..9f9c097 100644
--- a/src/sass/blocks/views/_account.scss
+++ b/src/sass/blocks/views/_account.scss
@@ -1,20 +1,42 @@
 .account {
-    // TODO: remove table layout -> use <dl>
-    table {
-        margin: 50px auto 60px;
-        td {
-            padding-top: 15px;
-            text-align: left;
-            &:first-child {
-                text-align: right;
-                padding-right: 15px;
-                font-weight: bold;
-            }
+    margin: 0;
+    text-align: center;
+    dt {
+        font-weight: bold;
+    }
+    dd {
+        margin: 0 0 10px;
+    }
+    a {
+        color: $color-main;
+        text-decoration: underline;
+    }
 
-            a {
-                color: $color-main;
-                text-decoration: underline;
-            }
+    & > :last-child {
+        margin-bottom: 0;
+    }
+
+    @include respond-to(md) {
+        @include scut-clearfix;
+
+        dt ~ dt,
+        dd ~ dd {
+            margin: 10px 0 0;
+        }
+
+        dt {
+            float: left;
+            padding-right: 0.5em;
+            text-align: right;
+            width: 50%;
+            margin: 0;
+        }
+        dd {
+            float: right;
+            padding-left: 0.5em;
+            text-align: left;
+            width: 50%;
+            margin: 0;
         }
     }
 }
\ No newline at end of file
diff --git a/src/tpl/account.html b/src/tpl/account.html
index f694621..dcb2ad8 100644
--- a/src/tpl/account.html
+++ b/src/tpl/account.html
@@ -7,28 +7,19 @@
   </header>
 
   <div class="lightbox__content">
-    <div class="account">
-      <table>
-        <tbody>
-          <tr>
-            <td>Email</td>
-            <td>{{eMail}}</td>
-          </tr>
-          <tr>
-            <td>PGP Key ID</td>
-            <td>{{keyId}} (<a href="https://whiteout.io/revocation.html" title="Click to reset your account." target="_blank">Revoke key</a>)</td>
-          </tr>
-          <tr>
-            <td>PGP Fingerprint</td>
-            <td><a href="{{publicKeyUrl}}" title="Click to share your public key." target="_blank">{{fingerprint}}</a></td>
-          </tr>
-          <tr>
-            <td>Key Size (RSA)</td>
-            <td>{{keysize}} bit</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+    <dl class="account">
+      <dt>Email</dt>
+      <dd>{{eMail}}</dd>
+
+      <dt>PGP Key ID</dt>
+      <dd>{{keyId}} (<a href="https://whiteout.io/revocation.html" title="Click to reset your account." target="_blank">Revoke key</a>)</dd>
+
+      <dt>PGP Fingerprint</dt>
+      <dd><a href="{{publicKeyUrl}}" title="Click to share your public key." target="_blank">{{fingerprint}}</a></dd>
+
+      <dt>Key Size (RSA)</dt>
+      <dd>{{keysize}} bit</dd>
+    </dl>
   </div>
 
   <footer class="lightbox__controls">