Display profile fields

refs #149 (closed)

• Rebasing after merge the !995 (merged).

src/components/user_profile/user_profile.vue

@@ -11,6 +11,31 @@
         :allow-zooming-avatar="true"
         rounded="top"
       />
+      <div
+        v-if="user.fields_html && user.fields_html.length > 0"
+        class="user-profile-fields"
+      >
+        <dl
+          v-for="(field, index) in user.fields_html"
+          :key="index"
+          class="user-profile-field"
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          <dt
+            :title="user.fields_text[index].name"
+            class="user-profile-field-name"
+            @click.prevent="linkClicked"
+            v-html="field.name"
+          />
+          <dd
+            :title="user.fields_text[index].value"
+            class="user-profile-field-value"
+            @click.prevent="linkClicked"
+            v-html="field.value"
+          />
+          <!-- eslint-enable vue/no-v-html -->
+        </dl>
+      </div>
       <tab-switcher
         :active-tab="tab"
         :render-only-focused="true"
@@ -108,11 +133,60 @@
 <script src="./user_profile.js"></script>
 
 <style lang="scss">
+@import '../../_variables.scss';
 
 .user-profile {
   flex: 2;
   flex-basis: 500px;
 
+  .user-profile-fields {
+    margin: 0 0.5em;
+    img {
+      object-fit: contain;
+      vertical-align: middle;
+      max-width: 100%;
+      max-height: 400px;
+
+      &.emoji {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    .user-profile-field {
+      display: flex;
+      margin: 0.25em auto;
+      max-width: 32em;
+      border: 1px solid var(--border, $fallback--border);
+      border-radius: $fallback--inputRadius;
+      border-radius: var(--inputRadius, $fallback--inputRadius);
+
+      .user-profile-field-name {
+        flex: 0 1 30%;
+        font-weight: 500;
+        text-align: right;
+        color: var(--lightText);
+        min-width: 120px;
+        border-right: 1px solid var(--border, $fallback--border);
+      }
+
+      .user-profile-field-value {
+        flex: 1 1 70%;
+        color: var(--text);
+        margin: 0 0 0 0.25em;
+      }
+
+      .user-profile-field-name, .user-profile-field-value {
+        line-height: 18px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        padding: 0.5em 1.5em;
+        box-sizing: border-box;
+      }
+    }
+  }
+
   .userlist-placeholder {
     display: flex;
     justify-content: center;