Showed message when no news items were found.

frontend/components/pages/News.vue

@@ -38,6 +38,7 @@
 					</div>
 				</div>
 			</div>
+			<h3 v-if="noFound" class="center">No news items were found.</h3>
 		</div>
 		<main-footer></main-footer>
 	</div>
@@ -57,7 +58,8 @@
 		},
 		data() {
 			return {
-				news: []
+				news: [],
+				noFound: false
 			}
 		},
 		ready: function () {
@@ -66,9 +68,11 @@
 				_this.socket = socket;
 				_this.socket.emit('news.index', res => {
 					_this.news = res.data;
+					if (_this.news.length === 0) _this.noFound = true;
 				});
 				_this.socket.on('event:admin.news.created', news => {
 					_this.news.unshift(news);
+					_this.noFound = false;
 				});
 				_this.socket.on('event:admin.news.updated', news => {
 					for (let n = 0; n < _this.news.length; n++) {
@@ -79,6 +83,7 @@
 				});
 				_this.socket.on('event:admin.news.removed', news => {
 					_this.news = _this.news.filter(item => item._id !== news._id);
+					if (_this.news.length === 0) _this.noFound = true;
 				});
 			});
 		}

frontend/theme.scss

@@ -6,3 +6,7 @@ $blue: #03A9F4;
 }
 
 @import '~bulma';
+
+.center {
+  text-align: center;
+}