Merge pull request #1982 from pixelfed/staging

Update Timeline, move announcements from sidebar to top of timeline

CHANGELOG.md

@@ -8,6 +8,7 @@
 ### Updated
 - Updated StatusController, restrict edits to 24 hours ([ae24433b](https://github.com/pixelfed/pixelfed/commit/ae24433b))
 - Updated RateLimit, add max post edits per hour and day ([51fbfcdc](https://github.com/pixelfed/pixelfed/commit/51fbfcdc))
+- Updated Timeline.vue, move announcements from sidebar to top of timeline ([228f5044](https://github.com/pixelfed/pixelfed/commit/228f5044))
 
 ## [v0.10.8 (2020-01-29)](https://github.com/pixelfed/pixelfed/compare/v0.10.7...v0.10.8)
 ### Added

public/mix-manifest.json

@@ -25,5 +25,5 @@
     "/js/status.js": "/js/status.js?id=c0058d6c5fecb0bc96c0",
     "/js/story-compose.js": "/js/story-compose.js?id=0a2ac08ac4dbc66b105f",
     "/js/theme-monokai.js": "/js/theme-monokai.js?id=39b089458f249e8717ad",
-    "/js/timeline.js": "/js/timeline.js?id=1db81ef37e38304aba79"
+    "/js/timeline.js": "/js/timeline.js?id=0548db240e700b82806f"
 }

resources/assets/js/components/AnnouncementsCard.vue

@@ -1,11 +1,14 @@
 <template>
 <div>
 	<transition name="fade">
-		<div v-if="announcements.length" class="card border shadow-none mb-3" style="max-width: 18rem;">
+		<div v-if="announcements.length" class="card border shadow-none mb-3">
+			<div class="card-header text-muted bg-white">
+				<i class="fas fa-bullhorn mr-2"></i> <span class="text-weight-light">ANNOUNCEMENTS</span>
+				<span class="float-right cursor-pointer" title="Close" @click="close"><i class="fas fa-times text-lighter"></i></span>
+			</div>
 			<div class="card-body">
 				<div class="card-title mb-0">
 					<span class="font-weight-bold">{{announcement.title}}</span>
-					<span class="float-right cursor-pointer" title="Close" @click="close"><i class="fas fa-times text-lighter"></i></span>
 				</div>
 				<p class="card-text">
 					<span style="font-size:13px;">{{announcement.summary}}</span>

resources/assets/js/components/Timeline.vue

@@ -12,6 +12,9 @@
 					</div>
 				</div>
 				<div :data-status-id="status.id" v-for="(status, index) in feed" :key="`${index}-${status.id}`">
+					<div v-if="index == 0 && showTips && !loading" class="mb-4 card-tips">
+						<announcements-card v-on:show-tips="showTips = $event"></announcements-card>
+					</div>
 					<div v-if="index == 2 && showSuggestions == true && suggestions.length" class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
 						<div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
 							<h6 class="text-muted font-weight-bold mb-0">Suggestions For You</h6>
@@ -265,10 +268,6 @@
 					</a>
 				</div>
 
-				<div v-if="showTips && !loading" class="mb-4 card-tips">
-					<announcements-card v-on:show-tips="showTips = $event"></announcements-card>
-				</div>
-
 				<div v-show="modes.notify == true && !loading" class="mb-4">
 					<notification-card></notification-card>
 				</div>