Merge pull request #5128 from LianaHarris360/category-metedata-style

Apply grade_levels tags styling to category metadata tags

Author: LianaHarris360

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue

@@ -98,12 +98,6 @@
                       v-if="subtitle"
                       class="text"
                     >{{ subtitle }}</span>
-                    <span
-                      v-if="node.categories ? Object.keys(node.categories).length > 0 : null"
-                      class="text"
-                    >
-                      {{ category(node.categories) }}
-                    </span>
                     <span v-if="isTopic && node.coach_count">
                       <!-- for each learning activity -->
                       <VTooltip
@@ -155,6 +149,16 @@
                         {{ levels(key) }}
                       </span>
                     </span>
+                    <span v-if="node.categories">
+                      <span
+                        v-for="(key, index) in category(node.categories)"
+                        :key="index"
+                        class="small-chip"
+                        :style="{ backgroundColor: $themeTokens.fineLine }"
+                      >
+                        {{ key }}
+                      </span>
+                    </span>
                   </span>
                 </VListTileContent>
 
@@ -356,7 +360,7 @@
         // is created here (unlike in ResourcePanel), because the values
         // are used to create one or more individual "chips" to display
         // rather than a string of text
-        return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
+        return ids.map(i => this.translateMetadataString(camelCase(i)));
       },
       category(options) {
         const ids = Object.keys(options);
@@ -514,10 +518,6 @@
     justify-content: center;
   }
 
-  .metadata > span:not(:last-child)::after {
-    content: ' • ';
-  }
-
   .small-chip {
     display: inline-block;
     padding: 2px 4px;