Explorar el Código

Use generic class .category_widget rather than repeated code in each component

sbkwgh hace 8 años
padre
commit
7693a239a2

+ 21 - 0
src/assets/scss/elementStyles.scss

@@ -174,4 +174,25 @@ b, strong {
 
 .p--condensed {
 	margin-top: 0.25rem;
+}
+
+.category_widget {
+	@at-root #{&}__box {
+		background-color: #fff;
+		padding: 1.5rem;
+		border-radius: 0.25rem;
+		margin-bottom: 1rem;
+
+		@extend .shadow_border;
+	}
+
+	@at-root #{&}__text {
+		margin-bottom: 1rem;
+
+		@at-root #{&}__title {
+			margin-bottom: 0.5rem;
+			font-weight: bold;
+			font-size: 1.25rem;
+		}
+	}
 }

+ 3 - 20
src/components/AdminCategories.vue

@@ -42,9 +42,9 @@
 			</div>
 		</modal-window>
 
-		<div class='admin_categories__categories'>
-			<div class='admin_categories__text'>
-				<div>Categories</div>
+		<div class='category_widget__box'>
+			<div class='category_widget__text'>
+				<div class='category_widget__text__title'>Categories</div>
 				Hover to remove or edit a category. <br/>
 				Removing a category will place any threads in that category into 'Other'
 			</div>
@@ -222,23 +222,6 @@
 			}
 		}
 
-		@at-root #{&}__categories {
-			background-color: #fff;
-			padding: 1.5rem;
-			border-radius: 0.25rem;
-
-			@extend .shadow_border;
-		}
-
-		@at-root #{&}__text {
-			margin-bottom: 1rem;
-
-			div {
-				margin-bottom: 0.5rem;
-				font-weight: bold;
-				font-size: 1.25rem;
-			}
-		}
 
 		@at-root #{&}__category {
 			display: inline-flex;

+ 3 - 22
src/components/AdminNewAdmin.vue

@@ -12,9 +12,9 @@
 			</div>
 		</modal-window>
 
-		<div class='admin_new_admin__box'>
-			<div class='admin_new_admin__text'>
-				<div class='admin_new_admin__text__title'>Add other admin users</div>
+		<div class='category_widget__box'>
+			<div class='category_widget__text'>
+				<div class='category_widget__text__title'>Add other admin users</div>
 				Click to generate a login link for a new admin account - this will expire after 24 hours
 				
 				<div v-if='!filteredAdmins'>Loading...</div>
@@ -99,24 +99,5 @@
 		@at-root #{&}__modal {
 			padding: 1rem;
 		}
-
-		@at-root #{&}__box {
-			background-color: #fff;
-			padding: 1.5rem;
-			border-radius: 0.25rem;
-			margin-bottom: 1rem;
-
-			@extend .shadow_border;
-		}
-
-		@at-root #{&}__text {
-			margin-bottom: 1rem;
-
-			@at-root #{&}__title {
-				margin-bottom: 0.5rem;
-				font-weight: bold;
-				font-size: 1.25rem;
-			}
-		}
 	}
 </style>