UX: Comma separate public custom field lists (#14200)

UX: Comma separate public custom field lists (#14200)

diff --git a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
index ab4b80e..c08cfcd 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
@@ -235,7 +235,13 @@
               {{#if uf.value}}
                 <div class="public-user-field {{uf.field.dasherized_name}}">
                   <span class="user-field-name">{{uf.field.name}}:</span>
-                  <span class="user-field-value">{{uf.value}}</span>
+                  <span class="user-field-value">
+                    {{#each uf.value as |v|}} {{! some values are arrays }}
+                      <span class="user-field-value-list-item">{{v}}</span>
+                    {{else}}
+                      {{uf.value}}
+                    {{/each}}
+                  </span>
                 </div>
               {{/if}}
             {{/each}}
diff --git a/app/assets/javascripts/discourse/app/templates/user.hbs b/app/assets/javascripts/discourse/app/templates/user.hbs
index 1635bde..a714cc8 100644
--- a/app/assets/javascripts/discourse/app/templates/user.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user.hbs
@@ -159,7 +159,13 @@
                   {{#if uf.value}}
                     <div class="public-user-field {{uf.field.dasherized_name}}">
                       <span class="user-field-name">{{uf.field.name}}</span>:
-                      <span class="user-field-value">{{uf.value}}</span>
+                      <span class="user-field-value">
+                        {{#each uf.value as |v|}} {{! some values are arrays }}
+                          <span class="user-field-value-list-item">{{v}}</span>
+                        {{else }}
+                          {{uf.value}}
+                        {{/each}}
+                      </span>
                     </div>
                   {{/if}}
                 {{/each}}
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 5c1e478..75728b5 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -362,6 +362,13 @@
   .collapsed-info & {
     display: none;
   }
+
+  .user-field-value-list-item:not(:last-of-type) {
+    &:after {
+      // create comma separated list
+      content: ",";
+    }
+  }
 }
 
 .avatar-selector {
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index d3c5ba8..c2e5e1b 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -221,6 +221,12 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
   // custom user fields
   .public-user-fields {
     margin: 0;
+    .user-field-value-list-item:not(:last-of-type) {
+      &:after {
+        // create comma separated list
+        content: ",";
+      }
+    }
   }
 
   // badges

GitHub sha: 2bf81592ecec7c75265a252ab0bda58e8a4c13f0

This commit appears in #14200 which was approved by eviltrout. It was merged by awesomerobot.