Split multiline posts

src/components/ProjectPost.vue

@@ -85,6 +85,9 @@
 			relatedMarkerLatLng() {
 				let oRelatedMarker = this.relatedMarker;
 				return new LngLat(oRelatedMarker.longitude, oRelatedMarker.latitude);
+			},
+			messageLines() {
+				return (this.options.content || '').split('\n');
 			}
 		},
 		methods: {
@@ -206,14 +209,16 @@
 			<div v-else-if="options.type == 'media'" class="body-box">
 				<projectMediaLink :options="options" :type="'post'" ref="medialink" @opening-lightbox="panMapToMarker" />
 			</div>
-			<div v-else-if="options.type == 'post'">
+			<template v-else-if="options.type == 'post'">
-				<p class="message">{{ options.content }}</p>
+				<div class="message">
-				<p class="signature">
+					<p v-for="(sLine, iIndex) in messageLines" :key="iIndex">{{ sLine }}</p>
+				</div>
+				<div class="signature">
 					<img v-if="options.gravatar" :src="'data:image/png;base64, '+options.gravatar" width="24" height="24" alt="--" />
 					<span v-else>-- </span>
 					<span>{{ options.formatted_name }}</span>
-				</p>
+				</div>
-			</div>
+			</template>
 			<div v-else-if="options.type == 'poster'" class="poster-form">
 				<textarea ref="post" name="post" :placeholder="lang.get('post.message')" class="autoExpand" rows="1" v-model="postMessage"></textarea>
 				<div class="poster-actions">
@@ -221,13 +226,13 @@
 					<appButton name="submit" :aria-label="lang.get('action.send')" :title="lang.get('action.send')" :icon="'send'" @click="send()" :iconClasses="sending?'flicker':''" />
 				</div>
 			</div>
-			<div v-else-if="options.type == 'archived'">
+			<template v-else-if="options.type == 'archived'">
 				<p><appIcon :icon="'success'" /></p>
 				<p>{{ lang.get('project.modes.histo') }}</p>
-			</div>
+			</template>
-			<div v-else-if="options.type == 'loading'">
+			<p v-else-if="options.type == 'loading'" class="flicker">
-				<p class="flicker"><appIcon :icon="'post'" /></p>
+				<appIcon :icon="'post'" />
-			</div>
+			</p>
 		</div>
 	</div>
 </template>

src/styles/_page.project.panel.feed.scss

@@ -204,13 +204,17 @@
 			&.post {
 				.body {
 					padding: 0 var.$block-spacing var.$elem-spacing;
-					
+
-					.message {
+					.message p {
 						margin: 0;
+
+						& + p {
+							margin-top: var.$text-spacing;
+						}
 					}
 
 					.signature {
-						margin: var.$elem-spacing 0 0 0;
+						margin-top: var.$elem-spacing;
 						text-align: right;
 						font-style: italic;