Improve presentation

scipost/static/scipost/assets/vue/components/MessageContent.vue

@@ -5,20 +5,24 @@
       <div class="text-dark">
 	On: {{ message.datetimestamp }}
 	<br>
+	Subject: <strong>{{ message.data.subject }}</strong>
+	<br>
 	From: {{ message.data.from }}
 	<br>
 	Recipients: {{ message.data.recipients }}
-	<br>
-	Subject: <strong>{{ message.data.subject }}</strong>
       </div>
     </template>
     <b-card-text>
-      <h3>Message content:</h3>
       <span v-html="sanitized_html"></span>
     </b-card-text>
     <template v-slot:footer>
       <div class="text-dark">
-	{{ message.uuid }}
+	<b-button v-b-toggle="'message-json'" class="px-2 py-0">
+	  <small>View message JSON</small>
+	</b-button>
+	<b-collapse id="message-json" class="m-2">
+	  {{ message }}
+	</b-collapse>
       </div>
     </template>
   </b-card>

scipost/static/scipost/assets/vue/components/MessageHeaderList.vue

@@ -5,6 +5,7 @@
       v-for="message in apidata.results"
       :message="message"
       :key="message.id"
+      :class="{'active': (message === selected_message) }"
       @view="viewDetail"
       >
     </message-header-list-item>

scipost/static/scipost/assets/vue/components/MessageHeaderListItem.vue

 <template>
 <b-list-group-item
-  class="py-0"
   :id="'item' + [[ message.uuid ]]"
   >
-  <b-row>
-    <b-col>
-      <button class="btn btn-primary p-1" @click="$emit('view', message)">
-	View
-      </button>
-    </b-col>
+  <b-row @click="$emit('view', message)">
     <b-col>
       On: {{ message.datetimestamp }}
       <br>
-      From: {{ message.data.from }}
+      Subject: {{ message.data.subject }}
     </b-col>
     <b-col>
-      Subject: {{ message.data.subject }}
+      From: {{ message.data.from }}
+      <br>
+      Recipients: {{ message.data.recipients }}
     </b-col>
   </b-row>
 </b-list-group-item>