Browse Source

Add admin_badge class and add <span> for admin badge on various components

sbkwgh 7 năm trước cách đây
mục cha
commit
ddc753c106

+ 14 - 0
frontend/src/assets/scss/elementStyles.scss

@@ -237,6 +237,20 @@ b, strong {
 	}
 }
 
+.admin_badge {
+	background: $color__darkgray--primary;
+	border-radius: 0.25rem;
+	color: #fff;
+	cursor: default;
+	font-size: 0.7rem;
+	font-weight: 400;
+	padding: 0.1rem 0.3rem;
+
+	@at-root #{&}--large {
+		font-size: 1.5rem;
+	}
+}
+
 .link_preview {
 	border: thick solid $color__gray--primary;
 	padding: 1rem;

+ 4 - 1
frontend/src/components/AvatarIcon.vue

@@ -16,7 +16,10 @@
 						{{letter}}
 					</div>
 					<div class='avatar_icon__header_info'>
-						<span class='avatar_icon__username' @click.stop='goToUser'>{{proxyUser.username}}</span>
+						<span class='avatar_icon__username' @click.stop='goToUser'>
+							{{proxyUser.username}}
+							<span class='admin_badge' v-if='proxyUser.admin'>admin</span>
+						</span>
 						<span class='avatar_icon__date'>User since {{proxyUser.createdAt | formatDate('date') }}</span>
 					</div>
 				</div>

+ 6 - 1
frontend/src/components/ThreadPost.vue

@@ -33,7 +33,12 @@
 					In thread <span class='post__thread__name'>{{post.Thread.name}}</span>
 					&nbsp;&middot;&nbsp;
 				</div>
-				<div class='post__user' v-else>{{username}}</div>
+				<div class='post__user' v-else>
+					{{username}}
+
+					<span class='admin_badge' v-if='post.User.admin'>admin</span>
+				</div>
+
 				<replying-to
 					style='margin-right: 0.5rem;'
 					v-if='post.replyingToUsername'

+ 9 - 1
frontend/src/components/routes/User.vue

@@ -11,7 +11,15 @@
 				{{userPicture ? '' : username[0].toUpperCase()}}
 			</div>
 			<div class='user_header__info'>
-				<span class='user_header__username'>{{username}}</span>
+				<span class='user_header__username'>
+					{{username}}
+					<span
+						class='admin_badge admin_badge--large'
+						v-if='user && user.admin'
+					>
+						admin
+					</span>
+				</span>
 				<span class='user_header__date' v-if='user'>User since {{user.createdAt | formatDate('date') }}</span>
 				<div class='user_description' v-if='user && user.description && user.description.length' v-html='user.description'></div>
 			</div>