Merge pull request #651 from OpenTechFund/feature/formatting-commants-activity-feed

Show linebreaks on comments display. Move name to meta section. Make …

opentech/apply/activity/templates/activity/include/listing_base.html

@@ -6,7 +6,7 @@
     <div class="feed__content">
         <div class="feed__meta">
             <p class="feed__label feed__label--{{ activity.type }} feed__label--mobile">{{ activity.type|capfirst }}</p>
-            <p class="feed__meta-item">{{ activity.timestamp|date:"m.d.y h:iA e" }}</p>
+            <p class="feed__meta-item"><span>{{ activity|display_author:request.user }}</span> – {{ activity.timestamp|date:"Y-m-d H:i" }}</p>
             {% if activity.private %}
                 <p class="feed__meta-item feed__meta-item--right">
                     <svg class="icon icon--eye"><use xlink:href="#eye"></use></svg>
@@ -15,13 +15,11 @@
             {% endif %}
         </div>
         <p class="feed__heading">
-            <span>{{ activity|display_author:request.user }}</span>
-
             {% if submission_title %}
                 updated <a href="{{ activity.submission.get_absolute_url }}">{{ activity.submission.title }}</a>
             {% endif %}
 
-            - {{ activity.message }}
+            {{ activity.message|linebreaksbr }}
 
             {% if not submission_title and activity|user_can_see_related:request.user %}
                 {% with url=activity.related_object.get_absolute_url %}

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

@@ -69,7 +69,6 @@
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        text-transform: uppercase;
 
         @include media-query(small-tablet) {
             margin-bottom: 10px;
@@ -79,6 +78,10 @@
     &__meta-item {
         margin: 0 10px 0 0;
 
+        span {
+            font-weight: $weight--bold;
+        }
+
         @include media-query(small-tablet) {
             margin: 0 15px 0 0;
         }
@@ -128,9 +131,6 @@
             font-size: 18px;
         }
 
-        span {
-            font-weight: $weight--bold;
-        }
     }
 
     &__heading-status {