Allowing HTML in disclaimer.

assets/components/container/container.vue

@@ -8,35 +8,40 @@
 		/>
 
 		<transition name="slide">
-			<Sidebar
+			<Sidebar v-if="showSidebar" />
-				v-if="showSidebar"
-				@toggle-sidebar="(state) => toggleSidebar(state)"
-				@show-filters="(state) => toggleFilters(state)"
-			/>
 		</transition>
 
-		<Header
+		<Header />
-			@toggle-sidebar="(state) => toggleSidebar(state)"
-			@show-filters="(state) => toggleFilters(state)"
-		/>
 
 		<p
 			v-if="config.showDisclaimer"
 			class="disclaimer"
-		>{{ config.disclaimer }}</p>
+			v-html="config.disclaimer"
+		/>
+
+		<p
+			v-if="config.showAnnouncement"
+			class="announcement"
+			v-html="config.announcement"
+		/>
 
 		<div
 			ref="content"
 			class="content"
 			@scroll="scroll"
 		>
-			<router-view @scroll="scrollToTop" />
+			<RouterView @scroll="scrollToTop" />
 		</div>
 
 		<Filters
 			v-if="showFilters"
 			@close="toggleFilters(false)"
 		/>
+
+		<Settings
+			v-if="showSettings"
+			@close="toggleSettings(false)"
+		/>
 	</div>
 </template>
 
@@ -45,6 +50,7 @@ import Warning from './warning.vue';
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
 import Filters from '../filters/filters.vue';
+import Settings from '../settings/settings.vue';
 
 function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
@@ -55,6 +61,11 @@ function toggleFilters(state) {
 	this.showSidebar = false;
 }
 
+function toggleSettings(state) {
+	this.showSettings = state;
+	this.showSidebar = false;
+}
+
 async function setConsent(consent, includeQueer) {
 	if (consent) {
 		this.showWarning = false;
@@ -62,7 +73,7 @@ async function setConsent(consent, includeQueer) {
 	}
 
 	if (includeQueer) {
-		this.$store.dispatch('setTagFilter', this.$store.state.ui.tagFilter.filter(tag => !['gay', 'bisexual', 'transsexual'].includes(tag)));
+		this.$store.dispatch('setTagFilter', this.$store.state.ui.tagFilter.filter((tag) => !['gay', 'bisexual', 'transsexual'].includes(tag)));
 		return;
 	}
 
@@ -88,6 +99,9 @@ function scrollToTop() {
 function mounted() {
 	document.addEventListener('click', this.blur);
 	window.addEventListener('resize', this.resize);
+
+	this.events.on('toggleSettings', this.toggleSettings);
+	this.events.on('toggleSidebar', this.toggleSidebar);
 }
 
 function beforeUnmount() {
@@ -101,12 +115,15 @@ export default {
 		Sidebar,
 		Warning,
 		Filters,
+		Settings,
 	},
 	data() {
 		return {
 			showSidebar: false,
 			showWarning: localStorage.getItem('consent') !== window.env.sessionId,
 			showFilters: false,
+			showSettings: false,
+			selected: null,
 		};
 	},
 	mounted,
@@ -114,6 +131,7 @@ export default {
 	methods: {
 		toggleSidebar,
 		toggleFilters,
+		toggleSettings,
 		setConsent,
 		blur,
 		resize,
@@ -183,13 +201,21 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.disclaimer {
+.disclaimer,
+.announcement {
 	padding: .5rem 1rem;
 	margin: 0;
 	color: var(--text-light);
-	background: var(--warn);
 	font-weight: bold;
 	box-shadow: inset 0 0 3px var(--darken-weak);
 	text-align: center;
 }
+
+.disclaimer {
+	background: var(--warn);
+}
+
+.announcement {
+	background: var(--notice);
+}
 </style>