Adjust design

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/App.vue

@@ -5,8 +5,8 @@
 		</div>
 		<div id="app-content">
 			<div class="social__container">
-				<div class="social__welcome">
-					<a class="close icon-close" href="#"><span class="hidden-visually">Close</span></a>
+				<div class="social__welcome" v-if="!infoHidden">
+					<a class="close icon-close" @click="hideInfo()" href="#"><span class="hidden-visually">Close</span></a>
 					<h3>🎉{{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h3>
 					<p>
 						{{ t('social', 'We have automatically created a social account for you. Your social id is the same as the federated cloud id:') }}
@@ -19,8 +19,11 @@
 							<div class="avatar currentUser" data-username="admin"><img src="/index.php/avatar/admin/32?v=1" alt=""></div>
 						</div>
 						<form class="new-post-form">
-							<div class="author currentUser">Julius Haertl</div>
-							<div contenteditable="true" class="message" data-placeholder="New comment …"></div>
+							<div class="author currentUser">
+								{{ currentUser.displayName }}
+								<span class="social-id">{{ socialId }}</span>
+							</div>
+							<div contenteditable="true" class="message" placeholder="Share a thought…"></div>
 							<input class="submit icon-confirm has-tooltip" type="submit" value="" title="" data-original-title="Post">
 							<div class="submitLoading icon-loading-small hidden"></div>
 						</form>
@@ -34,7 +37,10 @@
 
 <style scoped>
 	.social__welcome {
+		max-width: 700px;
+		margin: 15px auto;
 		padding: 15px;
+		border-radius: 10px;
 		background-color: var(--color-background-dark);
 	}
 
@@ -46,18 +52,30 @@
 		float:right;
 	}
 
-	.social-id {
+	.social__welcome .social-id {
 		font-weight: bold;
 	}
+
+	.social__timeline {
+		max-width: 700px;
+		margin: 15px auto;
+	}
+
 	.new-post {
 		display: flex;
 		padding: 10px;
-		border-bottom: 1px solid var(--color-background-dark);
-
+		background-color: var(--color-main-background);
+		position: sticky;
+		top: 47px;
+		z-index: 100;
+		margin-bottom: 10px;
 	}
 	.new-post-author {
 		padding: 5px;
 	}
+	.author .social-id {
+		opacity: .5;
+	}
 	.new-post-form {
 		flex-grow: 1;
 		position: relative;
@@ -65,6 +83,11 @@
 	.message {
 		width: 100%;
 	}
+	[contenteditable=true]:empty:before{
+		content: attr(placeholder);
+		display: block; /* For Firefox */
+		opacity: .5;
+	}
 	input[type=submit] {
 		width: 44px;
 		height: 44px;
@@ -77,6 +100,11 @@
 		bottom: 0;
 		right: 0;
 	}
+
+	#app-content {
+		position: relative;
+	}
+
 </style>
 
 
@@ -94,7 +122,7 @@
 		},
 		data: function () {
 			return {
-
+				infoHidden: false,
 			};
 		},
 		beforeMount: function() {
@@ -114,7 +142,15 @@
 			}
 			this.$store.commit('addToTimeline', data);
 		},
+		methods: {
+			hideInfo() {
+				this.infoHidden = true;
+			}
+		},
 		computed: {
+			currentUser: function() {
+				return OC.getCurrentUser();
+			},
 			socialId: function() {
 				return '@' + OC.getCurrentUser().uid + '@' + OC.getHost();
 			},

src/components/TimelineEntry.vue

@@ -39,7 +39,7 @@
 <style scoped>
 	.timeline-entry {
 		padding: 10px;
-		border-bottom: 1px solid var(--color-background-dark);
+		margin-bottom: 10px;
 	}
 
 	.social__welcome h3 {