Refactor

Author: Okeanij

Client/src/site.template/Layout.vue

@@ -30,19 +30,26 @@
 							class="layout__toolbar__user-btn"
 						>
 							<template slot="label">
-								<img class="avatar  layout__user-avatar q-mr-sm" :src="userAvatar" />
+								<q-avatar class="avatar layout__avatar q-mr-sm">
+									<img :src="userAvatar" />
+								</q-avatar>
 								{{ userName }}
 							</template>
 							<UserMenu style="width:180px;" />
 						</q-btn-dropdown>
 
 						<q-btn v-else flat dense round>
-							<img class="avatar layout__user-avatar" :src="userAvatar" />
+							<q-avatar class="avatar layout__avatar">
+								<img :src="userAvatar" />
+							</q-avatar>
+
 							<q-menu>
 								<q-list class="sun-second-menu q-py-sm">
 									<q-item class="avatar-menu-item">
 										<q-item-section avatar>
-											<img class="avatar layout-avatar" :src="userAvatar" />
+											<q-avatar class="avatar layout__avatar">
+												<img :src="userAvatar" />
+											</q-avatar>
 										</q-item-section>
 										<q-item-section>
 											<q-item-label>
@@ -94,7 +101,7 @@
 
 		<q-page-container>
 			<q-toolbar v-if="!hideBreadcrumbs" class="page-padding">
-				<Breadcrumbs :category="category" :pageTitle="pageTitle" />
+				<Breadcrumbs :category="breadcrumbsCategory" :pageTitle="pageTitle" />
 			</q-toolbar>
 			<div :class="{ 'center-container': centered }">
 				<main>
@@ -155,8 +162,9 @@ export default {
 		hideBreadcrumbs() {
 			return this.$store.state.currentPage?.hideBreadcrumbs;
 		},
-		category() {
-			return this.$store.state.currentCategory;
+		breadcrumbsCategory() {
+			if (!this.$store.state.mounted) return null;
+			return this.$refs?.rv?.breadcrumbsCategory ?? this.$refs?.rv?.category;
 		},
 		siteSubTitle() {
 			return config.Global.SiteSubTitle;

Client/src/site.template/MaterialInlinePage.vue

@@ -1,9 +1,7 @@
 <template>
 	<q-page class="material-inline-page ">
 		<div class="material-inline-page__pan"></div>
-		<h1 class="q-title page-padding text-center">
-			{{ title }}
-		</h1>
+		<PageHeader class="page-padding text-center" :title="title" />
 		<MaterialInline
 			@loaded="loaded"
 			ref="inline"

Client/src/site.template/News2ColPage.vue

@@ -1,11 +1,6 @@
 <template>
 	<q-page class="news-2-col-page">
-		<h1 class="page-title page-padding ">
-			{{ title }}
-		</h1>
-		<div v-if="subTitle" class="page-sub-title page-padding">
-			{{ subTitle }}
-		</div>
+		<PageHeader class="page-padding" :title="title" :subTitle="subTitle" />
 
 		<div :class="['row', { hidden: !loaded }]">
 			<div

Client/src/site.template/SecretPage.vue

@@ -1,9 +1,9 @@
 <template>
 	<q-page class="secret-page middle flex">
-		<h3 class="secret-page__header">
-			<q-icon name="fas fa-fingerprint" />
+		<h1 class="secret-page__header">
+			<q-icon name="fas fa-user-secret" left />
 			{{ title }}
-		</h3>
+		</h1>
 	</q-page>
 </template>
 
@@ -23,7 +23,10 @@ export default {
 .secret-page__header {
 	border-radius: 12px;
 	border: 4px dashed $amber-3;
-	padding: 14px;
+	padding: 14px 34px;
 	color: $light-blue-6;
+	font-size: 60px;
+	margin: 20px;
+	text-align: center;
 }
 </style>