styling submissions page meta

opentech/apply/funds/templates/funds/applicationsubmission_detail.html

@@ -3,8 +3,13 @@
 {% block content %}
 <div class="wrapper wrapper--breakout wrapper--admin">
     <div class="wrapper wrapper--medium">
-        <h5>{{ object.stage }} | {{ object.page }} | {{ object.round }} | Lead: {{ object.round.specific.lead }}</h5>
         <h2 class="heading heading--no-margin">{{ object.title }}</h2>
+        <h5 class="heading heading--meta">
+            <span>{{ object.stage }}</span>
+            <span>{{ object.page }}</span>
+            <span>{{ object.round }}</span>
+            <span>Lead: {{ object.round.specific.lead }}</span>
+        </h5>
     </div>
 
     {% include "funds/includes/status_bar.html" with workflow=object.workflow status=object.status %}

opentech/static_src/src/sass/apply/components/_heading.scss

+.heading {
+    &--no-margin {
+        margin: 0;
+    }
+
+    &--meta {
+        display: flex;
+        flex-wrap: wrap;
+
+        span {
+            &::after {
+                padding: 0 15px;
+                content: '|';
+            }
+
+            &:last-child {
+                &::after {
+                    content: '';
+                }
+            }
+        }
+    }
+}

opentech/static_src/src/sass/apply/main.scss

@@ -11,6 +11,7 @@
 
 // Components
 @import 'components/button';
+@import 'components/heading';
 @import 'components/icon';
 @import 'components/wrapper';