Basic static metadata styling

diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss
index 744650554c4ce8f8440425a5a4d7146554734732..b51761de1b174cb440dca5d7ce8108b6636769af 100644 (file)
--- a/app/javascript/styles/accounts.scss
+++ b/app/javascript/styles/accounts.scss
@@ -203,6 +203,31 @@
     color: $ui-secondary-color;
   }
 
+  .metadata {
+    margin: 15px 0;
+    border: thin $ui-base-color solid;
+    border-collapse: collapse;
+    padding: 0;
+
+    th {
+      margin: 0;
+      border: thin $ui-base-color solid;
+      padding: 0 5px;
+      color: $ui-secondary-color;
+      background: darken($ui-base-color, 8%);
+      width: 94px;
+      vertical-align: middle;
+    }
+
+    td {
+      margin: 0;
+      border: thin $ui-base-color solid;
+      padding: 0 5px;
+      color: $ui-primary-color;
+      vertical-align: middle;
+    }
+  }
+
   @media screen and (max-width: 480px) {
     display: block;
 

diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml
index dcc6661bac62c36e0431be3bfdb15d4b2ffbb06e..5b504912d39164a346c6bd1748483d7f843f5d95 100644 (file)
--- a/app/views/accounts/_header.html.haml
+++ b/app/views/accounts/_header.html.haml
@@ -34,11 +34,11 @@
     .bio
       .account__header__content.p-note.emojify!=processed_bio[:text]
       - if processed_bio[:metadata].length > 0
-        .metadata<
+        %table.metadata<
           - processed_bio[:metadata].each do |i|
-            .metadata-item><
-              %b.emojify>!=i[0]
-              %span.emojify>!=i[1]
+            %tr.metadata-item><
+              %th.emojify>!=i[0]
+              %td.emojify>!=i[1]
 
     .details-counters
       .counter{ class: active_nav_class(short_account_url(account)) }